React Component Generator

СреднийdevelopmentМинимальный контекст: 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

Варианты использования

  • 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

Пример промпта

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

Рекомендуемые модели

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

Совместимые инструменты

claude-codecursorgithub-copilotkiroany

Модальности

Вход: text, image
→
Выход: code

Похожие Skills

accessibility-reviewunit-test-generationtypescript-type-generator

Автор

OpenModels Community

@openmodelsrun