What problem does it solve? Frontend codebases drift into inconsistent patterns—mixed loading states, scattered API calls, and untyped components—that slow development and cause performance regressions. This Skill enforces a single, strict set of architectural rules so every component, feature, and route follows the same production-grade conventions. ## Core Features & Use Cases - Suspense-First Data Fetching: Mandates useSuspenseQuery with SuspenseLoader boundaries, eliminating isLoading conditionals and layout shift. - Feature-Based Architecture: Defines canonical directory structure (api/, components/, hooks/, helpers/, types/) with import aliases and public index exports. - FFCI Feasibility Scoring: Provides a quantitative Frontend Feasibility & Complexity Index to evaluate whether a component should be built, simplified, or redesigned. - Use Case: When asked to build a new user profile page, the Skill produces a lazy-loaded route, a feature folder with an isolated API layer, a React.FC component using useSuspenseQuery, MUI v7 styling, and strict TypeScript—passing the operator validation checklist. ## Quick Start Use the frontend-dev-guidelines skill to create a new feature component for displaying a list of projects with data fetching and routing.
