# Component Library Design

> When building reusable UI component systems that scale across teams and products

- Skill: `lev-os/component-library-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add lev-os/component-library-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lev-os/component-library-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: lev-os (https://skillmd.com/u/lev-os)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/lev-os/component-library-design

---


# Component Library Design

## Overview
The practice of creating systematic, reusable UI component libraries that serve as the building blocks for consistent, scalable user interfaces across products and teams. Component libraries codify design principles, ensure visual consistency, accelerate development, and reduce design debt.

## Core Principles
- **Atomic Design**: Components hierarchically organized (atoms → molecules → organisms)
- **Composability**: Combine simple components into complex UIs
- **Design Tokens**: Abstract design decisions into reusable variables
- **Accessibility**: WCAG compliance built-in by default
- **Documentation**: Living examples and usage guidelines

## Execution Steps

### 1. Audit Existing Patterns
Inventory all UI patterns, identify inconsistencies, prioritize most-used components.

### 2. Define Design System Principles
Establish brand, spacing, motion, and voice & tone guidelines.

### 3. Build Core Components (80/20)
Start with buttons, inputs, typography, layout, and feedback components.

### 4. Create Design Tokens
Extract hardcoded values to semantic variables for theming and consistency.

### 5. Document Component APIs
Define props, variants, composition patterns, accessibility, and examples.

### 6. Establish Contribution Guidelines
When to create new components, approval process, versioning, deprecation.

### 7. Measure Adoption
Track coverage, consistency, velocity, and satisfaction metrics.

## Scoring (36/50)
- **Practitioner Weight** (7/10): Industry standard practice
- **Clarity** (8/10): Clear methodology
- **Proven ROI** (8/10): Measurable improvements
- **Novelty** (4/10): Established practice
- **Applicability** (9/10): Universal UI development

## Sources
- Brad Frost: Atomic Design
- Material Design Guidelines
- Design Systems Handbook
- Storybook documentation
- Nathan Curtis: Design Systems articles