39e480484f
NEW SKILL: Design Pattern Learner - Studies and implements web design patterns from external sources - Fetches gists, repositories, and webpages - Analyzes design tokens (colors, typography, spacing, effects) - Extracts UI components (buttons, cards, modals, etc.) - Generates implementation code (Tailwind, React, Vue) Auto-Trigger Patterns: - "study design from [URL]" - "learn from [source]" - "implement this design" - "copy style from" - "extract component from" Integration: - Works alongside ui-ux-pro-max for design guidance - Uses codebase-indexer to find implementation locations - Uses mcp-client for external content fetching - Added to always-use-superpowers decision tree Updated Files: - skills/design-pattern-learner/skill.md - Complete skill documentation - skills/design-pattern-learner/scripts/analyze.py - Pattern analyzer - skills/design-pattern-learner/scripts/generate.py - Implementation generator - skills/design-pattern-learner/README.md - Quick start guide - ralph-integration/dispatch/auto-triggers.yml - Priority 7 - skills/always-use-superpowers/SKILL.md - Decision tree updated 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
930 B
930 B
Design Pattern Learner Skill
Auto-triggers when user wants to study/learn from external design sources
Quick Start
# 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
- Fetches designs from gists, repos, or webpages
- Analyzes design tokens (colors, typography, spacing, effects)
- Extracts components (buttons, cards, modals, etc.)
- 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 guidancecodebase-indexer- Find filesalways-use-superpowers- Auto-dispatch