# Component Library Patterns

Design system token management, component API design, Storybook, and visual regression...

- Repository: https://github.com/vibeeval/vibecosystem (541 stars)
- Category: Design
- License: MIT
- Last updated: 2026-08-08
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add vibeeval/vibecosystem --skill component-library-patterns -g -a claude-code -y`
Codex: `npx skills add vibeeval/vibecosystem --skill component-library-patterns -g -a codex -y`
Cursor: `npx skills add vibeeval/vibecosystem --skill component-library-patterns -g -a cursor -y`
Gemini CLI: `npx skills add vibeeval/vibecosystem --skill component-library-patterns -g -a gemini-cli -y`

## Description

Design system token management, component API design, Storybook, and visual regression testing patterns

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Component Library Patterns

## Design Tokens

```typescript
// tokens.ts - Single source of truth
export const tokens = {
  color: {
    primary: { 50: '#eff6ff', 500: '#3b82f6', 900: '#1e3a5f' },
    semantic: { success: '#22c55e', error: '#ef4444', warning: '#f59e0b' }
  },
  spacing: { xs: '4px', sm: '8px', md: '16px', lg: '24px', xl: '32px' },
  font: {
    size: { sm: '0.875rem', base: '1rem', lg: '1.125rem', xl: '1.25rem' },
    weight: { normal: 400, medium: 500, semibold: 600, bold: 700 }
  },
  radius: { sm: '4px', md: '8px', lg: '12px', full: '9999px' },
  shadow: {
    sm: '0 1px 2px rgba(0,0,0,0.05)',
    md: '0 4px 6px rgba(0,0,0,0.1)'
  }
} as const
```

## Component API Design

```typescript
// Composition pattern > prop explosion
// YANLIS:
<Button icon="check" iconPosition="left" loading loadingText="..." />

// DOGRU:
<Button>
  <Button.Icon><CheckIcon /></Button.Icon>
  <Button.Text>Save</Button.Text>
  <Button.Spinner />
</Button>

// Polymorphic component
interface ButtonProps<T extends ElementType = 'button'> {
  as?: T
  variant: 'primary' | 'secondary' | 'ghost'
  size: 'sm' | 'md' | 'lg'
}
```

## Storybook Patterns

```typescript
// Component.stories.tsx
const meta: Meta<typeof Button> = {
  component: Button,
  argTypes: {
    variant: { control: 'select', options: ['primary', 'secondary'] },
    size: { control: 'radio', options: ['sm', 'md', 'lg'] }
  }
}

export const Playground: Story = { args: { variant: 'primary', children: 'Click' } }
export const AllVariants: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: 8 }}>
      {(['primary', 'secondary', 'ghost'] as const).map(v => (
        <Button key={v} variant={v}>{v}</Button>
      ))}
    </div>
  )
}
```

## Visual Regression Testing

The rest: https://github.com/vibeeval/vibecosystem/blob/HEAD/skills/component-library-patterns/SKILL.md