139 lines
3.3 KiB
Markdown
139 lines
3.3 KiB
Markdown
---
|
||
description: Create a new React component with TypeScript and modern best practices
|
||
model: claude-sonnet-4-5
|
||
---
|
||
|
||
Generate a new React component following 2025 best practices.
|
||
|
||
## Component Specification
|
||
|
||
$ARGUMENTS
|
||
|
||
## Modern React + TypeScript Standards
|
||
|
||
### 1. **Function Components Only**
|
||
- Use function components (not class components)
|
||
- React 19 patterns
|
||
- Server Components where appropriate (Next.js)
|
||
|
||
### 2. **TypeScript Best Practices**
|
||
- Strict typing (`strict: true`)
|
||
- Interface for props
|
||
- Proper TypeScript utility types (ComponentProps, ReactNode, etc.)
|
||
- NO `any` types
|
||
- Explicit return types for complex components
|
||
|
||
### 3. **Component Patterns**
|
||
|
||
**Client Components** (interactive, use hooks)
|
||
```typescript
|
||
'use client'
|
||
import { useState } from 'react'
|
||
|
||
interface Props {
|
||
// typed props
|
||
}
|
||
|
||
export function Component({ }: Props) {
|
||
// implementation
|
||
}
|
||
```
|
||
|
||
**Server Components** (default in Next.js App Router)
|
||
```typescript
|
||
interface Props {
|
||
// typed props
|
||
}
|
||
|
||
export async function Component({ }: Props) {
|
||
// can fetch data directly
|
||
}
|
||
```
|
||
|
||
### 4. **State Management**
|
||
- `useState` for local state
|
||
- `useReducer` for complex state
|
||
- Zustand for global state
|
||
- React Context for theme/auth
|
||
|
||
### 5. **Performance**
|
||
- Lazy loading with `React.lazy()`
|
||
- Code splitting
|
||
- `use memo()` for expensive computations
|
||
- `useCallback()` for callback functions
|
||
|
||
### 6. **Styling Approach** (choose based on project)
|
||
- **Tailwind CSS** - Utility-first (recommended)
|
||
- **CSS Modules** - Scoped styles
|
||
- **Styled Components** - CSS-in-JS
|
||
|
||
## What to Generate
|
||
|
||
1. **Component File** - Main component with TypeScript
|
||
2. **Props Interface** - Fully typed props
|
||
3. **Styles** - Tailwind classes or CSS module
|
||
4. **Example Usage** - How to import and use
|
||
5. **Storybook Story** (optional) - Component documentation
|
||
|
||
## Code Quality Standards
|
||
|
||
**Structure**
|
||
- Feature-based folder organization
|
||
- Co-locate related files
|
||
- Barrel exports (index.ts)
|
||
- Clear file naming conventions
|
||
|
||
**TypeScript**
|
||
- Explicit prop types via interface
|
||
- Proper generics where needed
|
||
- Utility types (Pick, Omit, Partial)
|
||
- Discriminated unions for variants
|
||
|
||
**Props**
|
||
- Required vs optional props
|
||
- Default values where appropriate
|
||
- Destructure in function signature
|
||
- Props spread carefully
|
||
|
||
**Accessibility**
|
||
- Semantic HTML
|
||
- ARIA labels where needed
|
||
- Keyboard navigation
|
||
- Screen reader friendly
|
||
|
||
**Best Practices**
|
||
- Single Responsibility Principle
|
||
- Composition over inheritance
|
||
- Extract complex logic to hooks
|
||
- Keep components small (<200 lines)
|
||
|
||
## Component Types to Consider
|
||
|
||
**Presentational Components**
|
||
- Pure UI rendering
|
||
- No business logic
|
||
- Receive data via props
|
||
- Easy to test
|
||
|
||
**Container Components**
|
||
- Data fetching
|
||
- Business logic
|
||
- State management
|
||
- Pass data to presentational components
|
||
|
||
**Compound Components**
|
||
- Related components working together
|
||
- Shared context
|
||
- Flexible API
|
||
- Example: `<Select><Select.Trigger/><Select.Content/></Select>`
|
||
|
||
## React 19 Features to Use
|
||
|
||
- **use()** API for reading promises/context
|
||
- **useActionState()** for form state
|
||
- **useFormStatus()** for form pending state
|
||
- **useOptimistic()** for optimistic UI updates
|
||
- **Server Actions** for mutations
|
||
|
||
Generate production-ready, accessible, and performant React components following Next.js 15 and React 19 patterns.
|