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

name, description, priority, autoTrigger

name	description	priority	autoTrigger
design-pattern-learner	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.	7	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

## [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

[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

# 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

# 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

# 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.