React Component Generator

IntermediadevelopmentContexto mínimo: 32K

Generates production-ready React components with TypeScript, proper props interfaces, accessibility attributes, responsive design, and test files. Follows modern patterns including Server Components, Suspense boundaries, and composition over inheritance.

reactcomponentsfrontendtypescriptuiaccessibility

Casos de uso

  • Building UI components from design specs or screenshots
  • Creating form components with validation
  • Generating data table components with sorting and filtering
  • Building accessible modal and dialog components
  • Creating reusable layout components

Prompt de ejemplo

Generate a React component with the following requirements:

Component: [name and purpose]
Props:
- [list expected props]

Requirements:
- TypeScript with strict props interface
- WCAG 2.1 AA accessible (keyboard nav, ARIA, focus management)
- Responsive (mobile-first)
- Use [Tailwind CSS / CSS Modules / styled-components]
- Include loading and error states
- Export as named export

Also generate:
- Unit test file (Vitest + Testing Library)
- Storybook story with variants

Modelos recomendados

claude-opus-4-6claude-sonnet-4-6gpt-5gemini-2-5-pro

Herramientas compatibles

claude-codecursorgithub-copilotkiroany

Modalidades

Entrada: text, image
→
Salida: code

Skills relacionadas

accessibility-reviewunit-test-generationtypescript-type-generator

Autor

OpenModels Community

@openmodelsrun