open/claude-code-first-project
1
0
Fork 0
Code Activity Actions
claude-code-first-project/prompts/02-add-categories.md
Kjell Tore Guttormsen ec708ba943 Initial commit: todo app guide with 5 prompts and examples 
Complete companion repo for "Your First Hour with Claude Code" article.
Includes step-by-step prompts, example output, troubleshooting, and cost guide.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-15 16:04:07 +01:00

1.2 KiB
Raw Blame History

Prompt 02: Add Categories

Copy and paste this into Claude Code:

Add color-coded categories to the todo app. Requirements:

  • Four categories: Work (blue #5B9FD6), Personal (green #4DB8A4), Health (orange #E87020), Learning (purple #A87BDB)
  • When adding a task, show a dropdown to pick the category
  • Each task shows a small colored dot or badge indicating its category
  • Add 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 should be visually highlighted
  • Categories are saved in localStorage along with the tasks
  • Keep the existing dark mode design

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
  • Colored filter buttons appear above the task list
  • Each task shows its category color
  • Switching filters instantly shows/hides tasks
  • Old tasks (without categories) still work