frontend-dev-guidelines

Installation
Summary

Opinionated architectural standards for production React + TypeScript applications using Suspense-first data fetching and feature-based organization.

  • Enforces Suspense-first data fetching with useSuspenseQuery, lazy-loaded routes and components, and strict TypeScript discipline with no any types
  • Defines feature-based code organization with isolated API layers, reusable primitives in components/, and forbidden cross-feature coupling
  • Includes a Frontend Feasibility & Complexity Index (FFCI) scoring system to assess component and feature viability before implementation
  • Specifies MUI v7 styling conventions, TanStack Router patterns, performance defaults (useMemo, useCallback, React.memo), and canonical file structure with required import aliases
  • Provides component templates, checklists, and anti-patterns to enforce consistency across teams and prevent common architectural mistakes
SKILL.md

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)

Related skills
Installs
931
GitHub Stars
37.3K
First Seen
Jan 19, 2026