Add design-pattern-learner skill with auto-trigger

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>
This commit is contained in:
Claude SuperCharged
2026-01-26 13:51:53 +04:00
Unverified
parent 8ad918861a
commit 39e480484f
5 changed files with 1413 additions and 1 deletions

View File

@@ -56,7 +56,14 @@ You MUST:
- Use before: Any design work, HTML/CSS, component creation, layouts
- Priority: HIGH for any UI/UX work
#### 5. codebase-indexer (ALWAYS ACTIVE)
#### 5. design-pattern-learner
**When to use:** Studying or implementing designs from external sources
- Use before: Learning from gists, repositories, or external websites
- Triggers on: "study design from", "learn from", "implement this design", "copy style from"
- Priority: HIGH for external design learning
- Benefit: Fetches, analyzes, and implements patterns from any design source
#### 6. codebase-indexer (ALWAYS ACTIVE)
**When to use:** EVERY TASK involving code navigation, file searches, codebase understanding
- **ALWAYS RUN THIS FIRST** before any code-related task
- Use for: Finding files, understanding code structure, semantic search, 40-60% token reduction
@@ -79,6 +86,9 @@ User sends message
Check: Is this code-related work?
↓ YES → Invoke codebase-indexer (ALWAYS)
↓ NO
Check: Is this studying/learning external design?
↓ YES → Invoke design-pattern-learner
↓ NO
Check: Is this UI/UX work?
↓ YES → Invoke ui-ux-pro-max
↓ NO