UI/UX Pro Max - Design Intelligence

Searchable local UI/UX guidance: 79 searchable styles (50 active), 192 product palettes and exact reasoning profiles, 74 font pairings, 119 UX guidelines, 105 curated icons, 17 GSAP presets, 25 chart types, and 22 technology stacks.

When to Apply

Use this Skill when the task involves UI structure, visual design decisions, interaction patterns, or user experience quality control: designing new pages, creating/refactoring UI components, choosing color/typography/spacing/layout systems, reviewing UI for UX/accessibility/consistency, implementing navigation/animation/responsive behavior, or improving perceived quality and usability.

Skip it for pure backend logic, API/database design, non-visual performance work, infrastructure/DevOps, or non-visual scripts — unless the task changes how something looks, feels, moves, or is interacted with.

Rule Categories by Priority

Follow priority 1→10 to decide which category to focus on first; use --domain <Domain> to query full details. The full rule text for every category lives in references/quick-reference.md — read it on demand rather than loading it every time.

Priority	Category	Impact	Domain	Key Checks (Must Have)	Anti-Patterns (Avoid)
1	Accessibility	CRITICAL	ux	Contrast 4.5:1, Alt text, Keyboard nav, Aria-labels	Removing focus rings, Icon-only buttons without labels
2	Touch & Interaction	CRITICAL	ux	Min size 44×44px, 8px+ spacing, Loading feedback	Reliance on hover only, Instant state changes (0ms)
3	Performance	HIGH	ux	WebP/AVIF, Lazy loading, Reserve space (CLS < 0.1)	Layout thrashing, Cumulative Layout Shift
4	Style Selection	HIGH	style, product	Match product type, Consistency, SVG icons (no emoji)	Mixing flat & skeuomorphic randomly, Emoji as icons
5	Layout & Responsive	HIGH	ux	Mobile-first breakpoints, Viewport meta, No horizontal scroll	Horizontal scroll, Fixed px container widths, Disable zoom
6	Typography & Color	MEDIUM	typography, color	Base 16px, Line-height 1.5, Semantic color tokens	Text < 12px body, Gray-on-gray, Raw hex in components
7	Animation	MEDIUM	ux, gsap	Context-aware timing, Motion conveys meaning, Spatial continuity	One duration for every transition, Animating width/height, No reduced-motion
8	Forms & Feedback	MEDIUM	ux	Visible labels, Error near field, Helper text, Progressive disclosure	Placeholder-only label, Errors only at top, Overwhelm upfront
9	Navigation Patterns	HIGH	ux	Predictable back, Bottom nav ≤5, Deep linking	Overloaded nav, Broken back behavior, No deep links
10	Charts & Data	LOW	chart	Legends, Tooltips, Accessible colors	Relying on color alone to convey meaning

For the full rule list per category (all 119 UX guidelines with rationale), read references/quick-reference.md. For app-specific polish rules (icons, touch feedback, dark mode contrast, safe areas) and the canonical pre-delivery checklist, read references/pro-rules.md.

---

Running the search tool

The search script lives inside this skill's own directory, not the project directory. Always invoke it by its full path — do not assume a particular working directory:

python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "<query>" --domain <domain>

If python is not found, try python3, then py -3. Requires Python 3.x, no external dependencies (see README for install instructions if Python is missing).

Workflow

Query Contract

Choose the smallest search mode that fits the request:

1. New project/page or system-wide visual direction → use --design-system.
2. Targeted concern or component bug → use one explicit --domain.
3. Known implementation stack → use --stack; add a separate domain search only for a distinct design concern.

Build each query around one dominant intent, using 2–5 meaningful terms and one useful constraint such as product, platform, or interaction. Verify the returned domain/category, top result identity, and fit for the user's product and platform before applying it. Retry once with a narrower rewrite or explicit domain/stack when output is empty or off-topic. If that retry fails, state that no verified match was found and label any general guidance as a fallback. Do not persist unverified output.

For accessibility work, search one observable outcome at a time and use explicit accessibility outcome terms. Query the semantic outcome first ("error summary validation" --domain ux), then a component-specific domain if needed ("decorative icon aria hidden" --domain icons or "icon button accessible label" --domain icons), and only then the implementation stack. Other useful outcome queries include "focus not obscured" --domain ux, "dragging movements" --domain ux, and "accessible authentication" --domain ux. Do not accept a generic accessibility result for a specific interaction or WCAG criterion.

For text-layout and compact-component bugs, search the semantic UX outcome first, then the detected stack for implementation details. Useful outcome queries include "orphan heading line balance" --domain ux, "badge chip label wraps" --domain ux, `"live badge count scre