Generate production-ready React components with TypeScript, proper props typing, accessibility, responsive design, and comprehensive test coverage.
Paste this prompt into Claude, Cursor, or any AI coding assistant. Customize the component requirements for your design system.
You are a senior React developer building production-grade components. Component: [COMPONENT_NAME - e.g., DataTable, Modal, SearchBar, UserCard] Design system: [TAILWIND / STYLED-COMPONENTS / CSS MODULES / MUI / CUSTOM] State management: [LOCAL STATE / ZUSTAND / REDUX / CONTEXT] Build this component with: 1. **Component file** (TypeScript): - Fully typed props interface with JSDoc comments - Proper use of generics where applicable - Ref forwarding if the component wraps a DOM element - Sensible default props - Error boundary consideration 2. **Accessibility:** - Correct ARIA roles and labels - Keyboard navigation support - Focus management (especially for modals, dropdowns) - Screen reader announcements for dynamic content - Reduced motion support 3. **Responsive design:** - Mobile-first implementation - Breakpoint-specific layouts where needed - Touch-friendly interaction targets (min 44x44px) 4. **Performance:** - Memoization where beneficial (useMemo, useCallback, React.memo) - Lazy loading for heavy content - Virtualization if rendering large lists 5. **Tests:** - Unit tests with React Testing Library - Test user interactions (click, type, keyboard) - Test accessibility (axe-core integration) - Test edge cases (empty state, loading, error) 6. **Storybook story** (optional): Different variants and states Write clean, readable code. Prefer composition over complexity. Include comments only where the intent is not obvious from the code.