# Component Library Patterns

Applies a component library's design tokens and patterns when building UI.

- Repository: https://github.com/ChrisWiles/claude-code-showcase (6078 stars)
- Category: Design
- License: see repository
- Last updated: 2026-01-06
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add ChrisWiles/claude-code-showcase --skill core-components -g -a claude-code -y`
Codex: `npx skills add ChrisWiles/claude-code-showcase --skill core-components -g -a codex -y`
Cursor: `npx skills add ChrisWiles/claude-code-showcase --skill core-components -g -a cursor -y`
Gemini CLI: `npx skills add ChrisWiles/claude-code-showcase --skill core-components -g -a gemini-cli -y`

## Description

Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.

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

# Core Components

## Design System Overview

Use components from your core library instead of raw platform components. This ensures consistent styling and behavior.

## Design Tokens

**NEVER hard-code values. Always use design tokens.**

### Spacing Tokens

```tsx
// CORRECT - Use tokens
<Box padding="$4" marginBottom="$2" />

// WRONG - Hard-coded values
<Box padding={16} marginBottom={8} />
```

| Token | Value |
|-------|-------|
| `$1` | 4px |
| `$2` | 8px |
| `$3` | 12px |
| `$4` | 16px |
| `$6` | 24px |
| `$8` | 32px |

### Color Tokens

```tsx
// CORRECT - Semantic tokens
<Text color="$textPrimary" />
<Box backgroundColor="$backgroundSecondary" />

// WRONG - Hard-coded colors
<Text color="#333333" />
<Box backgroundColor="rgb(245, 245, 245)" />
```

| Semantic Token | Use For |
|----------------|---------|
| `$textPrimary` | Main text |
| `$textSecondary` | Supporting text |
| `$textTertiary` | Disabled/hint text |
| `$primary500` | Brand/accent color |
| `$statusError` | Error states |
| `$statusSuccess` | Success states |

### Typography Tokens

```tsx
<Text fontSize="$lg" fontWeight="$semibold" />
```

| Token | Size |
|-------|------|
| `$xs` | 12px |
| `$sm` | 14px |
| `$md` | 16px |
| `$lg` | 18px |
| `$xl` | 20px |
| `$2xl` | 24px |

## Core Components

### Box

Base layout component with token support:

```tsx
<Box
  padding="$4"
  backgroundColor="$backgroundPrimary"
  borderRadius="$lg"
>
  {children}
</Box>
```

### HStack / VStack

Horizontal and vertical flex layouts:

```tsx
<HStack gap="$3" alignItems="center">
  <Icon name="user" />
  <Text>Username</Text>
</HStack>

<VStack gap="$4" padding="$4">
  <Heading>Title</Heading>
  <Text>Content</Text>
</VStack>
```

### Text

Typography with token support:

```tsx
<Text
  fontSize="$lg"
  fontWeight="$semibold"
  color="$textPrimary"
>
  Hello World
</Text>
```

### Button

Interactive button with variants:

The rest: https://github.com/ChrisWiles/claude-code-showcase/blob/HEAD/.claude/skills/core-components/SKILL.md