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>
36 lines
930 B
Markdown
36 lines
930 B
Markdown
# 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
|