design-system-context

# Design System Context Management

Master the art of managing design system context for LLM-driven UI development. This skill covers strategies for loading design tokens, persisting decisions, and optimizing context window usage.

---

## When to Use This Skill

- Loading design tokens into LLM context efficiently
- Persisting design decisions across sessions
- Optimizing context window for large design systems
- Managing multiple design system variants
- Building context-aware UI generation pipelines
- Maintaining consistency across agent conversations

---

## The Context Challenge

Design systems contain vast amounts of information:
- **Design tokens**: Colors, spacing, typography, shadows, etc.
- **Component specs**: 50-200+ components with variants
- **Usage guidelines**: Do's, don'ts, examples
- **Brand guidelines**: Voice, imagery, personality

**The Problem**: Context windows are finite. Loading everything wastes tokens and degrades performance.

**The Solution**: Strategic context management - load what's needed, when it's needed.

---

## Context Architecture

### Layered Context Model

Organize design system context in layers of specificity:

```
Layer 4: Task-Specific Context (highest priority)
         ↑
Layer 3: Component Context
         ↑
Layer 2: Design Token Context
         ↑
Layer 1: Brand/System Context (foundation)
```

**Implementation**:

```python
class DesignSystemContext:
    """
    Layered context management for design systems.
    """

    def __init__(self, system_name: str):
        self.layers = {
            "brand": self.load_brand_context(),      # ~500 tokens
            "tokens": self.load_design_tokens(),     # ~2000 tokens
            "components": {},                         # On-demand
            "task": {},                               # Per-request
        }

    def load_brand_context(self) -> dict:
        """
        Layer 1: Foundational brand context.
        Always loaded, rarely changes.
        """
        retur