Ui Ux Pro Max

2. Generate the design system first

Use the helper script to produce a compact design recommendation:

python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "<product_type> <industry> <keywords>" --design-system -p "Project Name"

This produces:

• recommended style direction,
• palette family,
• typography direction,
• interaction / visual effects,
• landing or layout bias,
• anti-patterns to avoid.

If the work spans multiple turns or pages, persist the design system:

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

This creates:

• design-system/MASTER.md
• optional page-level override notes under design-system/pages/

3. Pull targeted guidance only when needed

Use a focused search instead of loading everything at once:

python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "glassmorphism dark" --domain style
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "animation accessibility" --domain ux
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "real-time dashboard" --domain chart
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "elegant luxury serif" --domain typography

Supported domains:

• product
• style
• color
• typography
• landing
• chart
• ux

4. Add stack-specific guidance before coding

python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "forms table responsive" --stack html-tailwind

Supported stacks:

• html-tailwind
• react
• nextjs
• vue
• svelte
• swiftui
• react-native
• flutter
• shadcn
• jetpack-compose

5. Synthesize before implementation

After gathering the design system, convert it into:

• layout structure,
• component rules,
• visual tokens,
• interaction rules,
• accessibility constraints,
• implementation notes for the chosen stack.

Do not dump raw search output into the final answer. Use it to justify a coherent design direction.

Default output shape

A good response should usually include:

1. product and UI framing,
2. recommended style system,
3. palette and typography,
4. component and layout rules,
5. accessibility and interaction checks,
6. stack-aware implementation notes.

Safety rules

• Do not hardcode a design language without connecting it to the product type.
• Do not use emoji as primary UI iconography.
• Do not weaken text contrast for visual flair.
• Do not scale interactive cards on hover if it destabilizes layout.
• Do not use animation that violates prefers-reduced-motion.
• Do not invent unsupported helper scripts or datasets; use the bundled search.py and data/ui-reasoning.csv only.

References

Load only what is needed:

• references/USAGE.md - recommended command patterns and retrieval flow
• data/ui-reasoning.csv - compact product-to-design heuristics used by the helper script
• scripts/search.py - deterministic helper for design-system, domain, and stack lookup