Frontend Development Guidelines
Purpose
Comprehensive guide for modern React development, emphasizing Suspense-based data fetching, lazy loading, proper file organization, and performance optimization.
When to Use This Skill
- •Creating new components or pages
- •Building new features
- •Fetching data with TanStack Query
- •Setting up routing with TanStack Router
- •Styling components with MUI v7
- •Performance optimization
- •Organizing frontend code
- •TypeScript best practices
Quick Actions
📋 Checklists
- •New Component Checklist - Use when creating a new UI component.
- •New Feature Checklist - Use when starting a new feature domain.
⚡ Cheatsheets
- •Component Templates - Copy-paste modern component structure.
- •Imports & Aliases - Common imports and path aliases.
- •File Structure Reference - Where to put files.
📚 Topic Guides
| Type | Resource |
|---|---|
| Patterns | Component Patterns |
| Data | Data Fetching (Suspense) |
| Structure | File Organization |
| UI | Styling Guide (MUI) |
| Routing | Routing Guide |
| UX | Loading & Errors |
| Perf | Performance Optimization |
| Types | TypeScript Standards |
| Misc | Common Patterns |
| Full Code | Complete Examples |
Core Principles
- •Lazy Load Everything Heavy: Routes, DataGrid, charts, editors
- •Suspense for Loading: Use SuspenseLoader, not early returns
- •useSuspenseQuery: Primary data fetching pattern for new code
- •Features are Organized: api/, components/, hooks/, helpers/ subdirs
- •Styles Based on Size: <100 inline, >100 separate
- •Import Aliases: Use @/, ~types, ~components, ~features
- •No Early Returns: Prevents layout shift
- •useMuiSnackbar: For all user notifications
Related Skills
- •error-tracking: Error tracking with Sentry
- •backend-dev-guidelines: Backend API patterns