component-patterns

Define React component structures, Ark UI wrappers, and TypeScript variant types.

Updated Dec 25, 2025

Search Tags:#typescript #react #storybook #forwardRef #component-patterns #ark-ui

Ready to run

npx skills add https://github.com/Tasty-Maker-Studio/Discourser-Design-System --skill component-patterns-tasty-maker-studio

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: component-patterns
Source: https://github.com/Tasty-Maker-Studio/Discourser-Design-System/tree/main/.claude/skills/component-patterns
Command: npx skills add https://github.com/Tasty-Maker-Studio/Discourser-Design-System --skill component-patterns-tasty-maker-studio

SYSTEM DOCUMENTATION & REQUIREMENTS

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.