What problem does it solve?
This Skill provides frontend development guidelines for React/TypeScript applications to standardize patterns and best practices.
Core Features & Use Cases
- Suspense-based data loading patterns: Standardizes usage of Suspense and useSuspenseQuery to simplify UI state and improve user experience.
- Lazy loading & code-splitting: Recommendations for lazy loading heavy components and route-based code splitting.
- File organization with features directory: Structured layout under features/ for domain-specific code and scalable architecture.
- Styling with MUI v7 and sx prop: Consistent styling approach using sx with theme-aware enhancements.
- Routing with TanStack Router: Folder-based routes with lazy-loaded pages and breadcrumb integration.
- Performance optimization & TypeScript discipline: Guidelines to minimize re-renders, leverage memoization, and enforce strict TS practices.
Quick Start
To apply this guide, start by creating or updating a component or page following these patterns: define the component with React.FC and TypeScript, lazy-load heavy parts, wrap with a Suspense boundary, and fetch data with useSuspenseQuery.
