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-forgeSkill Score
1,173
Rating: 4.7
Installs: 2,650
Upvotes: 243
npx skills add motiveskills/react-component-forgeSkill Score
1,173
Rating: 4.7
Installs: 2,650
Upvotes: 243