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

style(prompts): format prompt text as code blocks for monospace rendering

Browse source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Kjell Tore Guttormsen 2026-03-15 19:41:02 +01:00
commit 4b58c631c8
5 changed files with 14 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

10
prompts/01-create-todo.md
View file

@ -2,11 +2,10 @@
Copy and paste this into Claude Code: Copy and paste this into Claude Code:
--- ```
Create a todo app as a single index.html file. Create a todo app as a single index.html file.
**Functionality:** Functionality:
- Add new tasks with a text input and an "Add" button (also works on Enter) - 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) - Mark tasks as complete (strikethrough + muted color, completed tasks move to bottom)
- Delete tasks with a button that only appears on hover - Delete tasks with a button that only appears on hover
@ -16,7 +15,7 @@ Create a todo app as a single index.html file.
- Smooth staggered fade-in animation when tasks render - Smooth staggered fade-in animation when tasks render
- No external dependencies except one Google Font - No external dependencies except one Google Font
**Design (this matters, make it look like a real app):** Design (this matters, make it look like a real app):
- Dark mode with a true warm dark background, NOT cold navy or blue-tinted - Dark mode with a true warm dark background, NOT cold navy or blue-tinted
- Use Plus Jakarta Sans from Google Fonts - 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 - Warm color palette: copper/peach for the primary accent, sage green for completed checkmarks, warm off-white for text
@ -26,8 +25,7 @@ Create a todo app as a single index.html file.
- Subtle radial gradient on the page background for depth - Subtle radial gradient on the page background for depth
- Generous spacing, refined focus states with soft glow - Generous spacing, refined focus states with soft glow
- The app should feel premium and intentional, not like a tutorial demo - The app should feel premium and intentional, not like a tutorial demo
```
---
## What Happens ## What Happens

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

@ -2,11 +2,10 @@
Copy and paste this into Claude Code: Copy and paste this into Claude Code:
--- ```
Add color-coded categories to the todo app. Requirements: Add color-coded categories to the todo app. Requirements:
**Functionality:** Functionality:
- Four categories: Work, Personal, Health, Learning - Four categories: Work, Personal, Health, Learning
- When adding a task, show a dropdown to pick the category - When adding a task, show a dropdown to pick the category
- Each task shows a small vertical color bar indicating its category - Each task shows a small vertical color bar indicating its category
@ -17,7 +16,7 @@ Add color-coded categories to the todo app. Requirements:
- Active filter button fills with the category color - Active filter button fills with the category color
- Categories are saved in localStorage along with the tasks - Categories are saved in localStorage along with the tasks
**Design:** Design:
- Use MUTED, sophisticated colors, not bright primaries: - Use MUTED, sophisticated colors, not bright primaries:
- Work: dusty blue (#7C9CBF) - Work: dusty blue (#7C9CBF)
- Personal: sage green (#8BB896) - Personal: sage green (#8BB896)
@ -29,8 +28,7 @@ Add color-coded categories to the todo app. Requirements:
- Custom styled select dropdown (hide native arrow, add SVG chevron) - 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 search bar and filters into a toolbar card with subtle border
- Keep the existing warm dark design, do not introduce cold blues - Keep the existing warm dark design, do not introduce cold blues
```
---
## What Happens ## What Happens

6
prompts/03-add-search.md
View file

@ -2,8 +2,7 @@
Copy and paste this into Claude Code: Copy and paste this into Claude Code:
--- ```
Add a search bar to the todo app. Requirements: Add a search bar to the todo app. Requirements:
- Search input at the top, above the category filter buttons - Search input at the top, above the category filter buttons
@ -14,8 +13,7 @@ Add a search bar to the todo app. Requirements:
- Clear button (x) to reset the search - Clear button (x) to reset the search
- If no tasks match, show a "No tasks found" message - If no tasks match, show a "No tasks found" message
- Keep the existing design - Keep the existing design
```
---
## What to Expect ## What to Expect

6
prompts/04-add-due-dates.md
View file

@ -2,8 +2,7 @@
Copy and paste this into Claude Code: Copy and paste this into Claude Code:
--- ```
Add due dates to the todo app. Requirements: Add due dates to the todo app. Requirements:
- Optional date picker when adding a task - Optional date picker when adding a task
@ -14,8 +13,7 @@ Add due dates to the todo app. Requirements:
- Tasks without a due date sort to the bottom when sorting by due date - Tasks without a due date sort to the bottom when sorting by due date
- Due dates saved in localStorage - Due dates saved in localStorage
- Keep the existing design, categories, and search working - Keep the existing design, categories, and search working
```
---
## What to Expect ## What to Expect

6
prompts/05-make-responsive.md
View file

@ -2,8 +2,7 @@
Copy and paste this into Claude Code: Copy and paste this into Claude Code:
--- ```
Make the todo app responsive and mobile-friendly. Requirements: Make the todo app responsive and mobile-friendly. Requirements:
- Works well on phone screens (375px wide and up) - Works well on phone screens (375px wide and up)
@ -15,8 +14,7 @@ Make the todo app responsive and mobile-friendly. Requirements:
- Swipe-to-delete would be a bonus but not required - 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 - Test: the app should look good on both a phone screen and a desktop monitor
- Keep all existing functionality working - Keep all existing functionality working
```
---
## What to Expect ## What to Expect