claude-code-first-project/prompts/01-create-todo.md

Prompt 01: Create the Todo App

Copy and paste this into Claude Code:

Create a todo app as a single index.html file.

Functionality:
- Add new tasks with a text input and an "Add" button (also works on Enter)
- Mark tasks as complete (strikethrough + muted color, completed tasks move to bottom)
- Delete tasks with a button that only appears on hover
- All tasks saved to localStorage so they survive page refresh
- Show today's date in the header
- Show remaining task count at the bottom
- Smooth staggered fade-in animation when tasks render
- No external dependencies except one Google Font

Design (this matters, make it look like a real app):
- Dark mode with a true warm dark background, NOT cold navy or blue-tinted
- Use Plus Jakarta Sans from Google Fonts
- Warm color palette: copper/peach for the primary accent, sage green for completed checkmarks, warm off-white for text
- Surface cards should be slightly elevated from background, not the same shade
- Grouped card layout: tasks share connected backgrounds with tight 2px gaps, rounded corners only on first and last item
- Custom checkbox with rounded corners (not circles) and an SVG checkmark
- Subtle radial gradient on the page background for depth
- Generous spacing, refined focus states with soft glow
- The app should feel premium and intentional, not like a tutorial demo

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 warm dark-themed app with today's date in the header
• Type a task and press Enter to add it
• Hover over a task to see the delete button
• Click the checkbox to mark it done (it moves to the bottom)
• Refresh the page and your tasks are still there

If something does not look right, tell Claude Code what is wrong. For example: "The accent color is too bright, make it more muted." It will fix it.

Why the Design Instructions Matter

Without specific design guidance, AI tools default to generic-looking output: cold blues, basic border-radius, system fonts. The design section in this prompt steers Claude Code toward something you would actually want to use. Try removing those lines and compare the result.