open/claude-code-first-project
1
0
Fork 0
Code Activity Actions

refactor: single source of truth for prompts

Browse source 
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>
This commit is contained in:
Kjell Tore Guttormsen 2026-03-15 20:08:58 +01:00
commit d21e91ace5
2 changed files with 29 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

73
README.md
View file

@ -18,7 +18,9 @@ Then you will iterate on it: add categories, search, due dates, and mobile layou
That is it. No programming language to install. No frameworks. No package managers. No git.
## Step 1: Install Claude Code
## Get Started
### Step 1: Install Claude Code
Open your terminal:
- **Mac:** Press `Cmd + Space`, type `Terminal`, press Enter
@ -31,25 +33,18 @@ Paste this and press Enter:
curl -fsSL https://claude.ai/install.sh | bash
```
**Windows alternative** (if curl does not work):
**Windows (PowerShell):**
```powershell
winget install Anthropic.ClaudeCode
irm https://claude.ai/install.ps1 | iex
```
**Do not want to use a terminal?** Download the [Claude Code desktop app](https://claude.ai/download) or use [claude.ai/code](https://claude.ai/code) in your browser. Both work the same way.
**Do not want to use a terminal?** Download the [Claude Code desktop app](https://claude.ai/download) and open the Code tab. The desktop app and terminal are full-powered. The browser version at [claude.ai/code](https://claude.ai/code) works for simpler tasks but has limitations.
A browser window opens to sign in. Complete the sign-in process and return to your terminal.
### Troubleshooting
If you see a "command not found" error after installing, close your terminal completely and open a new one. See [troubleshooting.md](troubleshooting.md) for more.
If you see a "command not found" error after installing:
1. Close your terminal completely (not just the tab)
2. Open a new terminal window
3. Type `claude` and press Enter
This fixes it almost every time. The installer adds Claude Code to your PATH, but the current terminal session does not pick it up until restarted.
## Step 2: Create a Project Folder
### Step 2: Create a Project Folder
```bash
mkdir my-todo-app
@ -59,53 +54,41 @@ claude
This starts Claude Code inside your new folder. You will see a prompt where you can type in plain English.
## Step 3: Build the Todo App (one prompt)
### Step 3: Build the Todo App
Copy and paste this prompt:
Open [prompts/01-create-todo.md](prompts/01-create-todo.md) and copy the prompt into Claude Code.
> Create a todo app as a single index.html file. Requirements: dark mode with a charcoal background, modern clean design, add/complete/delete tasks, tasks saved to localStorage so they survive page refresh. No external dependencies.
Claude Code will read your (empty) folder, plan the app structure, write the HTML, CSS, and JavaScript, and create the file. It asks permission before creating the file. Type `y` to approve.
Claude Code will:
1. Read your (empty) folder
2. Plan the app structure
3. Write the HTML, CSS, and JavaScript
4. Create the file
Open `index.html` in your project folder and double-click it. It opens in your browser. You now have a working todo app built from one sentence.
It asks permission before creating the file. Type `y` to approve.
### Step 4: Add Categories
**Open the result:** Find `index.html` in your project folder and double-click it. It opens in your browser.
Open [prompts/02-add-categories.md](prompts/02-add-categories.md) and copy the prompt.
You now have a working todo app built from one sentence.
Claude Code reads the existing file, understands the current design, and adds color-coded categories with filter buttons. Nothing that already works breaks.
## Step 4: Add Categories (iteration)
### Step 5: Add Search
This is where it gets interesting. Copy the prompt from [prompts/02-add-categories.md](prompts/02-add-categories.md), or simply type:
Open [prompts/03-add-search.md](prompts/03-add-search.md) and copy the prompt.
> Add color-coded categories to the todo app: Work (blue), Personal (green), Health (orange), Learning (purple). Each task gets a category dropdown. Filter buttons at the top to show only one category.
A search bar appears at the top. It filters tasks in real time as you type and works together with the category filters.
Claude Code reads the existing file, understands the current design, and adds categories while keeping everything else working. One prompt, one iteration.
### Step 6: Add Due Dates
## Step 5: Add Search
Open [prompts/04-add-due-dates.md](prompts/04-add-due-dates.md) and copy the prompt.
Copy the prompt from [prompts/03-add-search.md](prompts/03-add-search.md), or type:
Tasks get optional due dates. Overdue tasks are highlighted in red, tasks due today in amber. You can sort by due date.
> Add a search bar at the top that filters tasks in real time as you type. It should search both task text and category names.
### Step 7: Make It Mobile-Friendly
Watch how Claude reads the now-larger file, finds the right place to add the search input, writes the filtering logic, and tests that it does not break anything.
Open [prompts/05-make-responsive.md](prompts/05-make-responsive.md) and copy the prompt.
## Keep Going
The app now works on phone screens. Touch-friendly buttons, proper text wrapping, no horizontal scrolling.
Each file in `prompts/` is another iteration:
## Try Your Own Ideas
| Prompt | What It Adds |
|--------|-------------|
| [01-create-todo.md](prompts/01-create-todo.md) | Base todo app (dark mode, localStorage) |
| [02-add-categories.md](prompts/02-add-categories.md) | Color-coded categories with filters |
| [03-add-search.md](prompts/03-add-search.md) | Real-time search bar |
| [04-add-due-dates.md](prompts/04-add-due-dates.md) | Due dates with overdue highlighting |
| [05-make-responsive.md](prompts/05-make-responsive.md) | Mobile-friendly layout |
After these five, try your own ideas:
After the five prompts, try:
- Drag-and-drop reordering
- Export tasks as a text file
- Dark/light mode toggle
@ -137,11 +120,11 @@ Your results will look different. Claude Code generates fresh code each time. Th
## What It Costs
See [costs.md](costs.md) for a full breakdown. Short version: Pro at $20/month is the lowest-risk way to start.
Pro at $20/month is enough to complete this guide. See [costs.md](costs.md) for a full breakdown.
## Common Problems
See [troubleshooting.md](troubleshooting.md) for solutions to the most common issues people run into during their first session.
See [troubleshooting.md](troubleshooting.md) for solutions to the most common issues during your first session.
---

2
prompts/02-add-categories.md
View file

@ -26,7 +26,7 @@ Design:
- 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 search bar and filters into a toolbar card with subtle border
- Group the filter buttons into a toolbar card with subtle border
- Keep the existing warm dark design, do not introduce cold blues
```