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