d21e91ace5
README now links to prompt files instead of duplicating prompt text inline. Eliminates three divergent versions of the same prompts. - Remove all inline prompt text from README steps 3-7 - Each step links directly to its prompt file - Fix prompt 02: "search bar" -> "filter buttons" (search doesn't exist yet) - Standardize Windows install to irm (official, auto-updates) - Honest note about browser version limitations - Inline troubleshooting replaced with link to troubleshooting.md Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
45 lines
1.8 KiB
Markdown
45 lines
1.8 KiB
Markdown
# 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
|