Tailwindcss Development

Tailwind CSS advanced component patterns with CVA (class-variance-authority) and variant management. PROACTIVELY activate for: (1) building reusable component variants with CVA, (2) compound variants for complex states, (3) tailwind-merge for safe class composition, (4) clsx/cn utility for conditional classes, (5) Headless UI / Radix UI primitives styled with Tailwind, (6) shadcn/ui patterns, (7) component slot patterns (asChild), (8) polymorphic components, (9) prop-driven design tokens. Provides: CVA setup recipes, cn utility implementation, compound-variant patterns, shadcn/ui-style component templates, and asChild slot examples.

Guides creation and modification of domain feature systems organized under a systems/ directory. Covers directory layout, API service layer patterns, TanStack Query hooks (queries, mutations, optimistic updates), React context and XState store conventions, hook organization, and public API barrel exports. Use when adding a new domain system, extending an existing one, or fixing bugs in a system-layer codebase. Don't use for generic React component work, backend API implementation, or codebases not organized around a systems/ domain pattern.

Brad Frost's Atomic Design methodology for UI component hierarchies: atoms (indivisible elements), molecules (small groups of atoms), organisms (complex sections of molecules), and templates (page layouts). Enforces bottom-up composition (never skip levels), presentational components (data via props, events via callbacks, no data fetching), design tokens for all visual properties, and composition over inheritance. Use when building user interfaces, creating component libraries, organizing frontend code, designing form systems, or structuring any UI. Triggers on: "build a component", "component hierarchy", "design tokens", "presentational components", "composition over inheritance", "React/Vue/SwiftUI components", "atomic design". Applies to any UI framework.

Generate dynamic social preview images using Next.js file conventions and the next/og library. Server-rendered JSX images cached at build time.

Accessibility patterns for WCAG 2.2 compliance, keyboard focus management, React Aria component patterns, cognitive inclusion, native HTML-first philosophy, and user preference honoring. Use when implementing screen reader support, keyboard navigation, ARIA patterns, focus traps, accessible component libraries, reduced motion, or cognitive accessibility.

Effect-TS library usage in TypeScript — Effect.gen generators, Schema.Struct/Schema.Class definitions, Layer/Context.Tag/Service patterns, Effect.pipe pipelines, Data.TaggedError/Data.Class error types, Ref/Queue/PubSub/Deferred concurrency primitives, Match module, Config providers, Scope/Exit/Cause/Runtime patterns, or any code using Effect's typed error channel (E parameter). Trigger when writing, reviewing, debugging, or refactoring TypeScript code that uses Effect — when you see imports from `effect`, `effect/*`, or any `@effect/*` scoped package (schema, platform, sql, opentelemetry, cli, cluster, rpc, vitest). Also trigger when the user asks about Effect patterns, migration from Promises/fp-ts/neverthrow to Effect, or how to structure an Effect application. Do NOT trigger for React's useEffect, Redux side effects, or general English usage of "effect" unless the context clearly involves the Effect-TS library.