react-component Skill
Create accessible, well-typed React components following best practices.
Overview#
The react-component skill generates production-ready React components with TypeScript, accessibility features, and optional testing.
Usage#
Use the react-component skill to create a Button component with variants and sizes.
Parameters#
| Parameter | Type | Required | Description |
|---|---|---|---|
name | string | Yes | Component name (PascalCase) |
props | array | No | Component props |
variants | array | No | Component variants |
includeTests | boolean | No | Generate test file |
styling | string | No | Styling approach: tailwind, css-modules, styled |
Generated Output#
Basic Component#
Use the react-component skill with:
- name: "Button"
- props: ["children", "onClick", "disabled"]
- styling: "tailwind"
Result:
Loading code block...
Component with Variants#
Use the react-component skill with:
- name: "Button"
- variants: ["primary", "secondary", "ghost", "danger"]
- includeTests: true
Result:
Loading code block...
Test file:
Loading code block...
Features Included#
- TypeScript types
- forwardRef for ref forwarding
- Accessibility (button type, focus styles)
- CVA for variants (when applicable)
- Loading state
- Disabled state
- Test file (optional)
Customization#
Loading code block...
Related Skills#
- test-suite - Component testing
- validation - Form validation