todo-app

Starter

Appears as a one-click chip in the workspace.

Build a task / todo / checklist app with add, edit, complete, delete, and persistent local storage. Use when the user asks for a todo app, task tracker, checklist, or simple list-based CRUD UI as a learning project or demo. Works in any scaffold; default to scaffold-react for a snappy SPA feel.

Scaffolds

react

vanilla

Verified dependencies

lucide-react

clsx

Example prompts

Prompts this skill is written to handle. Copy one into the workspace to try it.

Build a minimal todo app with local storage

Make a daily-tasks checklist with categories

Design a tiny grocery list app for my phone

Build a habit tracker that resets every day

Instructions

The full instruction set the agent receives when this skill is active.

Todo App

The classic demo. The bar is "nicer than the 100 other todos a designer will see today." Win on details, not features.

Required behavior

Add a task (Enter key submits, input clears).
Mark complete (checkbox or click row).
Edit task inline (double-click or pencil icon).
Delete task (hover-to-reveal trash icon — don't crowd the row).
Persist to localStorage so refresh doesn't wipe the list.
Empty state with one sentence + maybe an icon. Not "No todos yet 😔"; something that has a voice.

Optional, add only if asked

Filter: All / Active / Completed.
Drag to reorder (@dnd-kit/sortable, npm install @dnd-kit/core @dnd-kit/sortable).
Categories or tags.
Due dates.
Sync to a backend (don't reach for this on a demo — localStorage is fine).

Visual touches that make it not boring

Tasks fade-in / strike-through animate on complete. Use CSS transitions, not framer-motion overkill.
Completed tasks dim to a low-contrast gray; don't hide them.
The input is the hero of the page — make it large, give it character.
Show a quiet count: "3 of 7 done" — never "3 / 7 ✅".

Implementation Notes

scaffold-react: App.tsx with useState for the list. Persist with a tiny useEffect writing to localStorage. No Redux. No Zustand.
scaffold-next: same, but mark the page 'use client'.
scaffold-vanilla: a single index.html with vanilla JS. Use <template> for the row. ~80 lines.

State shape

type Task = {
  id: string;          // crypto.randomUUID()
  text: string;
  done: boolean;
  createdAt: number;
};