ai-integration
Load PROACTIVELY when task involves AI, LLM, or machine learning features. Use when user says \"add AI chat\", \"implement streaming responses\", \"build a RAG pipeline\", \"add embeddings\", or \"integrate OpenAI\". Covers chat interfaces, streaming with Vercel AI SDK, retrieval-augmented generation, vector search, embeddings pipelines, tool/function calling, and provider abstraction for OpenAI, Anthropic, and local models.
api-design
Load PROACTIVELY when task involves building or modifying API endpoints. Use when user says \"build an API\", \"add an endpoint\", \"create a REST route\", \"set up GraphQL\", or \"add tRPC procedures\". Covers route design and file organization, request validation with Zod, response formatting, error handling patterns, middleware composition, authentication guards, rate limiting, pagination, and API documentation generation.
authentication
Load PROACTIVELY when task involves user identity, login, or access control. Use when user says \"add authentication\", \"set up login\", \"add OAuth\", \"protect these routes\", \"implement RBAC\", or \"add sign-up\". Covers session management, JWT tokens, OAuth2 flows, password reset, email verification, protected route middleware, role-based access control, and security hardening (CSRF, rate limiting, token rotation).
component-architecture
Load PROACTIVELY when task involves designing or building UI components. Use when user says \"build a component\", \"create a form\", \"add a modal\", \"design the layout\", or \"refactor this page\". Covers component composition and hierarchy, prop design and typing, render optimization (memo, useMemo, useCallback), compound component patterns, controlled vs uncontrolled forms, file organization, and accessibility for React, Vue, and Svelte.
database-layer
Load PROACTIVELY when task involves database design, schemas, or data access. Use when user says \"set up the database\", \"create a schema\", \"add a migration\", \"write a query\", or \"set up Prisma\". Covers schema design and normalization, ORM setup (Prisma, Drizzle), migration workflows, connection pooling, query optimization, indexing strategies, seeding, and transaction patterns for PostgreSQL, MySQL, SQLite, and MongoDB.
deployment
Load PROACTIVELY when task involves deploying, hosting, or CI/CD pipelines. Use when user says \"deploy this\", \"set up CI/CD\", \"add Docker\", \"configure Vercel\", or \"set up monitoring\". Covers platform-specific deployment (Vercel, Railway, Fly.io, AWS), Dockerfile creation, environment variable management, CI/CD pipeline configuration (GitHub Actions), preview deployments, health checks, rollback strategies, and production monitoring setup.
payment-integration
Load PROACTIVELY when task involves payments, billing, or subscriptions. Use when user says \"add payments\", \"integrate Stripe\", \"set up subscriptions\", \"add a checkout flow\", or \"handle billing webhooks\". Covers Stripe, LemonSqueezy, and Paddle integration, checkout sessions, subscription lifecycle management, webhook verification and handling, customer portal, metered billing, refunds, and PCI compliance considerations.
service-integration
Load PROACTIVELY when task involves connecting external services or third-party APIs. Use when user says \"add email sending\", \"integrate a CMS\", \"set up file uploads\", \"add analytics\", or \"connect to S3\". Covers email services (Resend, SendGrid), CMS platforms (Sanity, Contentful, Payload), file upload solutions (UploadThing, Cloudinary, S3), analytics integration, webhook handling, error recovery, and credential management.
state-management
Load PROACTIVELY when task involves application state, data fetching, or form handling. Use when user says \"manage state\", \"add data fetching\", \"set up Zustand\", \"handle form validation\", or \"add React Query\". Covers server state (TanStack Query with caching, optimistic updates), client state (Zustand stores), form state (React Hook Form with Zod validation), URL state (search params, routing), and choosing between state solutions.
styling-system
Load PROACTIVELY when task involves CSS architecture, theming, or visual design systems. Use when user says \"set up Tailwind\", \"add dark mode\", \"create a design system\", \"make it responsive\", or \"configure the theme\". Covers Tailwind configuration and custom plugins, design token systems, responsive breakpoint strategies, dark mode implementation, component variant patterns (CVA/class-variance-authority), CSS-in-JS alternatives, and animation patterns.
testing-strategy
Load PROACTIVELY when task involves writing tests, improving coverage, or test infrastructure. Use when user says \"add tests\", \"write unit tests\", \"set up E2E testing\", \"improve coverage\", or \"add mocks\". Covers Vitest/Jest unit tests, React Testing Library component tests, Playwright E2E tests, MSW API mocking, test organization and naming, fixture management, coverage targets and thresholds, snapshot testing, and CI integration.