React Frontend Development Guidelines

Problem

Production React codebases often drift in three ways: data fetching is fragmented by isLoading flags and manual spinner components, domain logic leaks into components/, and performance defaults depend on individual habits. The code runs, but boundaries, typing, and reuse strategy become inconsistent, and refactoring cost accumulates over time.

How It Works

frontend-dev-guidelines constrains frontend implementation with checkable engineering rules:

• Suspense-first: useSuspenseQuery is the primary data-fetching pattern; avoid early returns, manual loading states, and in-component fetch logic.
• Feature-first structure: domain logic lives in features/, reusable primitives live in components/, and each feature owns its API file.
• Strict TypeScript: explicit return types, import type, typed responses, and no any.
• Performance defaults: use useMemo for expensive derivations, useCallback for passed-in handlers, React.memo for heavy components, and clean up effects to avoid leaks.

It also provides an FFCI score, component checklist, and anti-pattern list to judge whether a proposed implementation fits the current architecture, performance goals, and maintenance cost before coding starts.

Boundaries

The skill targets production React projects using TypeScript, Suspense, TanStack Router, and MUI. If the project has not adopted a Suspense-based data model, or the main goal is rapid prototyping, adopting it may add migration cost; start with routing, data fetching, and feature boundaries, then expand to stricter style and performance rules.