1.9 KiB
1.9 KiB
Prompt 02: Add Categories
Copy and paste this into Claude Code:
Add color-coded categories to the todo app. Requirements:
Functionality:
- Four categories: Work, Personal, Health, Learning
- When adding a task, show a dropdown to pick the category
- Each task shows a small vertical color bar indicating its category
- Show the category name as a small uppercase label on each task
- Add pill-shaped filter buttons at the top: "All", "Work", "Personal", "Health", "Learning"
- Clicking a filter shows only tasks in that category
- "All" shows everything
- Active filter button fills with the category color
- Categories are saved in localStorage along with the tasks
Design:
- Use MUTED, sophisticated colors, not bright primaries:
- Work: dusty blue (#7C9CBF)
- Personal: sage green (#8BB896)
- Health: terracotta (#D4896A)
- Learning: lavender (#B08FCF)
- Category indicator should be a thin vertical bar (3px wide), not a dot
- Filter buttons should be pill-shaped with a border, not rectangular
- Active "All" filter uses warm white, category filters use their own color
- Custom styled select dropdown (hide native arrow, add SVG chevron)
- Group the search bar and filters into a toolbar card with subtle border
- Keep the existing warm dark design, do not introduce cold blues
What Happens
Claude Code reads the existing index.html, understands the current structure, and adds the category system without breaking anything that already works.
This is the agent loop in action: it does not start from scratch. It reads what exists, plans the changes, and edits precisely.
What to Expect
- A category dropdown appears next to the task input
- Pill-shaped filter buttons appear above the task list
- Each task shows its category as a colored vertical bar and small label
- Switching filters instantly shows/hides tasks
- Old tasks (without categories) still work