What problem does it solve? Frontend codebases tend to accumulate tangled dependencies, fat Zustand stores, and hardcoded mock data as features grow. This Skill enforces a Clean Architecture / Hexagonal structure on the Restly Vite+React UI so the domain stays isolated, the UI stays thin, and infrastructure (mock HTTP, storage, future Tauri desktop) remains swappable. ## Core Features & Use Cases - Layered scaffolding guidance: Defines the target src/ layout (app, pages, features, entities, shared, infrastructure) and the dependency rule pages → features → entities/shared. - Port-based infrastructure: Requires mock or real HTTP/storage adapters to implement interfaces (ports) defined next to features or entities, so mocks can be swapped for real backends later. - Anti-pattern detection: Flags importing pages from features, monolithic Zustand stores mixing HTTP/UI/domain logic, and copy-pasted design HTML without shared UI primitives. - Use Case: When adding a new feature like request history to Restly, use this Skill to decide where types, React components, and mock adapters belong and to record new ports as an ADR. ## Quick Start Ask the AI to scaffold a new Restly feature following clean architecture, placing domain types in entities, React in features, and mock data behind an infrastructure port.
