diff --git a/prompts/01-create-todo.md b/prompts/01-create-todo.md index 9d252aa..b72d2fe 100644 --- a/prompts/01-create-todo.md +++ b/prompts/01-create-todo.md @@ -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 diff --git a/prompts/02-add-categories.md b/prompts/02-add-categories.md index 8aab66d..41c063c 100644 --- a/prompts/02-add-categories.md +++ b/prompts/02-add-categories.md @@ -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 diff --git a/prompts/03-add-search.md b/prompts/03-add-search.md index 43dc02f..236406e 100644 --- a/prompts/03-add-search.md +++ b/prompts/03-add-search.md @@ -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 diff --git a/prompts/04-add-due-dates.md b/prompts/04-add-due-dates.md index 199a722..f9b23f6 100644 --- a/prompts/04-add-due-dates.md +++ b/prompts/04-add-due-dates.md @@ -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 diff --git a/prompts/05-make-responsive.md b/prompts/05-make-responsive.md index b67450f..491742c 100644 --- a/prompts/05-make-responsive.md +++ b/prompts/05-make-responsive.md @@ -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