React Component Creation

About

Provides a comprehensive guide for creating React components within the `squareone` ecosystem. It standardizes the entire development lifecycle, from initial file structure scaffolding with the `file-factory` CLI to final implementation. The skill details specific best practices for TypeScript (preferring `type` over `interface`), styling with CSS Modules and design tokens, creating comprehensive Storybook stories for documentation, and writing unit tests with `vitest`. It also covers advanced patterns like compound components and `forwardRef`, ensuring all new UI is consistent, maintainable, and accessible.

Key Features

• 2 GitHub stars
• 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.