Next.js recipe

Drop-in setup for a Next.js app. App Router, Tailwind, Vitest assumed. Adjust where your stack diverges.

Starting point: existing Next.js 15+ app, pnpm or npm, Tailwind, App Router.

0. Install the CLI

npm i -g @1agh/maude              # or pnpm add -g

Required, not optional. Skills shell out to maude.

1. Add the marketplace and install plugins

In Claude Code:

/plugin marketplace add 1aGh/maude
/plugin install flow@maude
/plugin install design@maude     # optional, only if you want canvas-first design

2. Init the workspace

In your project root, inside Claude Code:

/flow:init
/design:init                     # skip if you didn't install design

/flow:init auto-detects your stack and writes .ai/workflows.config.json. For a Next.js + Tailwind + Vitest app you'll typically end up with:

{
  "name": "my-app",
  "language": "en",
  "theme": "dark",
  "platforms": ["web-desktop", "web-mobile"],
  "stack": {
    "language": "typescript",
    "framework": "next.js",
    "packageManager": "pnpm",
    "monorepo": false,
    "ci": "github-actions",
    "tests": "vitest",
    "css": "tailwind",
    "router": "next-app"
  },
  "conventions": {
    "branchingModel": "github-flow",
    "commits": "conventional"
  },
  "responsive": {
    "approach": "mobile-first",
    "densityMap": {
      "web-desktop": "command-center",
      "web-mobile": "palm-friendly"
    }
  }
}

3. (Optional) Use the design canvas loop

If you ran /design:init, the .design/ directory is scaffolded. Boot the dev server:

maude design serve --port 4399

Open http://localhost:4399. New canvases are scaffolded via /design:new inside Claude Code:

/design:new HomeHero "marketing hero with feature carousel"

4. Try the loop

/flow:setup-prd          # one-time. draft the PRD
/flow:plan "<feature>"   # per-feature. draft a phase plan
/flow:execute            # implement it
/flow:done               # validate, commit, PR, archive

Gotchas

• App Router only. The plugin's defaults assume next-app router. If you're on Pages Router, set stack.router: "next-pages" and accept that the design-system-guard's a11y checks for <Link> semantics will lean toward App Router idioms.
• Tailwind v4. Works fine. The design plugin's CSS-token system is framework-agnostic. Tailwind tokens live in tailwind.config.ts, design tokens in .design/system/. Keep them in sync via a DDR if you decide to dedupe.
• Vercel deploy. /flow:release walks the releaseGuide runbook, not a Vercel-specific flow. If your release process is just "push to main, Vercel deploys", your runbook can be a single H2 saying so.

Next

• Configure the design plugin
• workflows.config.json reference
• Monorepo recipe if you're in a Turbo / pnpm workspace setup