component-creation

What problem does it solve?

Creating new React components that adhere to best practices, maintain consistency, and are easily testable can be challenging. This skill provides a comprehensive guide to component creation, covering everything from file structure and TypeScript patterns to styling, testing, and Storybook integration.

Core Features & Use Cases

• Standardized Component Structure: Defines a clear file structure for components, including .tsx, .module.css, .stories.tsx, and .test.tsx files.
• TypeScript & Styling Best Practices: Enforces type over interface, avoids React.FC, and mandates CSS Modules with full design token integration for consistent styling.
• Testing & Documentation: Guides on writing robust vitest tests and comprehensive Storybook stories, including interactive story tests.
• Use Case: When starting a new UI feature, use this skill to create a new component, ensuring it follows the monorepo's TypeScript and styling conventions, has proper tests, and is documented in Storybook.

Quick Start

Create a new React component named MyButton with basic styling and a Storybook entry. Create MyButton.tsx, MyButton.module.css, MyButton.stories.tsx, MyButton.test.tsx in a new 'MyButton' directory.