Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
cognitedata avatar

Integrate Todo List

  • 1.9k installs
  • 5 repo stars
  • Updated August 4, 2026
  • cognitedata/builder-skills

integrate-todo-list is an agent skill that MUST be used whenever adding a task/todo list feature to a Flows app with Atlas chat. Do NOT manually create todo state .

About

Add a structured task tracking feature to this Flows app The agent will use a TodoWrite tool to create and update a task list as it works through multi step queries giving the user real time visibility into what the agent is doing and why Prerequisite integrate atlas chat must already be complete useAtlasChat must be wired typically from atlas agent react src atlas agent must contain the vendored atlas agent sources and sinclair typebox must be installed per that skill package json confirm tabler icons react is installed if not install it with the app s package manager src App tsx find where to add TodoProvider The file that calls useAtlasChat likely src chat useChatViewModel ts or src App tsx this is where the tool gets wired The chat view component that renders messages this is where TodoPanel and TodoToolResultCard go Step 2 Create the src todo module Find the skill directory by running find path agents skills integrate todo list code type d from the project root

  • description: "MUST be used whenever adding a task/todo list feature to a Flows app with Atlas chat. Do NOT manually crea
  • allowed-tools: Read, Glob, Grep, Edit, Write, Bash
  • Add a structured task-tracking feature to this Flows app. The agent will use a `TodoWrite` tool
  • Follow integrate-todo-list SKILL.md steps and documented constraints.
  • Follow integrate-todo-list SKILL.md steps and documented constraints.

Integrate Todo List by the numbers

  • 1,885 all-time installs (skills.sh)
  • +2 installs in the week ending Aug 5, 2026 (Skillselion tracking)
  • Ranked #678 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
  • Security screen: LOW risk (skills.sh audit)
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
At a glance

integrate-todo-list capabilities & compatibility

Capabilities
description: "must be used whenever adding a tas · allowed tools: read, glob, grep, edit, write, ba · add a structured task tracking feature to this f · follow integrate todo list skill.md steps and do
Use cases
orchestration
From the docs

What integrate-todo-list says it does

description: "MUST be used whenever adding a task/todo list feature to a Flows app with Atlas chat. Do NOT manually create todo state management or tool definitions — this skill handles the full modul
SKILL.md
allowed-tools: Read, Glob, Grep, Edit, Write, Bash
SKILL.md
Add a structured task-tracking feature to this Flows app. The agent will use a `TodoWrite` tool
SKILL.md
npx skills add https://github.com/cognitedata/builder-skills --skill integrate-todo-list

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs1.9k
repo stars5
Security audit3 / 3 scanners passed
Last updatedAugust 4, 2026
Repositorycognitedata/builder-skills

When should an agent use integrate-todo-list and what problem does it solve?

