React Component Creation
Guides the creation of standardized, production-ready React components using best practices for TypeScript, CSS Modules, Storybook, and testing.
The source repository doesn't declare a license. Check its terms before reusing the code.
Key features
- Establishes TypeScript patterns, including preferring `type` over `interface` and avoiding `React.FC`.
- Guides unit testing with `vitest` and `@testing-library/react`.
- Defines styling conventions using CSS Modules with a design token system.
- Provides a structured approach for writing Storybook stories with controls and interaction tests.
- Includes advanced patterns like Compound Components and `forwardRef` for complex UI.
Use cases
- Building a new React component from scratch.
- Documenting component variations and states using Storybook.
- Refactoring an existing component to align with project standards.
FAQ
What key capabilities does this skill provide?
It provides expert guidance on TypeScript (preferring `type` and avoiding `React.FC`), styling with CSS Modules, creating interactive stories with Storybook, unit testing with `@testing-library/react`, and implementing advanced patterns like Compound Components and `forwardRef`.
How does this skill improve my development workflow?
It improves your workflow by providing clear, consistent patterns, which reduces boilerplate and decision fatigue. By integrating with tools like Storybook for visual testing and vitest for unit tests, it helps you build more reliable and maintainable UI components faster.
What does the React Component Creation skill do?
This skill provides a comprehensive guide for building standardized, production-ready React components. It enforces best practices for file structure, TypeScript patterns, styling with CSS Modules and design tokens, Storybook integration, and unit testing with vitest.
When should I use this skill?
Use this skill whenever you are creating a new React component from scratch. It's your go-to reference for setting up the correct file structure, implementing styling, writing Storybook stories for UI documentation, and adding robust unit tests.
Related skills
Next.js React Implementation
Generates production-ready Next.js/React components with TypeScript, Tailwind CSS, Vitest tests, and Storybook stories from design specifications.
Design Tools212 ptsComponent Layer
Standardizes React component development by enforcing shadcn/ui patterns and structured directory organization for scalable frontend architectures.
Design Tools12 ptsReact Form Handling
Simplifies the creation of robust React forms using performant patterns, schema-based validation, and reusable UI components.
Design Tools12 pts