What problem does it solve? Frontend codebases often drift into inconsistent patterns: scattered API calls, loading spinners causing layout shift, untyped responses, and tangled component responsibilities. This Skill enforces a single opinionated standard for writing React and TypeScript code so every component, feature, and route follows the same production-grade architecture. ## Core Features & Use Cases - Suspense-First Data Fetching: Mandates useSuspenseQuery with SuspenseLoader boundaries, eliminating isLoading conditionals and early-return spinners. - Feature-Based Organization: Defines a 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 decide whether a design should proceed, be simplified, or be 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 snackbar-based error feedback. ## Quick Start Ask the assistant to create a new React feature or component following the frontend-dev-guidelines, for example: build a user list page with search, lazy loading, and Suspense-based data fetching.
