fsd-frontend-architecturelisted

# FSD Frontend Architecture ## Purpose Keep frontend design implementation structurally clean and scalable. Default to strict Feature-Sliced Design for React application code. ## When To Use Use this skill without waiting for explicit invocation when the task involves: - Deciding where frontend code belongs in `app`, `pages`, `widgets`, `features`, `entities`, or `shared`. - Moving generated Figma, shadcn/ui, ReactBits, or custom UI code into production architecture. - Adding public APIs, fixing imports, preventing cross-slice internals, or reducing duplicated UI structure. - Separating reusable primitives from business features and page composition. - Keeping a design implementation scalable instead of page-local and ad hoc. Use it together with `design-system-implementation` whenever token or shared UI placement is involved. ## Layers Use these layers only: - `app`: routing, providers, root layouts, global styles, app-level initialization. - `pages`: route-level screens and page-specific composition. - `widgets`: large self-contained UI blocks or page sections that combine features/entities/shared. - `features`: user actions that provide business value. - `entities`: domain entities and their UI/model/api where appropriate. - `shared`: reusable UI primitives, assets, tokens, config, API clients, libs without business logic. Do not use the deprecated `processes` layer. Although the official FSD docs still list it, this project treats it as deprecated and routes its