frontend

ACTIVATE when creating or modifying frontend features in projects with domain/infrastructure layered architecture. ACTIVATE for 'frontend architecture', 'domain layer', 'hexagonal frontend', 'features/ folder', 'repository interface', 'mapper'. Covers: features/<feature>/domain + infrastructure structure, strict dependency direction (domain never imports infrastructure), domain models/repositories/services/referentials, API repositories, mappers, hooks as orchestrators. DO NOT use for: projects without this architecture (ask user first), general React patterns (see frontend-component-patterns).

ACTIVATE when creating or refactoring React components, splitting large components, extracting hooks, or deciding Container vs Presentation. ACTIVATE for 'component split', 'Container/Presentation', 'extract hook', 'god component', 'prop drilling'. Covers: Container vs Presentation criteria, when to extract custom hooks (3+ related states), when to split markup (150+ lines), when to move logic to domain service, form section props convention, spotlight/opacity pattern. DO NOT use for: projects not using Container/Presentation (ask first), general React hooks API.