1
0
Fork 0

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

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

View file

@ -2,11 +2,10 @@
Copy and paste this into Claude Code:
---
```
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)
- Mark tasks as complete (strikethrough + muted color, completed tasks move to bottom)
- 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
- 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
- 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
@ -26,8 +25,7 @@ Create a todo app as a single index.html file.
- 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

View file

@ -2,11 +2,10 @@
Copy and paste this into Claude Code:
---
```
Add color-coded categories to the todo app. Requirements:
**Functionality:**
Functionality:
- Four categories: Work, Personal, Health, Learning
- When adding a task, show a dropdown to pick the 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
- Categories are saved in localStorage along with the tasks
**Design:**
Design:
- Use MUTED, sophisticated colors, not bright primaries:
- Work: dusty blue (#7C9CBF)
- 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)
- Group the search bar and filters into a toolbar card with subtle border
- Keep the existing warm dark design, do not introduce cold blues
---
```
## What Happens

View file

@ -2,8 +2,7 @@
Copy and paste this into Claude Code:
---
```
Add a search bar to the todo app. Requirements:
- 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
- If no tasks match, show a "No tasks found" message
- Keep the existing design
---
```
## What to Expect

View file

@ -2,8 +2,7 @@
Copy and paste this into Claude Code:
---
```
Add due dates to the todo app. Requirements:
- 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
- Due dates saved in localStorage
- Keep the existing design, categories, and search working
---
```
## What to Expect

View file

@ -2,8 +2,7 @@
Copy and paste this into Claude Code:
---
```
Make the todo app responsive and mobile-friendly. Requirements:
- 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
- Test: the app should look good on both a phone screen and a desktop monitor
- Keep all existing functionality working
---
```
## What to Expect