Master modern React development with production-grade patterns for Suspense architecture, Type-Safe components, MUI v7 styling system, and TanStack Router.
React 19
TypeScript
MUI v7
TanStack Query
Production Ready
About This Skill
Get instant access to a library of best practices, templates, and architectural decisions that define modern React development.
Start Building in Seconds
1Copy the skill to your .agent/skills directory
2Ask 'Create a new feature for user management'
3Follow the generated checklist for components and API
4Implement using the provided type-safe templates
Core Capabilities
Suspense-First Architecture
Eliminate loading spinners and layout shifts with proper React Suspense boundaries for a smoother user experience.
Type-Safe Development
Enforce strict TypeScript patterns and no-any policies to catch errors at compile time, not runtime.
Modern Styling System
Leverage MUI v7 efficiently with performance-optimized styling patterns and responsive design best practices.
Feature-Based Architecture
Scale your application effortlessly with a domain-driven file structure that keeps code organized and maintainable.
SKILL.md
---
name: frontend-expert
description: Use when creating React/TypeScript components, pages, or features. For modern patterns including Suspense, useSuspenseQuery, lazy loading, MUI v7 styling, TanStack Router, and performance optimization.
---
# Frontend Expert
Modern React/TypeScript development patterns for high-performance applications.
## 🎯 Overview
This skill provides comprehensive guidelines for building production-grade React applications with:
- **Suspense-first architecture** - No loading spinners, no early returns
- **Type-safe patterns** - Strict TypeScript, no `any` types
- **Performance by default** - Lazy loading, memoization, cache strategies
- **Organized structure** - Feature-based directory organization
## 📋 Quick Start: Component Checklist
```markdown
- [ ] Use `React.FC<Props>` pattern with TypeScript
- [ ] Lazy load if heavy component: `React.lazy(() => import())`
- [ ] Wrap in `<SuspenseLoader>` for loading states
- [ ] Use `useSuspenseQuery` for data fetching
- [ ] Import aliases: `@/`, `~types`, `~components`, `~features`
- [ ] Styles: Inline if <100 lines, separate file if >100 lines
- [ ] Use `useCallback` for event handlers passed to children
- [ ] Default export at bottom
- [ ] No early returns with loading spinners
- [ ] Use `useMuiSnackbar` for user notifications
```
## 📋 Quick Start: Feature Checklist
```markdown
- [ ] Create `features/{feature-name}/` directory
- [ ] Create subdirectories: `api/`, `components/`, `hooks/`, `helpers/`, `types/`
- [ ] Create API service file: `api/{feature}Api.ts`
- [ ] Set up TypeScript types in `types/`
- [ ] Create route in `routes/{feature-name}/index.tsx`
- [ ] Lazy load feature components
- [ ] Use Suspense boundaries
- [ ] Export public API from feature `index.ts`
```
---
## 🧩 Import Aliases
| Alias | Resolves To | Example |
|-------|-------------|---------|
| `@/` | `src/` | `import { apiClient } from '@/lib/apiClient'` |
| `~types` | `src/types` | `import type { User } from '~typ
Frequently Asked Questions
FAQ
Why use Suspense-first architecture?
Suspense prevents 'popcorn UI' loading glitches and eliminates the need for manual loading state handling in every component, leading to a smoother user experience and cleaner code.
How does this differ from standard React practices?
We enforce strict strict-mode TypeScript, mandatory lazy loading for heavy assets, and feature-slice architecture, which are often overlooked in standard tutorials but essential for scaling apps.
Is this compatible with Next.js?
Yes, while the routing patterns are optimized for TanStack Router (SPA), the component, styling, and data fetching patterns apply perfectly to Next.js App Router client components.
Discussion
Discussion
0 comments
U
On This Page
Trigger Phrases
Use these phrases to activate this skill in your AI coding assistant:
Create a new componentSet up data fetchingAdd a new featureRefactor frontend codeOptimize react performance
Frontend Expert - Modern React & TypeScript Patterns
