Frontend Tools

React Server Components architecture patterns for Next.js 14+ with server-first development. PROACTIVELY activate for: (1) deciding Server vs Client Component boundaries, (2) composing components with 'use client', (3) managing interactivity patterns. Triggers: "server component", "client component", "'use client'"

Tailwind CSS utility-first styling with mobile-first responsive design and CSS variables. PROACTIVELY activate for: (1) implementing mobile-first responsive layouts, (2) using semantic CSS variables for theming, (3) creating component variants with cva. Triggers: "tailwind", "responsive", "dark mode"

End-to-end type safety for Firestore using Zod schemas with withConverter API. PROACTIVELY activate for: (1) implementing Firestore converters with Zod validation, (2) ensuring runtime validation at application boundaries, (3) evolving schemas safely. Triggers: "zod converter", "firestore type safety", "withConverter"

React Hook Form v7 with zodResolver integration for type-safe validated forms. PROACTIVELY activate for: (1) creating forms with useForm and zodResolver, (2) implementing field registration with spread syntax, (3) handling form state and errors. Triggers: "react hook form", "useForm", "zodResolver"

shadcn/ui CLI usage, component installation, and composition patterns with file ownership philosophy. PROACTIVELY activate for: (1) adding shadcn/ui components via CLI, (2) composing multi-part components, (3) customizing component variants. Triggers: "shadcn", "add component", "components.json"

Data fetching patterns for Next.js 14+ App Router including async Server Components and Server Actions. PROACTIVELY activate for: (1) fetching data in Server Components, (2) implementing Server Actions for mutations, (3) configuring caching and revalidation. Triggers: "fetch data", "server action", "revalidate"

Zod v4 schema definition patterns with the Type Inference Chain for absolute type safety. PROACTIVELY activate for: (1) defining Zod schemas as single source of truth, (2) using z.infer for type generation, (3) implementing safe parsing with safeParse. Triggers: "zod", "schema", "z.infer"

Zustand v5 store creation with curried function syntax and TypeScript typing patterns. PROACTIVELY activate for: (1) creating typed Zustand stores with v5 syntax, (2) integrating persist and devtools middleware, (3) using useShallow for performance. Triggers: "zustand", "create store", "global state"

Firebase Authentication implementation patterns including sign-in flows, OAuth, and session management. PROACTIVELY activate for: (1) implementing sign-in/sign-up flows, (2) setting up OAuth providers like Google, (3) creating protected routes with middleware. Triggers: "auth", "sign-in", "oauth"

Firestore data modeling best practices including subcollections, document structure, and atomic operations. PROACTIVELY activate for: (1) designing Firestore collection structures, (2) choosing between subcollections vs root collections, (3) implementing transactions vs batched writes. Triggers: "subcollection", "data model", "firestore"

React Server Components vs Client Components decision framework with composition patterns. PROACTIVELY activate for: (1) deciding when to use 'use client' directive, (2) implementing island architecture with small client leaves, (3) passing server data to client components. Triggers: "server component", "client component", "use client"

TypeScript patterns for type-safe API contracts with strict typing and Zod integration. PROACTIVELY activate for: (1) designing type-safe API interfaces, (2) creating Zod schemas for validation, (3) implementing generic response wrappers. Triggers: "api design", "type safety", "zod validation"

Firestore Security Rules patterns for user-scoped access, RBAC, and field validation. PROACTIVELY activate for: (1) implementing user-scoped data access rules, (2) setting up role-based access with custom claims, (3) validating fields and enforcing immutability. Triggers: "security rules", "rbac", "firestore rules"

Framer Motion animations including motion components, gestures, entrance/exit, and scroll triggers. PROACTIVELY activate for: (1) adding hover and tap animations, (2) implementing entrance/exit transitions with AnimatePresence, (3) creating scroll-triggered animations. Triggers: "animate", "framer motion", "whileHover"

Server-side Firebase Admin SDK patterns for Next.js 14+ with secure initialization and token verification. PROACTIVELY activate for: (1) setting up Admin SDK with server-only protection, (2) implementing custom claims for RBAC, (3) verifying tokens in middleware. Triggers: "admin sdk", "server-only", "custom claims"

Slice pattern for organizing large Zustand stores with separation of concerns. PROACTIVELY activate for: (1) splitting large stores into feature slices, (2) composing multiple slices into a root store, (3) implementing cross-slice actions. Triggers: "zustand slice", "large store", "modular state"