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>

prompts/01-create-todo.md

@@ -0,0 +1,37 @@
+# Prompt 01: Create the Todo App
+
+Copy and paste this into Claude Code:
+
+---
+
+Create a todo app as a single index.html file. Requirements:
+
+- Dark mode with a charcoal background (#1a1a2e or similar)
+- Modern, clean design with good spacing and readable fonts
+- Add new tasks with a text input and an "Add" button (also works on Enter)
+- Mark tasks as complete (strikethrough + muted color)
+- Delete tasks with a small delete button
+- All tasks saved to localStorage so they survive page refresh
+- Smooth transitions when adding/completing/deleting tasks
+- No external dependencies (no CDN links, no frameworks)
+- The whole app in one file: HTML, CSS, and JavaScript together
+
+---
+
+## What Happens
+
+Claude Code will:
+1. Create `index.html` with embedded CSS and JavaScript
+2. Ask for your permission before creating the file
+3. You approve, and the file appears in your folder
+
+## What to Expect
+
+Open `index.html` in your browser. You should see:
+- A dark-themed input field at the top
+- Type a task and press Enter to add it
+- Click a task to mark it done
+- Click the delete button to remove it
+- Refresh the page and your tasks are still there
+
+If something does not look right, tell Claude Code what is wrong. For example: "The delete button is too close to the task text, add more spacing." It will fix it.

prompts/02-add-categories.md

@@ -0,0 +1,33 @@
+# 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

prompts/03-add-search.md

@@ -0,0 +1,25 @@
+# Prompt 03: Add Search
+
+Copy and paste this into Claude Code:
+
+---
+
+Add a search bar to the todo app. Requirements:
+
+- Search input at the top, above the category filter buttons
+- Filters tasks in real time as the user types (no search button needed)
+- Searches both the task text and the category name
+- Works together with the category filters (search within the active category)
+- Subtle search icon or placeholder text "Search tasks..."
+- Clear button (x) to reset the search
+- If no tasks match, show a "No tasks found" message
+- Keep the existing design
+
+---
+
+## What to Expect
+
+- A search field appears at the top of the app
+- Typing immediately filters the visible tasks
+- Search combines with category filters (search "meeting" in "Work" category)
+- Clearing the search shows all tasks in the current filter again

prompts/04-add-due-dates.md

@@ -0,0 +1,25 @@
+# Prompt 04: Add Due Dates
+
+Copy and paste this into Claude Code:
+
+---
+
+Add due dates to the todo app. Requirements:
+
+- Optional date picker when adding a task
+- Due date displayed next to each task in a subtle format (e.g., "Mar 20")
+- Overdue tasks highlighted with a red accent (text or border, not the whole background)
+- Tasks due today highlighted with an amber accent
+- Sort option: by date added (default) or by due date
+- Tasks without a due date sort to the bottom when sorting by due date
+- Due dates saved in localStorage
+- Keep the existing design, categories, and search working
+
+---
+
+## What to Expect
+
+- A date picker appears in the task input area
+- Tasks show their due date on the right side
+- Overdue tasks get a red indicator
+- A sort toggle lets you switch between "added" and "due date" order

prompts/05-make-responsive.md

@@ -0,0 +1,26 @@
+# Prompt 05: Make It Mobile-Friendly
+
+Copy and paste this into Claude Code:
+
+---
+
+Make the todo app responsive and mobile-friendly. Requirements:
+
+- Works well on phone screens (375px wide and up)
+- Touch-friendly: buttons and inputs are at least 44px tall
+- Category filters wrap to multiple lines on small screens
+- Search bar is full width on mobile
+- Task text does not overflow, long text wraps properly
+- Add a proper viewport meta tag if missing
+- Swipe-to-delete would be a bonus but not required
+- Test: the app should look good on both a phone screen and a desktop monitor
+- Keep all existing functionality working
+
+---
+
+## What to Expect
+
+- Open `index.html` on your phone (or use browser dev tools to simulate a phone screen)
+- Everything fits and is easy to tap
+- No horizontal scrolling
+- Filter buttons wrap neatly on small screens