Skip to content

HyperDevApp/app-dev-zero-to-online

Repository files navigation

app-dev-zero-to-online

A Claude Code plugin that takes a project from zero to a live, online app through a guided dialog. Nine phases, twenty-six steps. Each step is one dialog turn — it asks a single question, gathers the inputs, performs the configured work, and confirms a binary completion gate before advancing.

License: MIT Claude Code

The entire workflow lives in data/app-development-steps.json — edit the JSON to retune questions, swap reference repos, change completion gates, or extend the workflow. No code changes required.


Install

Requires Claude Code v2.1.108 or later (claude --version).

Option A — via the bundled marketplace (recommended)

In any Claude Code session:

/plugin marketplace add HyperDevApp/app-dev-zero-to-online
/plugin install app-dev-zero-to-online@app-dev-zero-to-online-marketplace

You get version pinning + /plugin marketplace update for one-command upgrades.

Option B — one-shot via --plugin-url

claude --plugin-url https://github.com/HyperDevApp/app-dev-zero-to-online

The plugin is active only for that session. Useful for evaluation without persisting anything.

Option C — clone or symlink into ~/.claude/plugins/

git clone https://github.com/HyperDevApp/app-dev-zero-to-online ~/.claude/plugins/app-dev-zero-to-online

Or symlink from anywhere on disk:

ln -s "$(pwd)/app-dev-zero-to-online" ~/.claude/plugins/app-dev-zero-to-online

Restart Claude Code and the manifest, slash commands, dialog agent, and skill are discovered automatically.

Verify install

/plugin list

You should see app-dev-zero-to-online@app-dev-zero-to-online-marketplace listed as active. Then:

/app-dev-status

If the plugin is loaded you'll see "no dialog has started yet" — that's the expected first-run output.


Quickstart

In any project directory:

/app-dev

The agent will print a header, list the step's expected inputs, then ask its question verbatim:

Step 1.1 — Capture the project requirements Phase: phase-1 · Specification

"Describe the project. Paste the build spec, or describe the product in 1–3 paragraphs covering: goal, primary user, key capabilities, explicit non-goals, and any locked-in tech choices."

You answer. The agent writes docs/<spec-name>.md, verifies the completion gate, updates .app-dev-state.json, and offers the next step.

Repeat 25 more times and you have a live, online app with all four planning docs, a test-first implementation, a verification matrix, and a one-command launcher.


Slash commands

Command Effect
/app-dev Resume the workflow at the current step (or Step 1.1 if not yet started).
/app-dev 3.2 Jump to a specific step id.
/app-dev-status Show a progress table — done / current / pending.
/app-dev-reset Clear progress tracking. Does NOT delete any produced files.

Progress lives in .app-dev-state.json at the project root. Add it to your .gitignore if you don't want to check in workflow state.


Phases at a glance

Phase Steps Output
1. Specification 3 Spec doc + 10/20-keypoint brochure
2. Architecture 3 Architectural contract + utils surface + frontend block diagram
3. Agent organisation 3 Agent roster + reference repos + .claude/ folder choice
4. Workflow plan 2 TDD lifecycle + hard rules
5. Repo & infra bootstrap 3 Git repo + workspace skeleton + boundary-check hook
6. Test-first implementation 5 utils → workspaces → backend → UI
7. Iterative verification 3 Full suite + browser smoke + isomorphic fixes
8. One-command launch 2 start.sh + validation
9. Final verification matrix 2 VERIFICATION.md + commit

26 steps total.


How a step works

Every step in data/app-development-steps.json follows the same five-field shape:

{
  "id": "1.1",
  "title": "Capture the project requirements",
  "inputs": [],
  "question": "Describe the project. …",
  "process": {
    "user-answer": "Record the user's description verbatim …",
    "local-files": "None yet — this is the entry point.",
    "internet": "Fetch external standards once to lock vocabulary."
  },
  "outputs": ["docs/<spec-name>.md"],
  "completion": "The spec file exists, lists acceptance criteria, and the user confirms 'yes, that is the product.'"
}

When /app-dev executes a step it:

  1. Reads the step record + current state.
  2. Verifies declared inputs exist on disk.
  3. Asks the question verbatim.
  4. Executes the process (user answer → local files → optional internet).
  5. Writes the declared outputs.
  6. Confirms the completion gate.
  7. Advances .app-dev-state.json to the next step.

The agent never skips a question and never advances past a failing completion gate.


Plugin contents

app-dev-zero-to-online/
├── .claude-plugin/
│   ├── plugin.json                ← plugin manifest
│   └── marketplace.json           ← bundled single-plugin marketplace
├── data/
│   └── app-development-steps.json ← canonical workflow data (9 phases · 26 steps)
├── commands/
│   ├── app-dev.md                 ← /app-dev [step-id]
│   ├── app-dev-status.md          ← /app-dev-status
│   └── app-dev-reset.md           ← /app-dev-reset
├── agents/
│   └── app-dev-dialog.md          ← single-step dialog executor (sonnet)
├── skills/
│   └── app-dev-process/
│       └── SKILL.md               ← workflow knowledge index
├── README.md
├── CONTRIBUTING.md
├── CHANGELOG.md
└── LICENSE                         ← MIT

Extending

  • Add, remove, or rename a step. Edit data/app-development-steps.json — preserve the five-field shape (inputs, question, process.{user-answer, local-files, internet}, outputs, completion). Run claude plugin validate . after every change.
  • Change the dialog tone. Edit commands/app-dev.md to rephrase the per-step header or footer.
  • Swap the executor. The agents/app-dev-dialog.md agent is intentionally generic; replace its model or expand its tool list if you need different behaviour.
  • Add another slash command. Drop a new commands/<name>.md with YAML frontmatter and a body referencing the JSON; it's discovered automatically.

Autonomous mode

If you set a session-level /goal describing autonomous execution, the dialog agent honours it: it skips the AskUserQuestion call and takes the default answer implied by each step's JSON. This is how a full 26-step run can complete without per-step approval.


Troubleshooting

Symptom Fix
/plugin command not found Upgrade Claude Code (claude --version should be ≥ 2.1.108).
Plugin doesn't show up after install Run /reload-plugins or restart Claude Code.
Slash commands missing /plugin list should show the plugin as active; if disabled, /plugin enable app-dev-zero-to-online.
Need to start over /app-dev-reset clears progress — your produced files are untouched.
Want to validate edits to the JSON Clone the plugin folder and run claude plugin validate ..

Contributing

See CONTRIBUTING.md. PRs that touch the workflow JSON must preserve the five-field shape; the validator in CI rejects anything else.

License

MIT.

About

Claude Code plugin: nine-phase, twenty-six-step dialog from zero to a live, online app. Data-driven workflow editable via JSON.

Resources

License

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors