open/claude-code-first-project
1
0
Fork 0
Code Activity Actions
claude-code-first-project/prompts/02-add-categories.md
Kjell Tore Guttormsen d21e91ace5 refactor: single source of truth for prompts 
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>
2026-03-15 20:08:58 +01:00

1.8 KiB
Raw Permalink Blame History

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