diff --git a/README.md b/README.md index 116e204..3103c72 100644 --- a/README.md +++ b/README.md @@ -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. --- diff --git a/prompts/02-add-categories.md b/prompts/02-add-categories.md index 41c063c..97ca13d 100644 --- a/prompts/02-add-categories.md +++ b/prompts/02-add-categories.md @@ -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 ```