ui-ux-pro-max

name	ui-ux-pro-max
description	Use when designing/reviewing UI or UX for web/mobile products, selecting style/color/typography/layout/animation/chart patterns, or generating stack-specific implementation guidance (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui).

UI/UX Pro Max - Design Intelligence

Design rules + searchable CLI for style, UX, color, typography, charts, landing patterns, and stack guidance.

When to Apply

• New UI/page/component design
• UI/UX review and fixes
• Design system setup for a project
• Stack-specific implementation guidance
• Accessibility/performance sanity checks

Priority Order

Priority	Category	Impact	Domain
1	Accessibility	Critical	ux
2	Touch/Interaction	Critical	ux
3	Performance	High	ux
4	Layout/Responsive	High	ux
5	Typography/Color	Medium	typography, color
6	Animation	Medium	ux
7	Style Selection	Medium	style, product
8	Charts/Data	Low	chart

Fast Rule Set

Accessibility (critical)

• color-contrast: >= 4.5:1 for normal text
• focus-states: visible keyboard focus
• alt-text: meaningful images only
• aria-labels: icon-only controls must have labels
• keyboard-nav: tab order matches visual order
• form-labels: explicit labels, not placeholder-only

Touch/interaction (critical)

• touch-target-size: >= 44x44px
• hover-vs-tap: primary action must work on tap/click
• loading-buttons: disable during async
• error-feedback: field-local and explicit
• cursor-pointer: interactive elements only

Performance (high)

• image-optimization: WebP/AVIF + responsive srcset + lazy load
• reduced-motion: honor prefers-reduced-motion
• content-jumping: reserve async space

Layout/responsive (high)

• viewport-meta: width=device-width, initial-scale=1
• readable-font-size: mobile body >= 16px
• horizontal-scroll: no unintentional overflow
• z-index-management: explicit scale (10/20/30/50/...)

Typography/color (medium)

• semantics-first: type hierarchy follows content roles, not visual decoration
• line-height: body typically ~1.2-1.45 for sustained reading; adjust by face/x-height
• line-length: prose target ~45-75 chars
• font-pairing: heading/body personality alignment
• glyph-integrity: true quotes/apostrophes/dashes/ellipsis; no faux styles
• break-quality: avoid widows/orphans; monitor rivers/ladders in justified copy

Animation (medium)

• duration-timing: 150-300ms micro interactions
• transform-performance: prefer transform/opacity
• loading-states: skeleton or spinner where wait exists

Style/chart (medium/low)

• style-match: style must fit product + audience
• consistency: one language across pages
• no-emoji-icons: SVG icon sets only
• chart-type: match data semantics
• data-table: provide accessible tabular fallback

Workflow (Required)

1. Parse request: product type, keywords, industry, stack.
2. Run --design-system first.
3. Add domain searches only if needed.
4. Add stack guidance (html-tailwind default).
5. Synthesize and implement.

Commands

Prerequisite

python3 --version || python --version

Required first command

python3 skills/ui-ux-pro-max/scripts/search.py "<product> <industry> <keywords>" --design-system [-p "Project Name"]

Persist design system (recommended)

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" [--page "dashboard"]

Creates:

• design-system/MASTER.md: project baseline
• design-system/pages/<page>.md: page-level override

Retrieval rule:

1. Read design-system/MASTER.md
2. If design-system/pages/<page>.md exists, page file overrides master
3. If absent, master applies exclusively

Domain search

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

Stack search (html-tailwind default)

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind

Output format

python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

Domains

Domain	Purpose
product	Product-type recommendations
style	Visual language/effects
typography	Font pairings
color	Palette by product type
landing	Page structure + CTA strategy
chart	Chart type/library guidance
ux	UX patterns + anti-patterns
react	React/Next performance patterns
web	Accessibility + interface guidelines
prompt	Prompt/CSS keyword guidance

Stacks

Stack	Focus
html-tailwind	Utility-first responsive UI (default)
react	Hooks/state/render behavior
nextjs	Routing/SSR/images
vue	Composition API/Pinia/router
svelte	Runes/stores/SvelteKit
swiftui	View/state/nav/animation
react-native	Native components/lists/nav
flutter	Widgets/state/layout/theming
shadcn	shadcn/ui components + patterns
jetpack-compose	Composables/state/recomposition

Common UI Failure Rules

Icons/visuals

Rule	Required	Never
Icon source	SVG sets (Heroicons/Lucide/Simple Icons)	Emoji as UI icon
Hover behavior	Color/opacity transitions	Layout-shifting scale transforms
Brand logos	Official vectors	Guessed/inaccurate marks
Icon sizing	Consistent viewBox and dimensions	Mixed arbitrary sizes

Interaction

Rule	Required	Never
Click affordance	cursor-pointer on interactive elements	Default cursor on clickable cards
Feedback	Visible hover/focus/active state	No interaction feedback
Transition	~150-300ms	Instant or >500ms without reason

Light mode contrast

Rule	Required	Never
Transparent cards	Readable opacity (e.g. bg-white/80)	Low-opacity glass that kills contrast
Body text	High contrast (e.g. slate-900)	Light gray body text
Muted text	Still readable (>= slate-600 equivalent)	Gray-400 or lighter for body copy
Borders	Visible in light and dark	Near-invisible borders

Layout

Rule	Required	Never
Floating nav	Edge spacing (top/left/right offsets)	Hard pin to edges by default
Fixed header	Offset content by header height	Hidden content under navbar
Containers	Consistent max width scale	Random max-width per section

Pre-Delivery Checklist

Visual

• No emoji icons
• One coherent icon set
• Brand logos verified
• Hover states do not shift layout
• Theme tokens used directly
• Type roles mapped to semantics (display/head/body/meta/data)
• No faux bold/italic/small-caps or stretched text

Interaction

• Clickable elements indicate clickability
• Hover/focus feedback present
• Motion duration in expected range
• Keyboard focus visible

Color/contrast

• 4.5:1 minimum for normal text
• Glass/transparency readable in light mode
• Borders visible in both modes
• Tested light and dark mode

Layout/responsive

• Edge spacing correct for floating/fixed UI
• No hidden content behind fixed elements
• Tested 375/768/1024/1440 widths
• No horizontal mobile scroll

Accessibility

• Meaningful image alt text
• Form labels present
• Color not sole state indicator
• prefers-reduced-motion supported