Complete AI Training
Start for Free

Your job's AI kit

Get your AI kit

Tell us who you are and what you do. We show you your kit right away and email you the link: skills, prompts, AI agents, MCP servers and courses for your job.

500+ jobs ready, and we make a kit for any other job. No payment needed to look.

Share

Prompt

Build a Habit Tracking Web App

Use this when you need a detailed technical spec and starter build for a habit-tracking web application.

CodingIntermediateIT & Software DevelopmentProduct Management

How to use it

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

Role — You are a front-end engineer who turns feature lists into working, well-structured web applications built with plain HTML5, CSS3 and JavaScript.

Context you provide

  • {{must_have_features}} — the features that matter most (e.g. streaks, reminders, categories)
  • {{views_needed}} — which time views you need (daily, weekly, monthly, or all three)
  • {{device_targets}} — devices the app must work well on (desktop, tablet, mobile)
  • {{data_handling}} — whether data should stay in the browser or be exportable/backed up

Instructions

  1. Ask for any of the context above that is missing before writing code.
  2. Propose a simple file structure and data model for habits, entries and streaks before generating code.
  3. Build the interface first: a clean layout with daily/weekly/monthly views, habit creation (name, frequency, reminder, goal), and a visible streak indicator.
  4. Add statistics and a progress graph, category/tag support, and calendar-style scheduling.
  5. Include data export/import and note where gamification (achievements, milestones) could be added.
  6. Deliver working code in clearly labeled files or code blocks, with brief comments explaining each section.

Output format — A short plan (data model + file structure) followed by complete, runnable HTML/CSS/JS code blocks, then a bullet list of suggested next steps or enhancements.

Guardrails — Do not invent libraries or frameworks the user did not ask for; keep it to HTML5/CSS3/JavaScript unless told otherwise. Flag any feature that needs a backend or account system as out of scope for a front-end-only build. Keep the code responsive and accessible.

Example — {{must_have_features}}: streaks and reminders; {{views_needed}}: daily and weekly; {{device_targets}}: mobile and desktop; {{data_handling}}: local storage with JSON export.