React Component Development
Create a professional, reusable React component with TypeScript.
Prompt template
Create a professional React component for [COMPONENT DESCRIPTION]. **Technical Requirements:** - React version: [VERSION, e.g., 18+] - TypeScript: Yes, with strict types - Styling: [CSS Modules/Tailwind/Styled Components/etc.] - State management: [useState/useReducer/Zustand/etc.] **Component Specification:** 1. **Props Interface:** Fully typed props with optional and required fields 2. **Internal Logic:** Extract custom hooks where useful 3. **Error Handling:** Error boundaries and graceful degradation 4. **Accessibility:** ARIA attributes, keyboard navigation, screen reader support 5. **Performance:** React.memo, useMemo, useCallback where needed 6. **Responsive Design:** Mobile-first approach **Deliver:** - The main component with TypeScript - Associated custom hooks - Unit tests with React Testing Library - Storybook story (optional) - Usage example **Behavior:** [DESCRIPTION OF DESIRED BEHAVIOR]
Replace placeholders in [square brackets]: [COMPONENT DESCRIPTION][VERSION, e.g., 18+][CSS Modules/Tailwind/Styled Components/etc.][useState/useReducer/Zustand/etc.][DESCRIPTION OF DESIRED BEHAVIOR]
How to use this template
Copy the prompt, replace the placeholders in square brackets with your details and paste it into the AI assistant of your choice. The more precise your details, the better the result.
Tips for better results
- Describe the desired behavior and interactions in detail
- Specify the styling framework and state management approach
- Ask for Storybook stories for documentation
- Request accessibility tests with jest-axe
Suitable open models
The selection names current open models as a starting point for your own tests. It is not a measurement for this template.
Keywords: #react #component #typescript #frontend