AI Prompts Library

You are a senior React developer specializing in TypeScript and modern React patterns. Generate a production-ready React component based on the following specifications.

**Component Request:**
- Component name: [COMPONENT_NAME]
- Purpose: [WHAT_IT_DOES]
- Props needed: [LIST_PROPS]
- State requirements: [DESCRIBE_STATE]
- API calls: [DESCRIBE_API_INTERACTIONS]

**Requirements for the generated component:**

1. **TypeScript**: Define a clear Props interface. Use proper generic types. No `any` types. Export the Props type for consumers.
2. **Component Structure**:
   - Use functional component with named export
   - Destructure props with defaults where appropriate
   - Order: type imports, component imports, hook imports, then utility imports
   - Internal order: hooks, derived state, handlers, effects, render
3. **Hooks Usage**:
   - useMemo for expensive computations
   - useCallback for handler functions passed to children
   - Custom hooks for reusable logic (extract if > 10 lines of hook logic)
4. **Error Handling**:
   - Error boundary wrapper for async operations
   - Loading, error, and empty states
   - Graceful fallbacks
5. **Accessibility**:
   - Proper ARIA labels and roles
   - Keyboard navigation support
   - Focus management
   - Screen reader announcements for dynamic content
6. **Styling**: Use Tailwind CSS utility classes. Support className prop for customization. Use cn() or clsx() for conditional classes.
7. **Testing**: Generate a companion .test.tsx file with:
   - Render tests for all states (loading, error, success, empty)
   - User interaction tests
   - Accessibility tests using testing-library
   - Mock API calls properly

**Output**: The complete component file, types file (if complex), test file, and a Storybook story file.

Website accessibility audit (WCAG 2.1 AA):

**Perceivable**:
- [ ] Alt text for images
- [ ] Captions for videos
- [ ] Color contrast ≥4.5:1 (text), ≥3:1 (UI)
- [ ] Don't rely on color alone
- [ ] Responsive text sizing

**Operable**:
- [ ] Keyboard navigation (no mouse required)
- [ ] Skip to main content link
- [ ] Focus indicators visible
- [ ] No keyboard traps
- [ ] Sufficient time for tasks
- [ ] Pause/stop animations

**Understandable**:
- [ ] lang attribute on html
- [ ] Consistent navigation
- [ ] Clear error messages
- [ ] Form labels & instructions
- [ ] Predictable behavior

**Robust**:
- [ ] Valid HTML
- [ ] ARIA landmarks
- [ ] Semantic HTML (header, nav, main, footer)
- [ ] ARIA labels where needed
- [ ] Screen reader tested

**Forms**:
- [ ] Label associated with input
- [ ] Required fields marked
- [ ] Error identification & suggestions
- [ ] Fieldset & legend for groups

**Interactive Elements**:
- [ ] Button vs link (semantic)
- [ ] Tab order logical
- [ ] Modal focus management
- [ ] Disabled state communicated

**Testing Tools**:
- [ ] axe DevTools
- [ ] WAVE
- [ ] Lighthouse
- [ ] Screen reader (NVDA/JAWS/VoiceOver)
- [ ] Keyboard only navigation

**Success Criteria**: All Level A & AA criteria met