hexagonal-react-patternslisted

# React Hexagonal Architecture Patterns Build a React/TypeScript frontend following hexagonal architecture, SOLID, and KISS. ## Use this skill when - Implementing or refactoring a React app with hexagonal architecture - Scaffolding project structure (domain / application / infrastructure) - Defining domain ports, entities, and adapters - Applying SOLID/KISS rules to React component design ## Do not use this skill when - The task is purely async/concurrency → use `async-react-patterns` - The task is generic UI/design polish → use OpenDesign MCP - The task is React performance tuning → use `performance-audit` ## 🔍 Pre-flight (mandatory) Before writing any code, **read the target repository's `AGENTS.md` first** — it overrides the generic stack below on conflict (eslint+prettier vs Biome, vitest vs Bun test, design tokens vs raw hex). Do not assume the generic stack applies. ## ♻️ Reuse-first (mandatory) Before creating a new component, **scout what already exists** and reuse/extend it. - Browse `src/application/components/ui/` (Card, Badge, Skeleton, Button, …) and existing feature folders before introducing any new styled element. - If an existing primitive *almost* fits, **extend it** (add a prop, a variant) rather than duplicating it with a custom span/div. - Styling variants belong in CVA files under `lib/ui/*-variants.ts` — **never** define a local `Record<Variant, string>` map inside a component when a `*-variants.ts` file already exists; add the variant there inste