The ultimate UI/UX design skill for Claude Code.
28 award-winning techniques reverse-engineered from 9 Awwwards SOTY-level websites.
BM25 design intelligence engine + production-ready code patterns.
When activated, Claude Code becomes an elite UI/UX designer that:
Generates data-driven design systems — colors, typography, styles matched to your industry using 161 reasoning rules
Builds Awwwards-level interfaces — 28 production-ready techniques from smooth scroll to WebGL shaders
Uses modern CSS-native patterns first — Scroll-Driven Animations, View Transitions, Container Queries before reaching for JS
Adds premium micro-interactions — button state machines, 3D card tilt, spring-physics drawers, toast systems
Reverse-engineers any website — structured 4-step workflow to identify tech stack and map to technique library
 |
Data Engine — BM25 search across 24 CSV databases. 67 styles, 161 palettes, 57 font pairings, 99 UX guidelines, 161 reasoning rules, 13 stacks |
 |
Creative Engine — Anti-Gravity $10K design philosophy. Spline 3D integration. Vercel deploy |
 |
Techniques Engine — T1-T13: Lenis, GSAP ScrollTrigger, SplitType, Three.js, Barba.js, custom cursors |
 |
Modern CSS Engine — T14-T20: Scroll-Driven Animations, View Transitions, Container Queries, :has(), Popover API, Rive, Advanced GSAP |
 |
