Skip to content
UXClaim
UX Design

UI/UX Gold Standard

28 award-winning UI/UX techniques with 5 engines, 24 databases, and 1,334+ design entries for Claude Code.

View source More in UX Design

What It Does

UI/UX Gold Standard transforms Claude Code into an elite design assistant with 28 production-ready techniques reverse-engineered from Awwwards-winning websites. It combines data-driven design systems with premium micro-interactions, modern CSS patterns, and 3D effects.

How It Works

The skill operates through 5 integrated engines:

  • Data Engine: BM25 search across 24 CSV databases with 1,334+ entries (67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines)
  • Creative Engine: Anti-Gravity design philosophy with Spline 3D integration
  • Techniques Engine: Foundation patterns (Lenis, GSAP, Three.js, custom cursors)
  • Modern CSS Engine: Native CSS features (Scroll-Driven Animations, View Transitions, Container Queries)
  • Micro-Interaction Engine: Button choreography, card effects, modals, toasts, and WebGL shaders

Use Cases

Design data-driven design systems matched to your industry, build Awwwards-level interfaces with smooth animations, reverse-engineer competitor websites to identify techniques, add premium micro-interactions to components, prototype interactive prototypes with Rive animations.

Who Benefits

Product designers building premium interfaces, design leads establishing design systems, prototypers creating interactive demos, design-focused developers implementing pixel-perfect designs with production-ready code patterns.

Frequently asked questions

How do I install UI/UX Gold Standard?
Clone the repository into your Claude skills directory: `git clone https://github.com/migueljnew-droid/ui-ux-gold-standard.git ~/.claude/skills/ui-ux-gold-standard`. The skill auto-activates on any UI/UX design request in Claude Code.
What are the 28 techniques?
Techniques span three categories: Foundation (T1-T13) including Lenis, GSAP ScrollTrigger, clip-path reveals, custom cursors; Modern CSS (T14-T20) including Scroll-Driven Animations, View Transitions, Container Queries, Popover API; Micro-Interactions (T21-T28) including button states, card effects, modals, toasts, and WebGL shaders.
Can I generate a design system automatically?
Yes. Use the CLI: `python3 scripts/search.py "SaaS dashboard" --design-system`. The Data Engine generates complete systems with colors, typography, and styles matched to your product type using 161 reasoning rules across 24 databases.
Does this work for dark mode and accessibility?
The skill includes 99 UX guidelines and theme-aware patterns. Modern CSS techniques like Container Queries and :has() selector enable responsive, accessible component design. Animation patterns include focus states and reduced-motion considerations.
What libraries and technologies does it support?
GSAP, Three.js, CSS3, Rive, WebGL, Tailwind CSS, Lenis, SplitType, Barba.js, and native browser APIs (Scroll-Driven Animations, View Transitions, Popover API). Supports 13 tech stacks including Next.js, Vue, React, and vanilla JS.
How do I reverse-engineer a website's techniques?
Use the 4-step reverse-engineering workflow: identify visual effects, map to the 28 techniques library, check required stack/libraries, extract code patterns. The skill maintains a stack-to-technique mapping for quick reference.
Can I customize the design system for my brand?
Yes. Query the style database with brand keywords (e.g., "luxury", "minimal", "playful") to get 22-attribute style profiles. Then combine with your color palette and typography selections from 161 available palettes and 57 font pairings.
Does it include production-ready code?
All 28 techniques come with production-ready code patterns, performance optimizations, and deploy configurations for Vercel. Code includes CSS-native approaches before JavaScript, and modern browser API usage for reduced dependencies.

Glossary

BM25 Search
Relevance ranking algorithm used to search across 24 CSV databases of design patterns, returning the most contextually relevant styles, colors, and techniques for your query.
Scroll-Driven Animations
Native CSS feature that synchronizes element animations directly to scroll position without JavaScript, enabling smooth performance-optimized effects like reveals and parallax.
Micro-Interactions
Small, purposeful animations and transitions (button hovers, form validation feedback, toast notifications) that enhance usability and provide visual feedback to user actions.
View Transitions API
Native browser feature enabling smooth animated transitions between page states, replacing traditional jarring page reloads with choreographed visual continuity.
WebGL Shaders
Graphics programming language programs that run on GPU to create complex visual effects like image distortion, displacement, and advanced filters in real-time.

More in UX Design

All →
UX Design

Canvas Design

Creates beautiful visual art in PNG and PDF documents using design philosophy and aesthetic principles for posters, designs, and static pieces.

ComposioHQ
UX Design

Claude Design

AI design workspace for prototyping, design systems, and marketing collateral using Claude's vision model and conversation-to-artifact workflow.

Julpygo
UX Design

Design Thinking Skills

Claude-powered Design Thinking coach guiding teams from user research through shipped solutions with phase-by-phase methods, templates, and facilitation scri...

rastian
UX Design

Eagle Skills

Expert UX audits, product diagnostics, ad review, and AI detection for Claude Code with 65+ UX laws and anti-slop filtering.