What problem does it solve? Frontend codebases drift into inconsistent patterns—scattered API calls, loading spinners causing layout shift, prop drilling, and untyped responses. This Skill gives an AI assistant a strict, enforceable rulebook so every component, feature, and route follows the same production-grade architecture. ## Core Features & Use Cases - Architectural Doctrine Enforcement: Mandates Suspense-first data fetching with useSuspenseQuery, lazy loading of heavy components, feature-based folder organization, and strict TypeScript (no any, explicit return types). - Feasibility Scoring (FFCI): Scores proposed components or features on architectural fit, complexity, performance risk, reusability, and maintenance cost before implementation. - Pattern Libraries: Provides ready-to-use patterns for forms (React Hook Form + Zod), dialogs, DataGrid wrappers, mutations with cache invalidation, optimistic updates, and MUI v7 styling. - Use Case: When asked to build a new user profile page, the assistant creates a feature folder with an isolated API layer, a lazy-loaded route with breadcrumb metadata, a SuspenseLoader boundary, and a typed component using useSuspenseQuery—no early-return spinners or inline fetch calls. ## Quick Start Use the frontend-dev-guidelines skill to scaffold a new React feature with Suspense-based data fetching and feature-based folder structure.
