🚢 launch-stackwright

The fastest way to get started with Stackwright — launch a new project with the otter raft ready to build.

Quick Start

npx launch-stackwright my-awesome-site --otter-raft
cd my-awesome-site
pnpm dev

💡 Tip: The --otter-raft flag sets up everything including AI agents and installs all dependencies in one go. Prefer manual control? Just run without it: npx launch-stackwright my-site, then pnpm install separately.

What You Get

When you run launch-stackwright, you get:

• ✅ A fully configured Next.js + Stackwright project
• ✅ Theme configuration (stackwright.yml)
• ✅ Example pages in YAML
• ✅ The Otter Raft 🦦🦦🦦🦦 — AI agents ready to build your site

Using the Otter Raft

After launching your project, invoke the Foreman Otter to orchestrate your entire site build:

code-puppy invoke stackwright-foreman-otter

Then say: "Build me a [law firm / wellness startup / SaaS marketing] website"

The raft includes four specialized otters:

• 🦦🏗️ Foreman Otter — Coordinates the entire build
• 🦦🎨 Brand Otter — Discovers your brand through conversation
• 🦦🌈 Theme Otter — Designs your visual theme
• 🦦📄 Page Otter — Builds your content pages

CLI Options

launch-stackwright [directory] [options]

Options:
  --name <name>       Project name (used in package.json)
  --title <title>     Site title shown in app bar and browser tab
  --theme <themeId>   Theme ID (corporate, creative, minimal, etc.)
  --otter-raft        Setup the otter raft AI agents and install all dependencies
  --force             Launch even if directory is not empty
  --skip-otters       Skip copying otter raft configs
  -y, --yes           Skip all prompts, use defaults
  -V, --version       Output version number
  -h, --help          Display help

Examples

# One-command setup with otter raft (recommended)
npx launch-stackwright my-site --otter-raft

# Interactive mode (default)
npx launch-stackwright my-site

# Specify everything upfront
npx launch-stackwright my-site --name "my-awesome-app" --title "My Awesome Site" --theme corporate

# Quick start with defaults
npx launch-stackwright my-site --yes

# Skip otter setup (just scaffold the project)
npx launch-stackwright my-site --skip-otters

What Gets Created

my-awesome-site/
├── .code-puppy.json           # Code Puppy + MCP auto-config
├── .stackwright/
│   └── otters/                # The otter raft configs
│       ├── stackwright-foreman-otter.json
│       ├── stackwright-brand-otter.json
│       ├── stackwright-theme-otter.json
│       └── stackwright-page-otter.json
├── pages/
│   ├── content.yml            # Home page
│   ├── about/content.yml      # About page
│   ├── [...slug].tsx          # Dynamic page router
│   └── _app.tsx               # Next.js app wrapper
├── stackwright.yml            # Theme configuration
├── next.config.js             # Next.js config
├── package.json               # Dependencies
└── tsconfig.json              # TypeScript config

Next Steps

With --otter-raft

After launching, you're ready to go! Run:

pnpm dev

Without --otter-raft

You'll need to install dependencies first:

pnpm install
pnpm dev

Once the dev server is running, audit all pages for WCAG 2.1 AA accessibility compliance:

stackwright test:a11y

Requires playwright and @axe-core/playwright as dev dependencies (pnpm add -D playwright @axe-core/playwright, then pnpm exec playwright install chromium).

Stackwright CLI

Once inside your project, the stackwright CLI is available:

• stackwright prebuild — Process YAML content and co-located images
• stackwright test:a11y — Run a WCAG 2.1 AA accessibility audit against your running dev server
• stackwright page add <slug> — Create a new page
• stackwright preview [slug] — Render a page to a screenshot

Run stackwright --help to see all available commands.

Prerequisites

• Node.js 18+ and pnpm
• Code Puppy CLI (optional, for otter raft features)

Install Code Puppy:

npm install -g @peraspera/code-puppy

Learn More

• Stackwright Documentation
• Otter Raft Architecture
• Code Puppy

License

MIT