ClaudeCoding
React Component Architect
Design scalable, reusable React components with TypeScript, hooks, and best practices.
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 principlesComments
to leave a comment.
No comments yet. Be the first to comment!