# 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 filter buttons 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