Agent skill

plan-app

MANDATORY INVOCATION: This skill MUST be invoked for building workshop apps. Guides the full flow from idea to deployed app: interview, screen flows, decomposition into sub-agents, parallel build, and merge. Trigger for: :plan-app macro, building an app, app planning, workshop app build.

Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/plan-app

SKILL.md

Plan App

Build a complete app in ~2 hours through guided planning and parallel sub-agent execution.

Flow (MANDATORY - IN ORDER)

Complete each phase before moving to the next. Read the reference file at the START of each phase.

Phase 1: INTERVIEW

Read: reference/01-interview.md When: Immediately after skill invoked Goal: Understand what they want to build, who uses it, core use cases Done when: You have clear app concept and can describe it back to them

Phase 2: SCREEN FLOWS

Read: reference/02-screen-flows.md When: Interview complete Goal: Create wireframes + user journeys (combined, not separate) Done when: Participant approves the screen flows

Phase 3: DECOMPOSITION

Read: reference/03-decomposition.md When: Screen flows approved Goal: Split work into Foundation + Feature agents Done when: Sub-agent MD files written to /docs/agents/

Phase 4: DISPATCH

Read: reference/04-dispatch.md When: MD files ready Goal: Run Foundation agent, then feature agents in parallel (same repo, file ownership prevents conflicts) Done when: All sub-agents have returned

Phase 5: TESTING

Read: reference/05-testing.md When: All sub-agents complete Goal: Automated verification + user testing Done when: All checks pass, user confirms it works

Phase 6: DEPLOY

Read: reference/06-deploy.md When: Testing complete Goal: Deploy to Vercel Done when: App running on Vercel with live URL

Project Location

Create the project folder in the current working directory. Use a slugified version of the app name:

  • "Campaign Archive" → ./campaign-archive/
  • "Team Wiki" → ./team-wiki/

Do not ask the user where to put it. Just create it in the current directory.

Hard Limits

Enforce these during interview. If app exceeds limits, help them cut scope.

  • Max 4 screens
  • Max 2 tables
  • Max 2 external APIs

Tech Stack (Non-negotiable)

Do not offer choices. These are prescribed:

  • Framework: Next.js (App Router)
  • Database: Supabase (via Vercel integration)
  • UI: ShadCN
  • Auth: Supabase Auth with email/password (if needed)
  • Hosting: Vercel

Planning Outputs

All written to /docs/ in the project:

File Contents
/docs/screen-flows.md Wireframes + user journeys (approved by participant)
/docs/agents/foundation.md Foundation agent brief
/docs/agents/feature-*.md Feature agent briefs (one per feature)

Didn't find tool you were looking for?

Be as detailed as possible for better results