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 logic. This Skill enforces a single opinionated architecture so every component, feature, and route follows the same React, TypeScript, and TanStack Query conventions. ## Core Features & Use Cases - Suspense-First Data Fetching: Mandates useSuspenseQuery with SuspenseLoader boundaries, eliminating isLoading conditionals and early-return spinners that cause layout shift. - Feature-Based Architecture: Defines a canonical directory structure (api/, components/, hooks/, helpers/, types/) with import aliases and public index exports to prevent cross-feature coupling. - FFCI Feasibility Scoring: Provides a quantitative Frontend Feasibility & Complexity Index to decide whether to proceed, simplify, or redesign before writing code. - Use Case: When asked to add 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, and MUI v7 styling that passes the operator validation checklist. ## Quick Start Use the frontend-dev-guidelines skill to create a new React feature component that fetches data with useSuspenseQuery and follows the project's Suspense-first standards.