MUST be used whenever adding a task/todo list feature to a Flows app with Atlas chat. Do NOT manually create todo state management or tool definitions — this skill handles the full module (context, pr

Who is it for?

Developers invoking integrate-todo-list as documented in the skill source.

Skip if: Skip when requirements fall outside integrate-todo-list documented scope.

When should I use this skill?

MUST be used whenever adding a task/todo list feature to a Flows app with Atlas chat. Do NOT manually create todo state management or tool definitions — this skill handles the full module (context, pr

What you get

Outputs aligned with the integrate-todo-list SKILL.md workflow and stated deliverables.

  • TodoProvider context integration
  • Status icon todo UI

Files

SKILL.mdMarkdownGitHub ↗

Integrate Todo List

Add a structured task-tracking feature to this Flows app. The agent will use a TodoWrite tool to create and update a task list as it works through multi-step queries, giving the user real-time visibility into what the agent is doing and why.

Prerequisite: `integrate-atlas-chat` must already be complete — useAtlasChat must be wired (typically from ./atlas-agent/react), src/atlas-agent/ must contain the vendored atlas-agent sources, and @sinclair/typebox must be installed per that skill.

---

Step 1 — Read the app

Before writing anything, read:

  • package.json — confirm @tabler/icons-react is installed; if not, install it with the app's package manager
  • src/App.tsx — find where to add TodoProvider
  • The file that calls useAtlasChat (likely src/chat/useChatViewModel.ts or src/App.tsx) — this is where the tool gets wired
  • The chat view component that renders messages — this is where TodoPanel and TodoToolResultCard go

---

Step 2 — Create the src/todo/ module

Find the skill directory by running find . -path "*/.agents/skills/integrate-todo-list/code" -type d from the project root.

Read each file from <skill-dir>/code/ and write it into src/todo/ with the same filename:

FilePurpose
types.tsTodoItem and TodoList types
TodoContext.tsxReact context + TodoProvider
useTodoList.tsHook to read/write the todo list
todoWriteTool.tscreateTodoWriteTool factory — AtlasTool with full CDF task-decomposition guidance
useTodoWriteTool.tsHook that memoizes the tool with current state access
TodoPanel.tsxCard UI: progress bar + task rows
TodoItemRow.tsxSingle row with animated status icons
TodoToolResultCard.tsxCompact summary card for tool call display

All files use relative imports (./types, ./TodoContext, etc.) — no changes needed.

---

Step 3 — Wrap the app in TodoProvider

In src/App.tsx (or the root component), wrap the existing tree with <TodoProvider>:

import { TodoProvider } from './todo/TodoContext'; // adjust path to match app conventions

function App() {
  return (
    <TodoProvider>
      {/* existing children */}
    </TodoProvider>
  );
}

---

Step 4 — Wire the tool into useAtlasChat

In the file that calls useAtlasChat, add the following. Adjust import paths to match the app's conventions.

import { useRef, useCallback } from 'react';
import { useTodoList } from './todo/useTodoList';
import { useTodoWriteTool } from './todo/useTodoWriteTool';

// Inside the hook/component:
const { todos, setTodos } = useTodoList();
const todoWriteTool = useTodoWriteTool();

// Keep a ref so getAppContext always reads fresh state without re-creating the callback.
const todosRef = useRef(todos);
todosRef.current = todos;

const getAppContext = useCallback(() => {
  const t = todosRef.current;
  if (t.length === 0) return undefined;
  const lines = t.map((item, i) => `${i + 1}. [${item.status}] ${item.content}`);
  return `Current todo list:\n${lines.join('\n')}`;
}, []);

// Add to useAtlasChat options:
const { messages, send, isStreaming, progress, error, reset, abort } = useAtlasChat({
  client: isLoading ? null : sdk,
  agentExternalId: AGENT_EXTERNAL_ID,
  tools: [todoWriteTool],   // add alongside any existing tools
  getAppContext,
});

// In the reset handler, clear the todo list:
const handleReset = useCallback(() => {
  reset();
  setTodos([]);
}, [reset, setTodos]);

// Expose todos in the return value so the view can render TodoPanel:
return { ..., todos };

---

Step 5 — Render TodoPanel in the chat view

In the component that renders the chat input area, add <TodoPanel> above the input field:

import { TodoPanel } from './todo/TodoPanel'; // adjust path

// In the render:
<TodoPanel todos={todos} />
<YourChatInput ... />

TodoPanel returns null when the list is empty, so it's safe to always render it.

---

Step 6 — Render TodoToolResultCard for tool call steps

In the component that renders per-message tool calls (typically a steps accordion or similar), branch on the tool name:

import { TodoToolResultCard } from './todo/TodoToolResultCard'; // adjust path

{toolCalls.map((tc, i) =>
  tc.name === 'TodoWrite' ? (
    <TodoToolResultCard key={i} toolCall={tc} />
  ) : (
    <YourDefaultToolCallCard key={i} toolCall={tc} />
  )
)}

---

Step 7 — Verify

Run the app's type-check command (typically pnpm tsc --noEmit) and confirm there are no errors. If the project has tests, run them to confirm nothing regressed.

---

Done

The agent can now use TodoWrite to create and track tasks. It will:

  • Show a task panel as soon as it starts multi-step work
  • Update task status in real-time (pendingin_progresscompleted)
  • Clear the list automatically when all tasks are done
  • Inject the current task list into each prompt via getAppContext so it knows where it left off

Related skills

How it compares

Use integrate-todo-list over external PM tools when agents must read live in-app task state from the same React session.

FAQ

What is integrate-todo-list?

MUST be used whenever adding a task/todo list feature to a Flows app with Atlas chat. Do NOT manually create todo state management or tool definitions — this skill handles the full

When should I use integrate-todo-list?

MUST be used whenever adding a task/todo list feature to a Flows app with Atlas chat. Do NOT manually create todo state management or tool definitions — this skill handles the full

Is integrate-todo-list safe to install?

Review the Security Audits panel on this page before production use.

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.