What problem does it solve? Frontend codebases often drift into inconsistent patterns: scattered API calls, loading spinners causing layout shift, prop drilling, and untyped data. This Skill enforces a single, strict architectural doctrine so every component, feature, and route follows the same production-grade conventions. ## Core Features & Use Cases - Suspense-First Data Fetching: Mandates useSuspenseQuery with TanStack Query, cache-first strategies, and forbids isLoading early returns. - 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 design should proceed, be 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 wrapped in SuspenseLoader, and MUI v7 styling with typed props. ## Quick Start Ask the assistant to create a new React feature or component following the frontend-dev-guidelines standards, for example a lazy-loaded user list page with Suspense data fetching.
