Skip to content
skillcellar
All playbooks

Next.js app

From a first idea to a launched Next.js app: spec, design, test-first build, browser checks and SEO.

5 stages · 15 steps · 12 skills

Run it in Claude Code

  1. Install its skills

    One prompt installs the 12 skills it uses and skips the ones you already have.

  2. Add the playbook skill

    Save it as .claude/skills/playbook-nextjs-app/SKILL.md in your project. It runs the stages in order, asks before each new stage, and keeps its progress in .playbooks/nextjs-app.md.

  3. Add it to CLAUDE.md, if you like

    A short block listing each stage and its skills, so every session knows the order.

Then ask Claude Code:

claude

> Let's start a new Next.js app for booking tennis courts

Stages

  1. Discovery

    Know what you are building, and for whom, before any code exists.

    1. Grill Me

      Questions the idea until every decision the spec depends on has an answer.

      grill me
    2. Spec Kit

      Sets up spec-driven development for Claude Code in the project.

      When: The project has no spec-kit setup yet.

      specify init --here --integration claude
    3. Spec Kit

      Writes down what to build, from the answers you just gave.

      /speckit-specify

    Done when: A written spec you have read, with every open decision answered.

  2. Design

    Settle the look and the main screens before building them.

    1. Impeccable

      Writes PRODUCT.md and DESIGN.md, which every later design command reads.

      /impeccable init
    2. design-taste-frontendOptional

      Designs public pages that do not look like a template.

      When: The app has a landing or marketing page.

      /design-taste-frontend <brief>
    3. UI/UX Pro MaxOptional

      Finds palettes, type pairings and styles to choose from.

      When: You want options for colors and fonts before deciding.

      python3 scripts/search.py "<query>"

    Done when: DESIGN.md exists and you have approved the main screens.

  3. Build

    Build the features in the spec, test first, following React and Next.js practice.

    1. Superpowers

      Turns the spec and design into a plan of small tasks, each with its checks.

      /superpowers:writing-plans
    2. Superpowers

      Builds the plan task by task, test first, with a review after each task.

      /superpowers:subagent-driven-development
    3. Vercel Agent Skills

      Checks each page against Vercel's React and Next.js performance rules.

      Help me optimize this Next.js page
    4. Next.js DevTools MCP

      Reads the build, runtime and type errors straight from the dev server.

      When: The dev server is running, on Next.js 16 or later.

      Next Devtools, what errors are in my Next.js application?

    Done when: Every feature in the spec works locally and the tests pass.

  4. Verify

    See the app work in a real browser, and check that destructive git and file commands are blocked.

    1. Dev Browser

      Walks through the main flows in a real browser, as a visitor would.

      dev-browser --headless
    2. Chrome DevTools MCP

      Records how the main page loads and points at what slows it down.

      performance_start_trace / performance_stop_trace
    3. CC Safety Net

      Confirms the hook that blocks destructive git and file commands is active.

      npx -y cc-safety-net doctor

    Done when: The main flows pass in a browser with no console errors, and you have seen the result.

  5. Launch

    Make the public pages easy to find and good at turning visitors into sign-ups.

    1. Marketing Skills

      Finds technical SEO problems while they are still cheap to fix, before launch.

      /seo-audit
    2. Marketing SkillsOptional

      Reviews the pages and forms for what keeps visitors from signing up.

      /cro

    Done when: The audit's critical issues are fixed and you agree the pages are ready.