# Heyvhuang Ship Faster Tool UI UX Pro Max > Tool: UI/UX Pro Max (Searchable Design Intelligence) - Skill: `tomevault-io/heyvhuang-ship-faster-tool-ui-ux-pro-max` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/heyvhuang-ship-faster-tool-ui-ux-pro-max` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/heyvhuang-ship-faster-tool-ui-ux-pro-max/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/heyvhuang-ship-faster-tool-ui-ux-pro-max --- # 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: ```bash python3 --version || python --version ``` ## Core command Domain search: ```bash python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "" --domain [-n ] ``` Stack search: ```bash python3 ~/.claude/skills/tool-ui-ux-pro-max/scripts/search.py "" --stack [-n ] ``` 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) 2) Search domains (pick 1–3 results per domain, then synthesize): 1. `product` — product type → style direction 2. `style` — style details (color/shape/motion/complexity) 3. `typography` — heading/body pairing (includes Google Fonts + CSS import) 4. `color` — palette tokens (primary/secondary/CTA/background/text/border) 5. `landing` — landing structure (section order + CTA placement) 6. `chart` — chart recommendations (dashboards) 7. `ux` — UX + a11y rules and anti-patterns 3) Search by stack to ground decisions in implementation constraints: ```bash 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) ```bash 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` --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/heyvhuang) — claim your Tome and manage your conversions.