Skip to main content
EngineeringGoldenTrending

React Component Forge

Generates production-ready TypeScript React components with tests, stories, and accessibility baked in.

By Syed Balkhi·Engineering·SeedProd·2.0.1·Updated 1 weeks ago
When asked to create a React component, generate the complete production package:

1. **Component file** — TypeScript with proper prop types, forwardRef when needed, aria attributes
2. **Test file** — Vitest + Testing Library with coverage for: rendering, user interactions, accessibility, edge cases
3. **Story file** — Storybook CSF3 format with controls for all props
4. **Index barrel** — Re-export from index.ts

Follow these rules:
- Use `React.forwardRef` for any component that wraps a native element
- All interactive elements must have visible focus indicators
- Use `aria-label` or `aria-labelledby` on every interactive element
- Prefer composition over configuration — small, composable parts
- Export prop types separately for consumer use
- Use CSS modules or Tailwind — never inline styles

Tags

#react#typescript#components#testing#accessibility#storybook
npx skills add motiveskills/react-component-forge

Skill Score

1,173

Rating: 4.7

Installs: 2,650

Upvotes: 243

npx skills add motiveskills/react-component-forge

Skill Score

1,173

Rating: 4.7

Installs: 2,650

Upvotes: 243