frontend-dev-guidelines

# Frontend Development 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: * Suspense-first data fetching * Feature-based code organization * Strict TypeScript discipline * Performance-safe defaults This skill defines **how frontend code must be written**, not merely how it *can* be written. --- ## 1. Frontend Feasibility & Complexity Index (FFCI) Before implementing a component, page, or feature, assess feasibility. ### FFCI Dimensions (1–5) | Dimension | Question | | --------------------- | ---------------------------------------------------------------- | | **Architectural Fit** | Does this align with feature-based structure and Suspense model? | | **Complexity Load** | How complex is state, data, and interaction logic? | | **Performance Risk** | Does it introduce rendering, bundle, or CLS risk? | | **Reusability** | Can this be reused without modification? | | **Maintenance Cost** | How hard will this be to reason about in 6 months? | ### Score Formula ``` FFCI = (Architectural Fit + Reusability + Performance) − (Complexity + Maintenance Cost) ``` **Range:** `-5 → +15` ### Interpretation | FFCI | Me...