Build with AI agents

The kit ships tested surfaces for coding agents: six prompt recipes, a shared instructions file, machine-readable docs, and an MCP preset for debugging in a live Chrome.

The recipes

Six tested recipes live in .claude/commands/*.md. Each encodes the kit’s invariants: exact file paths, the store-policy guard, the definition of done.

Recipe	What it does
/add-feature	Scaffold a feature off YourFeature.tsx, including the 2-file paywall edit.
/add-surface	Add a WXT entrypoint following the shadow-UI and module conventions.
/change-paywall-recipe	Switch or mix paywall recipes in paywall.config.ts with the policy guard restated.
/add-permission	Add a chrome.* permission: manifest + module.json rationale + e2e guard, permission before code.
/prep-store-submission	Pre-flight a store submission (zips, remote-code audit, assets, privacy answers), plus the release pipeline and the one-time store and CI setup.
/add-migration	Change a chrome.storage shape with a numbered defineMigrations bump and tests.

In Claude Code they are slash commands; open a session at the repo root and type:

/add-feature summarize-page

In Cursor or any other agent, each file is a self-contained prompt: open .claude/commands/<recipe>.md, paste the body, and replace $ARGUMENTS.

What else ships

• AGENTS.md: the single source of agent instructions: architecture map, verified MV3 pitfalls, paywall policy guard, security invariants, and the Material 3 rules. Cursor, Codex and Copilot read it as is; CLAUDE.md is a symlink to it for Claude Code. The wizard prunes it with the rest of the clone, so it describes only the backend stack and modules you kept, and the recipes the same way: without billing, /change-paywall-recipe and the paywall steps are gone.
• llms.txt + markdown mirror: this site publishes /llms.txt and every page as plain markdown, so agents can fetch any guide by URL.
• Docs bundle: one concatenated markdown file (and a zip of the pages) for pasting the whole docs set into a context window.

Debug with Chrome DevTools MCP

The repo ships a project-scope preset in .mcp.json for Google’s chrome-devtools-mcp server, which lets an agent drive and inspect a live Chrome: read service-worker console output, screenshot the popup, watch the background’s network calls, click through a paywall.

Claude Code detects .mcp.json automatically and asks for approval on first use. To add it explicitly:

claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@1.9.0

Cursor: add the same server in Cursor Settings → MCP:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@1.9.0"]
    }
  }
}

Useful variants (append to args): --isolated for a throwaway profile, or --browser-url http://127.0.0.1:9222 to attach to a Chrome you started yourself with your unpacked extension loaded; pair that with pnpm dev for extension debugging.

Agents don’t get a pass

Everything in AGENTS.md binds agent-written code exactly as it binds yours. The failure modes agents hit most are the MV3 service-worker rules and hand-writing paywall UI instead of using the paywall engine. Review agent diffs against the pitfalls.

Tests an agent writes follow the kit’s rule: they check the fact a message carries (the command, URL, number, or feature it names), not the sentence around it, so rewording your copy never breaks the suite.

The definition of done is the same for agents as for humans:

pnpm format && pnpm typecheck && pnpm lint && pnpm test
pnpm --filter @extensionstart/extension e2e

Don’t let an agent declare victory without the e2e run.