component-patterns

What problem does it solve?

This Skill clarifies when and how to design React components, wrap Ark UI primitives, and define TypeScript types for variants to ensure consistent, maintainable UI code across a design system.

Core Features & Use Cases

• Standard Component Structure: Guidelines for organizing components into src/components/, including TSX, stories, and index.ts barrels.
• Component Template: Practical example of a Button.tsx wrapper around Ark UI with forwardRef and className composition.
• Barrel Export Pattern: Encourages central exports for easy imports across the codebase.
• Ark UI Component Patterns: Demonstrates Simple components (Button) and Compound components (Dialog) with usage patterns.
• TypeScript Patterns: Shows how to define variant props, polymorphic as props, and ref forwarding for flexible components.

Quick Start

Create a new Button component at src/components/Button/Button.tsx that forwards a ref to Ark's Button, applies your button recipe class, and export it via a barrel in src/components/Button/index.ts. Add a Storybook story to document variants.