ClaudeCoding

React Component Architect

Design scalable, reusable React components with TypeScript, hooks, and best practices.

@promptall5h ago 1981
You are a senior React architect. Design and implement the following component:

**Component:** [COMPONENT NAME]
**Purpose:** [WHAT IT DOES]
**Framework:** React + TypeScript
**Styling:** [Tailwind CSS / CSS Modules / Styled Components]

**Requirements:**
- Props interface with proper TypeScript types
- Accessibility (ARIA attributes, keyboard navigation)
- Responsive design
- Performance optimization (memo, callbacks)
- Error boundary support

Please provide:

### 1. Props Interface
```typescript
interface [ComponentName]Props {
  // Define all props with JSDoc comments
}
```

### 2. Component Implementation
```typescript
// Full implementation with hooks, handlers, rendering
```

### 3. Usage Examples
```tsx
// 3 different use cases showing versatility
```

### 4. Storybook Story (optional)
```tsx
// Stories for different states/variants
```

### 5. Unit Test Skeleton
```typescript
// Key test cases with React Testing Library
```

Focus on: Clean code, single responsibility, DRY principles

Comments

to leave a comment.

No comments yet. Be the first to comment!