# 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.