SuperCharged-Claude-Code-Upgrade/skills/design-pattern-learner/skill.md

---
name: design-pattern-learner
description: "Studies and implements web design patterns from external sources. Fetches gists/repositories, analyzes design systems, extracts reusable patterns, and implements with Tailwind CSS. Auto-triggers on design study requests."
priority: 7
autoTrigger: true
---

# Design Pattern Learner

**Status:** 🟢 **AUTO-ACTIVE** - Automatically triggers when user wants to study/learn from external design sources

**Auto-invoke:** When user asks to study, learn from, copy, or replicate designs from external sources (gists, repositories, URLs)

## What This Skill Does

The Design Pattern Learner skill enables Claude Code to:

1. **Fetch External Design Sources** - Retrieve gists, repositories, or web pages
2. **Analyze Design Patterns** - Extract layout, styling, animation, and component patterns
3. **Learn Design Systems** - Understand color palettes, typography, spacing, and design tokens
4. **Implement Patterns** - Apply learned patterns with Tailwind CSS or other frameworks
5. **Maintain Attribution** - Track sources and licenses properly

## Auto-Trigger Patterns

This skill automatically activates when user says:

- "study design from [URL/gist/repo]"
- "learn from [source]"
- "implement this design"
- "copy style from"
- "replicate this pattern"
- "analyze this [website/page/component]"
- "extract design patterns from"

## How It Works

### Phase 1: Source Acquisition

```
Given: URL, gist, or repository reference
1. Fetch the source content
2. Parse HTML/CSS/JS or code files
3. Identify design-related files (styles, components, layouts)
4. Cache for analysis
```

### Phase 2: Pattern Analysis

```
Extract Design Tokens:
- Colors (primary, secondary, accents)
- Typography (fonts, sizes, weights, line-heights)
- Spacing (margins, padding, gaps)
- Borders (radius, width, style)
- Shadows (box-shadows, text-shadows)

Identify Components:
- Buttons, cards, forms, modals, navigation
- Layout structures (grids, flexbox, containers)
- Animations and transitions
- Responsive breakpoints

Detect Patterns:
- Design system usage
- Component variants
- Hover/active states
- Dark mode support
```

### Phase 3: Pattern Extraction

```
Create Pattern Library:
1. Document each component with:
   - HTML structure
   - CSS/Tailwind classes
   - Design tokens used
   - Variations and states
   - Usage examples

2. Generate reusable code:
   - Tailwind component snippets
   - Custom CSS when needed
   - JavaScript for interactions
```

### Phase 4: Implementation

```
Apply to User Project:
1. Match user's tech stack (Tailwind, CSS-in-JS, etc.)
2. Convert patterns to user's framework
3. Integrate with existing design system
4. Provide implementation guidance
```

## Usage Examples

### Example 1: Study from Gist

```
User: "Study the design patterns from https://gist.github.com/ivanfioravanti/abc123"

Skill executes:
1. Fetches gist content
2. Analyzes HTML/CSS structure
3. Extracts design tokens
4. Documents components found
5. Creates pattern library
6. Shows how to implement in user's project

Output:
- Design token summary (colors, fonts, spacing)
- Component catalog with code
- Implementation guide for user's stack
- Attribution to original source
```

### Example 2: Replicate Component

```
User: "Replicate this hero section from https://example.com"

Skill executes:
1. Fetches the page
2. Isolates hero section
3. Analyzes structure and styling
4. Extracts responsive behavior
5. Creates Tailwind implementation

Output:
- Complete hero component code
- Design tokens used
- Responsive breakpoints
- Animation effects
```

### Example 3: Learn Design System

```
User: "Learn the design system from this repository"

Skill executes:
1. Scans repository for design files
2. Extracts design tokens
3. Maps components to patterns
4. Creates design system documentation

Output:
- Design system overview
- Component library
- Design token reference
- Usage guidelines
```

## Analysis Capabilities

### Design Token Extraction

**Colors:**
- Primary/secondary/tertiary palettes
- Semantic colors (success, warning, error)
- Gradient definitions
- Dark mode variants

**Typography:**
- Font families
- Size scale (text-xs to text-9xl)
- Weight scale (100-900)
- Line-height ratios
- Letter-spacing

**Spacing:**
- Spacing scale (0-96)
- Margin/padding patterns
- Gap values for flex/grid
- Container sizing

**Effects:**
- Box shadows (sm, md, lg, xl, 2xl)
- Border radius scale
- Opacity levels
- Blur effects

### Component Detection

**UI Elements:**
- Buttons (variants, sizes, states)
- Cards (layouts, effects)
- Forms (inputs, labels, validation)
- Navigation (menus, breadcrumbs, tabs)
- Modals/overlays
- Lists/tables
- Alerts/badges

**Layout Patterns:**
- Container systems
- Grid layouts
- Flexbox patterns
- Responsive breakpoints
- Header/footer structures

