design-system-starter

# Design System Starter

## Overview

This skill provides comprehensive guidance for building robust, scalable design systems that ensure visual consistency, improve development velocity, and create exceptional user experiences.

**When to use this skill:**
- Creating a new design system from scratch
- Evolving or refactoring existing design systems
- Establishing design token standards
- Defining component architecture
- Creating design documentation
- Ensuring accessibility compliance (WCAG 2.1)
- Implementing theming and dark mode

**Bundled Resources:**
- `references/design-tokens.md` - Complete token definitions
- `references/component-patterns.md` - Architecture patterns
- `references/component-examples.md` - Full component implementations
- `references/theming.md` - Theme and dark mode patterns
- `assets/design-tokens-template.json` - W3C design token format
- `assets/component-template.tsx` - React component template

```typescript
// Example: Design token structure
const tokens = {
  colors: {
    primary: { base: "#0066cc", hover: "#0052a3" },
    semantic: { success: "#28a745", error: "#dc3545" }
  },
  spacing: { xs: "4px", sm: "8px", md: "16px", lg: "24px" }
};
```
- `checklists/design-system-checklist.md` - Design system audit checklist

---

## Design System Philosophy

A design system is more than a component library. It includes:

| Layer | Description | Examples |
|-------|-------------|----------|
| **Design Tokens** | Foundational design decisions | Colors, spacing, typography |
| **Components** | Reusable UI building blocks | Button, Input, Card, Modal |
| **Patterns** | Common UX solutions | Forms, Navigation, Layouts |
| **Guidelines** | Rules and best practices | Accessibility, naming, APIs |
| **Documentation** | How to use everything | Storybook, usage examples |

### Core Principles

1. **Consistency Over Creativity** - Predictable patterns reduce cognitive load
2. **Accessible by Default** - WCAG 2.1 Level AA compliance minimum
3. **Scala