SkillsAdd

smithery/heyvhuang

tool-ui-ux-pro-max

Use when you need concrete UI/UX inputs (palette, typography, landing patterns, UX/a11y constraints) to drive design or review. Searchable UI/UX design intelligence (styles, palettes, typography, landing patterns, charts, UX/a11y guidelines + stack best practices) backed by CSV + a Python search script. Triggers: UIUX/uiux, UI/UX, UX design, UI design, design system, design spec, color palette, typography, layout, animation, accessibility/a11y, component styling. Actions: search, recommend, rev…

Installation

$ npx skills add smithery/heyvhuang --skill tool-ui-ux-pro-max
View on skills.sh ↗ Website ↗

Summary

  • Use when you need concrete UI/UX inputs (palette, typography, landing patterns, UX/a11y constraints) to drive design or review.
  • Searchable UI/UX design intelligence (styles, palettes, typography, landing patterns, charts, UX/a11y guidelines + stack best practices) backed by CSV + a Python search script.
  • Triggers: UIUX/uiux, UI/UX, UX design, UI design, design system, design spec, color palette, typography, layout, animation, accessibility/a11y, component styling.
  • Actions: search, recommend, review, improve UI.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

frontend-design Same topic
anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…

866.4K installs
agent-browser Same topic
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
vercel-react-best-practices Same topic
vercel-labs/agent-skills 697.8K installs
web-design-guidelines Same topic
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
microsoft-foundry Same topic
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs
azure-diagnostics Same topic
microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

568.9K installs

Also in this package

Other skills from smithery/heyvhuang · top by installs.

npx skills add smithery/heyvhuang
workflow-template-seeder 0 workflow-ship-faster 0 workflow-feature-shipper 0 workflow-creator 0 workflow-brainstorm 0 tool-x-article-publisher 0 tool-schema-markup 0 tool-hooks-doctor 0 tool-design-style-selector 0 review-seo-audit 0

Browse all from smithery/heyvhuang

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Declared
Cursor Declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Skill metadata

Parsed from SKILL.md frontmatter.

Declared agents claude-code cursor

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 6,288 B
  • docs SUMMARY.md 541 B

History

  1. First recorded snapshot · 0 installs

SKILL.md

Tool: UI/UX Pro Max (Searchable Design Intelligence)

This is a lookup tool, not a page generator.

Use it to quickly retrieve concrete inputs (palette tokens, typography pairings, UX constraints, stack-specific implementation notes) that can be synthesized into:

  • design-system.md
  • a UI refactor plan / acceptance criteria
  • review checklists for “looks good but feels broken” issues

Prerequisites

Ensure Python is available:

python3 --version || python --version

Core command

Domain search:

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

Stack search:

python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "<query>" --stack <stack> [-n <max_results>]

Available stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter

Recommended workflow

When asked to design / improve UI, do this:

  1. Identify these inputs:
  • Product type: SaaS / e-commerce / content / tool / dashboard / landing
  • Tone keywords: minimal / premium / playful / warm / corporate / technical / bold
  • Industry: healthcare / fintech / education / consumer / …
  • Stack: React / Next.js / … (default to html-tailwind if unspecified)
  1. Search domains (pick 1–3 results per domain, then synthesize):
  2. product — product type → style direction
  3. style — style details (color/shape/motion/complexity)
  4. typography — heading/body pairing (includes Google Fonts + CSS import)
  5. color — palette tokens (primary/secondary/CTA/background/text/border)
  6. landing — landing structure (section order + CTA placement)
  7. chart — chart recommendations (dashboards)
  8. ux — UX + a11y rules and anti-patterns
  1. Search by stack to ground decisions in implementation constraints:
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "responsive layout" --stack nextjs

Domain reference

Domain Use for Example keywords
product Style direction by product type saas, ecommerce, portfolio, healthcare
style UI style concepts & implementation hints minimalism, brutalism, glassmorphism
typography Font pairings + import instructions elegant, playful, professional
color Palette tokens (Hex) saas, ecommerce, fintech
landing Landing structure & CTA strategy hero, testimonial, pricing
chart Chart type selection trend, comparison, funnel
ux UX/a11y rules & anti-patterns accessibility, animation, navigation
prompt Prompt / technical keywords (style name)

Example (beauty / wellness landing)

python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "animation" --domain ux
python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind

Then: turn palette + typography + motion constraints + component rules into design-system.md, and convert the checklist below into acceptance criteria.

Common professional UI rules (quick scan)

Icons & visuals

Rule Do Don’t
No emoji icons Use a consistent SVG icon set (Heroicons/Lucide/Simple Icons) Mix emoji/icons randomly
Stable hover states Use color/opacity/shadow transitions Use transforms that cause layout shift
Correct brand logos Use official SVG sources Guess logos or use inconsistent variants
Consistent sizing Normalize icon sizing (e.g., 24×24) Mix different viewBox/sizes

Interaction

Rule Do Don’t
Pointer cursor Add cursor-pointer to clickable surfaces Leave clickable surfaces without affordance
Clear feedback Change border/shadow/color on hover Make hover states indistinguishable
Reasonable transitions 150–300ms, consistent Instant changes or sluggish >500ms

Layout

Rule Do Don’t
Spacing from edges Leave room for floating navs Stick UI to viewport edges
Avoid hidden content Account for fixed headers Let content sit behind fixed bars
Consistent containers Keep one container width system Use multiple container widths randomly

Pre-delivery checklist (use as acceptance criteria)

Visual quality

  • No emoji used as UI icons
  • Icons are from a consistent icon set
  • Brand logos are correct (not guessed)
  • Hover states do not cause layout shift
  • Color usage follows a token system (avoid scattered raw hex values)

Interaction

  • All clickable surfaces have cursor-pointer
  • Hover/focus states provide clear feedback
  • Transitions are consistent (150–300ms)
  • Keyboard focus is visible

Layout & responsive

  • Works at 320px / 768px / 1024px / 1440px
  • No horizontal scroll on mobile
  • Fixed elements do not cover content

Accessibility (a11y)

  • Images have alt text
  • Form inputs have labels
  • Color is not the only indicator
  • Respects prefers-reduced-motion