What problem does it solve? Frontend codebases often drift into inconsistent patterns—scattered API calls, loading spinners everywhere, prop drilling, and untyped data. This Skill enforces a single, strict set of architectural rules so every component, feature, and route in a React + TypeScript application follows the same production-grade conventions. ## Core Features & Use Cases - Suspense-First Data Fetching: Mandates useSuspenseQuery with TanStack Query, forbidding isLoading conditionals and early-return spinners to prevent layout shift. - Feature-Based Architecture: Defines a canonical directory structure (features/{name}/api|components|hooks|helpers|types) with import aliases and public index.ts exports. - FFCI Feasibility Scoring: Provides a Frontend Feasibility & Complexity Index to evaluate whether a component or feature should be built, split, or redesigned before implementation. - Use Case: When adding a new user profile page, the Skill guides you to create a lazy-loaded route with TanStack Router, 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 AI to create a new React component or feature following the frontend-dev-guidelines standards, for example: "Build a user list page with search following these frontend guidelines."