### Animation Analysis

**Transitions:**
- Duration/timing functions
- Easing curves
- Transform patterns
- Opacity fades

**Interactions:**
- Hover effects
- Active states
- Focus states
- Loading animations

## Output Formats

### Pattern Documentation

```markdown
## [Component Name]

**Source:** [URL/Attribution]
**License:** [License if applicable]

### Design Tokens
- Colors: primary-500, gray-900
- Spacing: 4, 8, 16, 24, 32
- Radius: rounded-lg

### Structure
```html
[HTML structure]
```

### Tailwind Implementation
```html
[Tailwind classes]
```

### Variants
- Default
- Hover
- Active
- Disabled
```

### Implementation Guide

```markdown
## Implementation for [Your Stack]

### Prerequisites
- Tailwind CSS v3+
- Required plugins

### Installation
1. Copy component to `components/`
2. Add to Tailwind config if needed
3. Import and use

### Customization
- Modify colors in config
- Adjust spacing scale
- Update breakpoints
```

## Integration with Other Skills

**Works alongside:**
- `ui-ux-pro-max` - Provides design guidance and best practices
- `codebase-indexer` - Finds relevant files in user's project
- `auto-dispatcher` - Coordinates with other agents

**Trigger order:**
1. User mentions external design source
2. `design-pattern-learner` activates
3. Fetches and analyzes source
4. `ui-ux-pro-max` provides design guidance
5. `codebase-indexer` finds implementation location
6. Generates implementation code

## Best Practices

### Attribution
- Always credit original sources
- Note licenses when applicable
- Link to original implementation

### Adaptation
- Adapt to user's design system
- Match user's tech stack
- Respect user's preferences
- Maintain consistency

### Quality
- Test responsive behavior
- Ensure accessibility
- Validate performance
- Check browser compatibility

## Error Handling

**Source unavailable:**
- Provide alternative approach
- Suggest similar patterns
- Offer manual input option

**Complex design:**
- Break into smaller components
- Analyze incrementally
- Provide step-by-step guide

**License restrictions:**
- Note license terms
- Suggest alternatives
- Create inspired version

## Commands

### Analyze URL
```bash
# Direct URL analysis
python3 skills/design-pattern-learner/scripts/analyze.py "https://example.com"

# Gist analysis
python3 skills/design-pattern-learner/scripts/analyze.py "https://gist.github.com/user/id"

# Repository analysis
python3 skills/design-pattern-learner/scripts/analyze.py "https://github.com/user/repo"
```

### Extract Component
```bash
# Extract specific component
python3 skills/design-pattern-learner/scripts/extract.py "https://example.com" --component "hero"

# Extract multiple components
python3 skills/design-pattern-learner/scripts/extract.py "https://example.com" --components "hero,footer,nav"
```

### Generate Implementation
```bash
# Generate for Tailwind
python3 skills/design-pattern-learner/scripts/generate.py --source "pattern.json" --framework "tailwind"

# Generate for React
python3 skills/design-pattern-learner/scripts/generate.py --source "pattern.json" --framework "react"

# Generate for Vue
python3 skills/design-pattern-learner/scripts/generate.py --source "pattern.json" --framework "vue"
```

## Data Storage

**Pattern Library:** `~/.claude/skills/design-pattern-learner/data/patterns/`
- JSON files for learned patterns
- Indexed by source URL
- Version controlled

**Source Cache:** `~/.claude/skills/design-pattern-learner/data/sources/`
- Cached fetched content
- HTML/CSS/JS files
- Timestamped for refresh

**Learning Log:** `~/.claude/skills/design-pattern-learner/learning-history.jsonl`
- Record of all sources studied
- Patterns extracted
- Implementation success rate

**Pre-Studied Patterns:** `~/.claude/skills/design-pattern-learner/data/ivan-fioravanti-patterns.md`
- Complete pattern database from Ivan Fioravanti's web design gists
- Includes: Luxury Travel, Sports Car, Animation patterns
- Ready-to-use component templates
- Design tokens, typography, effects
- Animation patterns with code examples

## Performance

**Typical analysis time:**
- Simple component: 5-10 seconds
- Full page: 15-30 seconds
- Design system: 30-60 seconds

**Cache benefits:**
- Reuse previously analyzed sources
- Incremental updates only
- Pattern matching across sources

## Contributing Patterns

**To add new pattern sources:**
1. Verify license compatibility
2. Test extraction quality
3. Document pattern usage
4. Add to pattern library

**Pattern quality criteria:**
- Modern and current
- Well-structured code
- Responsive design
- Accessible implementation
- Clear documentation

## Version History

**v1.0.0** - Initial release
- External source fetching
- Pattern analysis
- Design token extraction
- Component cataloging
- Implementation generation
- Attribution tracking

---

**Remember:** Always respect licenses and attribute sources appropriately. This skill is for learning and inspiration, not for copying proprietary designs without permission.