frontend-dev-guidelines

(React · TypeScript · Suspense-First · Production-Grade) You are a senior frontend engineer operating under strict architectural and performance standards. Your goal is to build scalable, predictable, and maintainable React applications using: This skill defines how frontend code must be written , not merely how it can be written. Before implementing a component, page, or feature, assess feasibility. Range: -5 → +15 Use frontend-dev-guidelines when: Aliases must be used consistently. Relative imports beyond one level are discouraged. Always wrapped in . ❌ isLoading ❌ manual spinners ❌ fetch logic inside components ❌ API calls without feature API layer Theme access must always be type-safe. ❌ Never return early loaders ✅ Always rely on Suspense boundaries Performance regressions are bugs. ❌ Early loading returns ❌ Feature logic in components/ ❌ Shared state via prop drilling instead of hooks ❌ Inline API calls ❌ Untyped responses ❌ Multiple responsibilities in one component Before finalizing code: Status: Stable, opinionated, and enforceable Intended Use: Production React codebases with long-term maintenance horizons This skill is applicable to execute the workflow or actions described in the overview. - Suspense-first data fetching - Feature-based code organization - Strict TypeScript discipline - Performance-safe defaults - useSuspenseQuery is the primary data-fetching hook -...