🔍 Search

Home · Coding Agents · Web Apps

🧩

Habit tracker web app with streaks — Web Apps Prompt

You get a runnable project for habit tracker web app with streaks — plan, complete code, demo data and run instructions — instead of disconnected code snippets.

Web Apps Advanced

✨ What you get — sample output preview

Sample output · Web Apps

A complete project for habit tracker web app with streaks: file tree (index/entry, components or modules per feature, styles, README), working core flow, demo data preloaded, and the must-have feature implemented rather than stubbed. Built with plain HTML/CSS/JS in a single project; runs locally with one command and passes the acceptance criteria above.

ResultYou get a runnable project for habit tracker web app with streaks — plan, complete code, demo data and run instructions — instead of disconnected code snippets.
Typical time5–30 minutes per build
CostCursor and Claude Code are paid; ChatGPT & Gemini free tiers work
DifficultyAdvanced

🧩 Fill the variables — your prompt updates live

You are a senior product engineer working as an autonomous coding agent. Build Habit Tracker Web App: a complete, working version of this brief — habit tracker web app with streaks — for first-time visitors on mobile and desktop. Stack: plain HTML/CSS/JS in a single project. Non-negotiable feature: search and filtering. Scope and quality bar: working web app, not a mockup: real state, localStorage persistence where no backend is specified, empty states, and a settings or reset option. Process: 1) Write a short plan with the file tree. 2) Implement every file completely — no placeholders, no TODO stubs. 3) Include seed/demo data so the app works on first run. 4) Add a README with exact run commands. Acceptance criteria: the app starts with one command, the core flow works end to end, layout is responsive, and errors are shown to the user in plain language. If a requirement is ambiguous, choose the simplest sensible option and note the assumption in the README instead of asking.
▶ Open in ChatGPTCopy + open Cursor ↗Copy + open Claude Code ↗Copy + open Gemini ↗

🛠️ How to use it in each tool

  1. Open your project in Cursor, start an Agent (Composer) chat, and paste the filled prompt from the box above as the task.
  2. Attach the files the agent may touch with @ references; the prompt's acceptance criteria act as the stop condition, so keep them in.
  3. Review the plan the agent proposes before it edits; then let it implement and run the result inside Cursor's terminal.
  4. Commit after each accepted run — agent-built projects iterate fastest in small, verified steps.

Paste location: Agent/Composer chat in your open project; attach editable files with @.

  1. In your project folder, start Claude Code and paste the filled prompt from the box above as the task (or save it as TASK.md and say "follow TASK.md").
  2. Let it plan first (it will propose a file tree); approve the plan, then let it write files and run the app or tests itself.
  3. Ask it to verify against the acceptance criteria in the prompt and fix failures before summarizing.
  4. Keep the session open for follow-up features — Claude Code retains the codebase context.

Paste location: the Claude Code session in your project folder, or a TASK.md file it is told to follow.

  1. Open ChatGPT (link below) — the quick-use button pre-fills the filled prompt from the box above in a new chat.
  2. Review the filled variables once; if a variable still shows brackets, replace it with your own words.
  3. Send it. For image results, ask for one variation at a time ("same image, warmer light") instead of re-rolling everything.
  4. Save the winning output and copy the final prompt into your notes — ChatGPT does not keep a prompt library for you.
  1. Open Gemini and paste the filled prompt from the box above (or use Copy + Open below).
  2. For image or video-capable tasks, Gemini routes to its media models automatically; state the format (aspect ratio / length) in the first line, as the prompt does.
  3. Regenerate once rather than editing mid-chat if the first result misses the format; then refine with one change at a time.
  4. Export text results to Docs/Sheets from the share menu when you need them in office formats.

🔗 Related prompts

🧩Web AppsEasy
Coding Agents

Markdown notes app with tags — Web Apps Prompt

You get a runnable project for markdown notes app with tags — plan, complete code, demo data and run instructions — instead of disconnected code snippets.

CursorClaude CodeChatGPTGemini
🧩Web AppsAdvanced
Coding Agents

Weather dashboard app — Web Apps Prompt

You get a runnable project for weather dashboard app — plan, complete code, demo data and run instructions — instead of disconnected code snippets.

CursorClaude CodeChatGPTGemini
🧩Web AppsMedium
Coding Agents

Appointment booking calendar app — Web Apps Prompt

You get a runnable project for appointment booking calendar app — plan, complete code, demo data and run instructions — instead of disconnected code snippets.

CursorClaude CodeChatGPTGemini
🧩Web AppsMedium
Coding Agents

Pomodoro focus timer app — Web Apps Prompt

You get a runnable project for pomodoro focus timer app — plan, complete code, demo data and run instructions — instead of disconnected code snippets.

CursorClaude CodeChatGPTGemini