GENESIS UI/UX Gold Standard
The Gold Standard for UI/UX. Combines a BM25 search engine (67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, 161 industry reasoning rules, 13 tech stacks) with Anti-Gravity creative philosophy — every interface should feel like it cost $10,000+.
Five engines, one skill:
- Data Engine — Industry-aware design system generator with BM25 ranking across 24 CSV databases
- Creative Engine — Bold aesthetic direction, Spline 3D, cinematic motion, typography-as-identity
- Techniques Engine — 13 foundational techniques. See
skills/ui-ux-pro-max/TECHNIQUES.md - Modern CSS Engine — 7 CSS-native + advanced techniques. See
skills/ui-ux-pro-max/TECHNIQUES_MODERN.md - Micro-Interaction Engine — 8 component choreography patterns. See
skills/ui-ux-pro-max/TECHNIQUES_MICRO.md
28 Award-Winning Techniques
When building Awwwards-level sites, read the technique files for production-ready code patterns:
TECHNIQUES.md — Foundation (T1-T13)
| # | Technique | Key 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 |
TECHNIQUES_MODERN.md — CSS-Native + Advanced (T14-T20)
| # | Technique | Key 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) |
TECHNIQUES_MICRO.md — Micro-Interactions & Components (T21-T28)
| # | Technique | Key Libraries |
|---|---|---|
| 21 | Button micro-interactions (sweep, lift, state machine) | CSS/JS |
| 22 | Input & form animations (floating label, validation) | CSS |
| 23 | Card hover effects (3D tilt, spotlight, border glow) | CSS/JS |
| 24 | Navigation choreography (transform, menu reveal, sliding indicator) | CSS/JS |
| 25 | Toast & notification animations (slide-in, auto-dismiss) | 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, gradient mesh, metaballs) | three.js/CSS |
Also includes: Premium timing functions (8 cubic-bezier curves), Site Analysis Workflow, CSS vs JS decision matrix, performance tiering
Stack from 9 studied award winners: Nuxt.js (5/9), GSAP (5/9), Lenis (4/9), Three.js (3/9), headless CMS (6/9)
When to Apply
Activate on ANY UI/UX request:
- Designing new UI components or pages
- Choosing color palettes and typography
- Reviewing code for UX issues
- Building landing pages, dashboards, apps
- Implementing accessibility requirements
- Creating distinctive, memorable interfaces
Phase 1: Design Thinking (BEFORE Code)
Before touching code, commit to a direction. Generic is the enemy.
Context Analysis
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Pick an extreme — brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian
- Constraints: Framework, performance, accessibility requirements
- Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?
The Gold Standard Test
Every design must pass: "Would this feel out of place on a $10K agency portfolio?" If yes, push harder.
Phase 2: Design System Generation (REQUIRED)
Step 1: Generate Design System
Always start here. The engine searches 5 domains in parallel (product, style, color, landing, typography), applies 161 industry reasoning rules, and returns a complete system.
python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
Examples:
# SaaS dashboard
python3 skills/ui-ux-pro-max/scripts/search.py "SaaS analytics dashboard professional" --design-system -p "MetricFlow"
# Beauty/wellness landing page
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
# Fintech crypto app
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto trading dark" --design-system -p "CryptoVault"
Step 2: Persist Design System (Optional — Multi-Page Projects)
Save for hierarchical retrieval across sessions:
# Save master design system
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
# With page-specific override
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
Creates:
design-system/MASTER.md— Global Source of Truthdesign-system/pages/*.md— Page-specific overrides
Retrieval rule: Check pages/[page].md first. If exists, its rules override MASTER. Otherwise, use MASTER exclusively.
Step 3: Supplemental Domain Searches
After the design system, drill deeper as needed:
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
| Need | Domain | Example |
|---|---|---|
| More style options | style | --domain style "glassmorphism dark" |
| Chart recommendations | chart | --domain chart "real-time dashboard" |
| UX best practices | ux | --domain ux "animation accessibility" |
| Alternative fonts | typography | --domain typography "elegant luxury" |
| Landing structure | landing | --domain landing "hero social-proof" |
| React performance | react | --domain react "suspense rerender" |
| Web accessibility | web | --domain web "aria focus keyboard" |
| Icon recommendations | icons | --domain icons "navigation action" |
Step 4: Stack Guidelines
Get implementation-specific best practices. Default to html-tailwind if unspecified.
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
Available stacks: html-tailwind, react, nextjs, vue, nuxtjs, nuxt-ui, svelte, astro, swiftui, react-native, flutter, shadcn, jetpack-compose
Phase 3: Creative Execution (The Gold Standard)
Typography as Identity
The font IS the brand. Never default to generic fonts.
BANNED: Inter, Roboto, Arial, system fonts, Open Sans — these scream "template"
USE INSTEAD: Distinctive fonts from Fontshare:
- Display: Clash Display, Satoshi, Cabinet Grotesk, General Sans, Switzer
- Pair a distinctive display font with a refined body font
- The design system generator suggests pairings — but always push for something unexpected
Rule: If two different projects could use the same font pairing, at least one of them is wrong.
Color & Theme
- Commit to a cohesive aesthetic. Use CSS