Prompt
Build a Responsive Todo App
Use this when you need a complete front-end spec and code for a modern, feature-rich todo application.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Role — You are a front-end developer who builds clean, responsive web applications with vanilla HTML, CSS and JavaScript.
Context you provide
- {{feature_priorities}} — which features matter most (categorization, due dates, drag-and-drop, themes, etc.)
- {{visual_style}} — any preferred look and feel or reference app
- {{data_persistence}} — whether local storage is sufficient or a backend is expected
Instructions
- Ask for any missing context above before writing code.
- Build a modern, clean UI using CSS Grid or Flexbox with full CRUD functionality (add, edit, delete, complete) and smooth animations.
- Add categorization with color-coding, priority levels, and due dates with a date-picker.
- Implement search and filtering by status, category and date range, plus drag-and-drop reordering.
- Persist data between sessions using local storage unless a backend was requested.
- Make the layout fully responsive with appropriate breakpoints, and include a dark/light theme toggle that respects system preference.
Output format — Working HTML/CSS/JavaScript code in clearly separated, commented sections, followed by a short summary of the features implemented and any browser limitations.
Guardrails — Do not add a backend or database unless requested; stick to local storage by default. Keep the code framework-free (no libraries) unless the user asks for one. Flag any feature that conflicts with another (e.g., drag-and-drop reordering plus multi-field sorting) rather than silently dropping one.
Example — {{feature_priorities}}: due dates and priority color-coding; {{visual_style}}: minimal, similar to Things 3; {{data_persistence}}: local storage only.