App Setup Flow

Setup flow

Intake

Turn a vague app idea into a locked project brief.

What you need before starting

  • Know the working app idea and what the setup flow should produce.
  • Keep route scope limited to the required setup pages for v1.

Project brief

Fill these fields to lock context for commands and prompts in later phases.

Project basics

Lock the name, repository, folder, and project summary first.

Pages and usage

Capture the main user action, secondary actions, and route summary.

Use one action per line for readable prompt output.
Use one route per line to keep the setup flow explicit.

Visual direction and UX rules

Capture the visual tone and the required interaction rules.

List one rule per line when possible.

Shared components, UI states, and done state

Capture what the agent must build and how completion is judged.

Live preview

Updates as you type; used by generated outputs on later pages.

Current project input

Driven by the shared project context used across the flow.

Project name
App Setup Flow
Repo name
app-setup-flow
Folder name
app-setup-flow
One-line description
A guided setup tool for starting Next.js web app projects with exact steps, prompts, and done states.
Target audience
The product creator setting up new web app foundations.
Primary goal
Move from app idea to an agent-ready Next.js backbone.
Primary visitor action
Walk the flow phase by phase and copy the required commands and prompts.

Secondary actions

  • Refine the project brief
  • Review generated outputs
  • Verify the backbone locally

Routes and pages

  • /
  • /setup/intake
  • /setup/scaffold
  • /setup/docs
  • /setup/files
  • /setup/backbone
  • /setup/verify

Visual direction

  • Warm off-white background, white and cool-tinted cards, anthracite text, light blue accents, subtle borders, subtle shadows.

UX rules

  • Mobile first
  • Visible input labels
  • Copy buttons must be obvious
  • Current phase stays visible
  • Every setup page includes previous and next navigation

Constraints

  • Next.js App Router
  • TypeScript
  • Tailwind CSS
  • Vercel
  • No auth in v1
  • No backend in v1
  • No analytics in v1
  • No CMS in v1

Required shared components

  • Header
  • Footer
  • Container
  • Section
  • Card
  • Button
  • Input
  • Textarea
  • Phase progress nav
  • Code block with copy button
  • Prompt block with copy button
  • Checklist

Required UI states

  • Default
  • Hover
  • Focus
  • Active phase
  • Empty context notice
  • Checklist complete state

Definition of done

  • All main routes exist
  • Global layout exists
  • Shared UI primitives exist
  • Commands and prompts are easy to copy on mobile
  • The foundation can be refined without redesigning the structure

Before scaffold

Check these off when the brief is ready to continue.

Intake completion

0/3 done

Flow

Continue to Scaffold