# Design Pattern Learner Skill

**Auto-triggers when user wants to study/learn from external design sources**

## Quick Start

```bash
# Analyze a design source
python3 scripts/analyze.py "https://gist.github.com/user/id"

# Generate implementation
python3 scripts/generate.py --source ~/.claude/skills/design-pattern-learner/data/patterns/[file] --framework tailwind
```

## What It Does

1. **Fetches** designs from gists, repos, or webpages
2. **Analyzes** design tokens (colors, typography, spacing, effects)
3. **Extracts** components (buttons, cards, modals, etc.)
4. **Generates** implementation code (Tailwind, React, Vue)

## Auto-Trigger Patterns

- "study design from [URL]"
- "learn from [source]"
- "implement this design"
- "copy style from"
- "replicate this pattern"

## Integration

Works alongside:
- `ui-ux-pro-max` - Design guidance
- `codebase-indexer` - Find files
- `always-use-superpowers` - Auto-dispatch