Micro-Interaction Engine — T21-T28: Button choreography, card effects, nav patterns, toast systems, modal/drawer physics, WebGL shaders |
Foundation — T1 through T13 TECHNIQUES.md
| # | Technique | Libraries |
|---|---|---|
| 1 | Lenis + GSAP ScrollTrigger foundation | lenis gsap |
| 2 | Text splitting animations | split-type gsap |
| 3 | Custom cursor with mix-blend-mode: difference |
Vanilla JS |
| 4 | Clip-path scroll reveals (polygon, circle, ellipse, inset) | gsap |
| 5 | Horizontal scroll sections (pin + translateX) | gsap |
| 6 | Gooey / liquid filter effect (blur + contrast) | CSS / SVG |
| 7 | Variable font animations (@property) |
CSS |
| 8 | Theme-aware navigation (dark/light swap) | IntersectionObserver |
| 9 | Image displacement / distortion (WebGL shaders) | three.js |
| 10 | Page transitions (clip-path wipes) | barba.js gsap |
| 11 | Grayscale to color reveals | CSS filters |
| 12 | Three.js post-processing (chromatic aberration, grain) | three.js |
| 13 | Marquee / infinite scroll text | CSS keyframes |
Modern CSS-Native + Advanced — T14 through T20 TECHNIQUES_MODERN.md
| # | Technique | Libraries |
|---|---|---|
| 14 | CSS Scroll-Driven Animations (zero-JS scroll effects) | Native CSS |
| 15 | View Transitions API (native page transitions) | Native CSS/JS |
| 16 | Container Queries (component-level responsive) | Native CSS |
| 17 | :has() relational selector (parent styling) |
Native CSS |
| 18 | Popover API + Anchor Positioning (native modals) | Native HTML/CSS |
| 19 | Rive animations (interactive state machines) | @rive-app |
| 20 | Advanced GSAP — Flip, MotionPath, DrawSVG, MorphSVG, ScrollSmoother | gsap Club |
Micro-Interactions & Components — T21 through T28 TECHNIQUES_MICRO.md
| # | Technique | Libraries |
|---|---|---|
| 21 | Button micro-interactions (sweep, lift, state machine) | CSS / JS |
| 22 | Input & form animations (floating label, validation shake) | CSS |
| 23 | Card hover effects (3D tilt, spotlight, animated border glow) | CSS / JS |
| 24 | Navigation choreography (transform, menu reveal, sliding indicator) | CSS / JS |
| 25 | Toast & notification animations (slide-in, auto-dismiss progress) | CSS / JS |
| 26 | Modal & drawer choreography (scale-from-origin, spring physics) | CSS |
| 27 | Loading & skeleton patterns (shimmer, blur-up, crossfade) | CSS / JS |
| 28 | WebGL shader gallery (noise distortion, gradient mesh, metaballs) | three.js / CSS |
# Clone into your skills directory
git clone https://github.com/migueljnew-droid/ui-ux-gold-standard.git ~/.claude/skills/ui-ux-pro-maxThe skill auto-activates on any UI/UX request — designing pages, choosing colors, building components, reviewing interfaces.
# Generate a complete design system for any product
python3 scripts/search.py "SaaS analytics dashboard" --design-system -p "MetricFlow"
# Search specific domains
python3 scripts/search.py "glassmorphism dark" --domain style
python3 scripts/search.py "elegant luxury" --domain typography
python3 scripts/search.py "animation a11y" --domain ux
# Stack-specific guidelines (13 stacks supported)
python3 scripts/search.py "performance" --stack nextjs| Database | Entries | Contents |
|---|---|---|
| Products | 95 | Product type to style mapping |
| Styles | 67 | UI styles with 22 attributes each |
| Colors | 96 | Industry-matched hex palettes |
| Typography | 56 | Font pairings with Google Fonts URLs |
| UX Guidelines | 98 | Best practices with good/bad code examples |
| UI Reasoning | 100 | Industry-specific design decision rules |
| Icons | 100 | Icon library recommendations by category |
| Charts | 25 | Data visualization type guidance |
| Landing Pages | 30 | Section order and CTA patterns |
| React Performance | 44 | React/Next.js optimization rules |
| Web Interface | 30 | Web accessibility (WCAG) guidelines |
| Stack Guides | 13 files | Framework-specific best practices |
Supported stacks: html-tailwind react nextjs vue nuxtjs nuxt-ui svelte astro shadcn swiftui react-native flutter jetpack-compose
Reverse-engineered from 9 Awwwards SOTY-level sites:
landonorris.com · igloo.inc (SOTY 2024) · messenger.abeto.co
dontboardme.com · kprverse.com · synchronized.studio
stitchingstories.nl · beckyentertainment.co · manayerbamate.com
| Layer | Tool | Winners Using It |
|---|---|---|
| Smooth Scroll | Lenis | 4 / 9 |
| Animation | GSAP + ScrollTrigger | 5 / 9 |
| 3D | Three.js | 3 / 9 |
| Framework | Nuxt.js or Next.js | 5 / 9 |
| CMS | Sanity / Storyblok / Contentful | 6 / 9 |
"Every interface should feel like it cost $10,000+."
The Gold Standard Test: Would this feel out of place on a $10K agency portfolio?
If yes, push harder.
ui-ux-gold-standard/
├── SKILL.md # Master orchestrator — 5 engines, build workflow
├── TECHNIQUES.md # T1-T13: Foundation techniques
├── TECHNIQUES_MODERN.md # T14-T20: CSS-native + Rive + Advanced GSAP
├── TECHNIQUES_MICRO.md # T21-T28: Micro-interactions, components, shaders
├── scripts/
│ ├── search.py # CLI entry point
│ ├── core.py # BM25 search engine
│ └── design_system.py # Multi-domain design system generator
└── data/
├── styles.csv # 67 UI styles (22 attributes each)
├── colors.csv # 96 industry-matched palettes
├── typography.csv # 56 font pairings
├── products.csv # 95 product type mappings
├── ux-guidelines.csv # 98 UX best practices
├── ui-reasoning.csv # 100 design decision rules
├── icons.csv # 100 icon recommendations
├── charts.csv # 25 chart type guides
├── landing.csv # 30 landing page patterns
├── react-performance.csv # 44 React/Next.js rules
├── web-interface.csv # 30 WCAG guidelines
└── stacks/ # 13 framework-specific CSVs
