Smithery is now a part of Arcade.dev! Read more in our announcement here
Use when you need concrete UI/UX inputs (palette, typography, landing patterns, UX/a11y constraints) to drive design or review...
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.mdEnsure Python is available:
python3 --version || python --version
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
When asked to design / improve UI, do this:
html-tailwind if unspecified)product — product type → style directionstyle — style details (color/shape/motion/complexity)typography — heading/body pairing (includes Google Fonts + CSS import)color — palette tokens (primary/secondary/CTA/background/text/border)landing — landing structure (section order + CTA placement)chart — chart recommendations (dashboards)ux — UX + a11y rules and anti-patternspython3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "responsive layout" --stack nextjs
| 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) |
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.
| 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 |
| 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 |
| 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 |
cursor-pointerprefers-reduced-motion