React Component Architect

Design production-ready React components with TypeScript, accessibility, and performance baked in.

**Component Type:** [FORM / DASHBOARD WIDGET / DATA TABLE / MODAL / NAVIGATION / CARD / LIST / CHART / FILE UPLOAD / SEARCH]
**Framework:** [REACT + TYPESCRIPT / NEXT.JS APP ROUTER / REMIX]

**Required Architecture:**
- TypeScript interfaces for all props with descriptive JSDoc comments
- Default prop values defined via defaultProps or default parameters
- Prop validation strategy (TypeScript types only, or PropTypes runtime validation too)
- Component composition pattern: compound components vs. single component with many props

**Accessibility (WCAG 2.1 AA):**
- ARIA attributes for interactive elements (role, aria-label, aria-expanded, aria-describedby)
- Keyboard navigation support (Tab order, Enter/Space activation, Escape to close)
- Focus management (focus trapping in modals, focus restoration on close)
- Screen reader announcements (live regions for dynamic content)
- Color contrast compliance verification
- Reduced motion media query support

**Performance Optimization:**
- useMemo for expensive calculations with dependency arrays documented
- useCallback for event handlers passed to child components
- React.memo where shallow comparison is sufficient
- Lazy loading and Suspense boundaries for heavy components
- Virtualization for long lists (react-window recommendation)

**Testing Strategy:**
- Unit test outline with RTL (React Testing Library) queries
- Edge case tests (empty state, error state, loading state)
- Accessibility tests (axe-core integration suggestion)

**Deliverables:** Complete component code + storybook documentation format + usage examples.

How to Customize It

Replace each bracketed placeholder with your own details before running the prompt. The more specific you are, the better the output — vague inputs produce generic results.

• [FORM / DASHBOARD WIDGET / DATA TABLE / MODAL / NAVIGATION / CARD / LIST / CHART / FILE UPLOAD / SEARCH]Swap in your form or dashboard widget or data table or modal or navigation or card or list or chart or file upload or search.
• [REACT + TYPESCRIPT / NEXT.JS APP ROUTER / REMIX]Swap in your react + typescript or next.js app router or remix.

When to Use It

• Building design-system components where the prop API will be consumed by many teams and is expensive to change later.
• Speccing a complex interactive component (data table, combobox, file upload) before implementation.
• Auditing an existing component against the checklist: paste it and ask what's missing.

Tips for Better Results

• 1Name your actual stack in [FRAMEWORK] — server components change state placement answers completely.
• 2Push back on prop bloat: ask "which of these props could be composition instead?" — the best component APIs are smaller than the first design.
• 3Ask for Storybook stories or test cases covering each state; unrendered states are unfinished states.