Integrate Todo List

Adds a structured task panel to Flows apps that use Atlas chat, letting the agent break down multi-step work into visible todos and update them in real time. Comes as a full module with context, hooks, tool definition, and UI components. You get a progress bar, animated status rows, and compact tool result cards that slot into your message renderer. The TodoWrite tool includes opinionated CDF task-decomposition guidance baked into its schema. Requires integrate-atlas-chat to be set up first. Saves you from rolling your own state management and wiring when you want users to see what the agent is doing step by step.

skills.sh installs: 1.9K
GitHub stars: 6
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add cognitedata/builder-skills --skill integrate-todo-list --agent claude-code

Installs into .claude/skills of the current project.

Files

Integrate Todo List

Add a TodoWrite tool and panel so the in-app Atlas agent can show task progress.

Skip if the app uses the Atlas / EOS sidebar (integrate-fusion-agent). Prerequisite: useAtlasChat + src/atlas-agent/ + @sinclair/typebox from integrate-atlas-chat.

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