claude-predev-setup

Use when building backend APIs, REST/GraphQL endpoints, or setting up database schemas. Triggers: "build the backend", "create API", "set up database", "write endpoints", backend work for a full-stack app. Every endpoint MUST interact with the database. Produce an API summary for frontend handoff.

Use when running automated exploratory E2E testing on a web application. Triggers: "e2e loop", "exploratory testing", "test this app", "find bugs", "run e2e tests against the app". Claude becomes the tester: navigates with Playwright, clicks through workflows, documents issues.

Use when building frontend that consumes backend APIs or connects to real data sources. Triggers: "wire up the frontend", "connect to API", "fetch data from backend", "form submission", building UI that needs real data flow. NEVER use mock/hardcoded data. Every component connects to a real endpoint.

Use when debugging a failing test, unexpected behavior, or production error. Triggers: "why is this failing", "debug", "investigate", "root cause", stack traces, error messages. NEVER skip to a fix without completing the investigation phases.

Use when perfecting a frontend design through iterative visual evaluation. Triggers: "make it look perfect", "10/10 design", "iterate on the design", "polish the UI". Loops: screenshot → evaluate → fix → re-screenshot until design scores 10/10.

Use when implementing a new feature that requires multiple files and careful planning. Triggers: "implement feature", "build this feature", "add this functionality", multi-file changes. 7-phase structured development with exploration and design before any code.

Use when building web UI components, pages, or applications. Triggers: building frontend, creating components, designing UI, web application work. Creates distinctive, bold designs that avoid AI-slop aesthetics.

Use when creating a new Claude Code agent for the project. Triggers: "create agent", "new agent", "add agent", "I need an agent for". Includes on-demand catalog awareness for common agent types.

Use when creating a new Claude Code skill for the project. Triggers: "create skill", "new skill", "add skill", "write a skill". Guides through CSO-optimized skill creation with TDD methodology.

Use when bootstrapping a new project with Claude Code infrastructure. Triggers: "setup project", "initialize", "new project", "bootstrap", "configure claude". Interviews the user, then generates CLAUDE.md, customizes rules, agents, hooks, and settings.

Use when implementing new features, fixing bugs, or when the user asks for test-driven development. Triggers: "TDD", "test first", "red green refactor", "write tests", "test-driven". NEVER write production code without a failing test first.

Use when writing E2E tests for a web application using Playwright. Triggers: "E2E tests", "end-to-end", "Playwright tests", "browser testing", "integration tests for the web app". Reconnaissance-first: map all pages before writing any tests.