Files

Claude SuperCharged b42e694305 📚 Add Ivan Fioravanti web design patterns to design-pattern-learner

ANALYZED PATTERNS:
- Luxury Travel Website (futuristic luxury theme)
- Sports Car Website (high performance theme)
- Animation Showcase (motion patterns)

PATTERNS EXTRACTED:
- Design tokens (colors, typography, effects)
- Component templates (hero, cards, navbar, forms)
- Animation patterns (scroll reveal, hover effects, parallax)
- Responsive patterns (mobile-first, breakpoints)
- Tailwind config extensions

INCLUDED IN KNOWLEDGE BASE:
✓ Hero sections with gradient overlays
✓ Glass navbar with backdrop blur
✓ Destination cards with hover effects
✓ Membership tier cards
✓ Form patterns with chips
✓ Animation templates (aurora, shimmer, magnetic)
✓ Color gradients (cyan-purple-magenta)
✓ Typography scales (Space Grotesk, Inter)
✓ Micro-interactions (hover lift, tilt, glow)

USAGE:
The skill now has pre-studied patterns from Ivan Fioravanti's gists.
Can immediately apply these patterns to new projects.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

b42e694305 · 2026-01-26 14:17:30 +04:00

History

data

📚 Add Ivan Fioravanti web design patterns to design-pattern-learner

2026-01-26 14:17:30 +04:00

scripts

✨ Add design-pattern-learner skill with auto-trigger

2026-01-26 13:51:53 +04:00

README.md

✨ Add design-pattern-learner skill with auto-trigger

2026-01-26 13:51:53 +04:00

skill.md

📚 Add Ivan Fioravanti web design patterns to design-pattern-learner

2026-01-26 14:17:30 +04:00

README.md

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 guidance
codebase-indexer - Find files
always-use-superpowers - Auto-dispatch