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.
"React Component Generator Prompt" delivers consistent results because it tells the AI exactly what role to play, what context matters, and what format the output should take. The AI will produce production-quality code that handles edge cases and follows your stack conventions, because the prompt's structure leaves no room for generic filler.
These coding tips will help you get stronger results when using "React Component Generator Prompt" and similar prompts in this category.
"React Component Generator Prompt" is particularly useful in these situations. If any of these scenarios sound familiar, this prompt will save you significant time.
When you use "React Component Generator Prompt" with ChatGPT, Claude, or Gemini, here is what to expect in the AI output.
Adapt "React Component Generator Prompt" to your specific situation by modifying these key areas. The more context you add, the better the results.