00488eb9a0
Instead of requiring a plugin, prompts 01 and 02 now include specific design instructions (warm palette, typography, spacing) that produce premium-looking output by default. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
47 lines
1.9 KiB
Markdown
47 lines
1.9 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 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
|