Generates consistent UI components, layouts, and design tokens following a design system. Enforces spacing, color, typography, and accessibility standards across React/TypeScript projects. Use when creating new UI components, building page layouts, choosing colors or typography, setting up design tokens, or reviewing UI code for design consistency. Covers 8pt spacing grid, Tailwind CSS token usage, shadcn/ui primitives, WCAG 2.1 AA compliance, responsive breakpoints, semantic HTML structure, and TypeScript component interfaces. Does NOT cover backend implementation (use python-backend-expert), testing (use react-testing-patterns), or deployment (use deployment-pipeline).
API contract design conventions for FastAPI projects with Pydantic v2. Use during the design phase when planning new API endpoints, defining request/response contracts, designing pagination or filtering, standardizing error responses, or planning API versioning. Covers RESTful naming, HTTP method semantics, Pydantic v2 schema naming conventions (XxxCreate/XxxUpdate/XxxResponse), cursor-based pagination, standard error format, and OpenAPI documentation. Does NOT cover implementation details (use python-backend-expert) or system-level architecture (use system-architecture).
Deployment procedures and CI/CD pipeline configuration for Python/React projects. Use when deploying to staging or production, creating CI/CD pipelines with GitHub Actions, troubleshooting deployment failures, or planning rollbacks. Covers pipeline stages (build/test/staging/production), environment promotion, pre-deployment validation, health checks, canary deployment, rollback procedures, and GitHub Actions workflows. Does NOT cover Docker image building (use docker-best-practices) or incident response (use incident-response).
Production incident response procedures for Python/React applications. Use when responding to production outages, investigating error spikes, diagnosing performance degradation, or conducting post-mortems. Covers severity classification (SEV1-SEV4), incident commander role, communication templates, diagnostic commands for FastAPI/ PostgreSQL/Redis, rollback procedures, and blameless post-mortem process. Does NOT cover monitoring setup (use monitoring-setup) or deployment procedures (use deployment-pipeline).
Application monitoring and observability setup for Python/React projects. Use when configuring logging, metrics collection, health checks, alerting rules, or dashboard creation. Covers structured logging with structlog, Prometheus metrics for FastAPI, health check endpoints, alert threshold design, Grafana dashboard patterns, error tracking with Sentry, and uptime monitoring. Does NOT cover incident response procedures (use incident-response) or deployment (use deployment-pipeline).
Comprehensive pre-merge validation checklist for Python/React pull requests. Use before approving or merging any PR. Covers code quality checks (linting, formatting, type checking), test coverage requirements, documentation updates, migration safety, API contract compatibility, accessibility compliance, bundle size impact, and deployment readiness. Provides a systematic checklist that ensures nothing is missed before merge. Does NOT cover security review depth (use code-review-security).
System architecture guidance for Python/React full-stack projects. Use during the design phase when making architectural decisions — component boundaries, service layer design, data flow patterns, database schema planning, and technology trade-off analysis. Covers FastAPI layer architecture (Routes/Services/Repositories/Models), React component hierarchy, state management, and cross-cutting concerns (auth, errors, logging). Produces architecture documents and ADRs. Does NOT cover implementation (use python-backend-expert or react-frontend-expert) or API contract design (use api-design-patterns).
Project planning and feature breakdown for Python/React full-stack projects. Use during the planning phase when breaking down feature requests, user stories, or product requirements into implementation plans. Guides identification of affected files and modules, defines acceptance criteria, assesses risks, and estimates overall complexity. Produces module maps, risk assessments, and acceptance criteria. Does NOT cover architecture decisions (use system-architecture), implementation (use python-backend-expert or react-frontend-expert), or atomic task decomposition (use task-decomposition).