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