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, review, improve UI.
- Installs
- 61
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/heyvhuang/ship-faster --skill tool-ui-ux-pro-max- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads tool-ui-ux-pro-max automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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:
- 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-tailwindif unspecified)
- Search domains (pick 1–3 results per domain, then synthesize):
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-patterns
- 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
FAQ
What does the tool-ui-ux-pro-max skill do?
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.
How do I install tool-ui-ux-pro-max?
Run npx skills add https://github.com/heyvhuang/ship-faster --skill tool-ui-ux-pro-max in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/tool-ui-ux-pro-max/ (personal) or .claude/skills/tool-ui-ux-pro-max/ (project).
Which AI agents can use tool-ui-ux-pro-max?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is tool-ui-ux-pro-max safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains tool-ui-ux-pro-max?
It is published by heyvhuang in heyvhuang/ship-faster. It has 61 recorded installs.
More from heyvhuang/ship-faster
mcp-stripe
heyvhuang/ship-faster
Stripe MCP transaction operations skill. Execute transaction operations via Stripe MCP server (https://mcp.stripe.com): customer management, products/prices, invoices, payment links, subscriptions, refunds, dispute handling, balance queries. Triggers: user requests Stripe operations including create customer, create product, create invoice, generate payment link, query transactions, process refunds, manage subscriptions, view disputes, check balance, etc.
mcp-supabase
heyvhuang/ship-faster
Execute database operations via Supabase MCP (query/write/migration/logs/type generation). Triggers: query/statistics/export/insert/update/delete/fix/backfill/migrate/logs/alerts/type generation. Does not trigger for: pure architecture discussion or code planning. Write operations require confirmation; UPDATE/DELETE without WHERE is refused.
review-doc-consistency
heyvhuang/ship-faster
Open the skill to read its SKILL.md instructions.
tool-ast-grep-rules
heyvhuang/ship-faster
Write AST-based code search and rewrite rules using ast-grep YAML. Create linting rules, code modernizations, and API migrations with auto-fix. Use when the user mentions ast-grep, tree-sitter patterns, code search rules, lint rules with YAML, AST matching, or code refactoring patterns.
tool-openclaw
heyvhuang/ship-faster
Help users install, configure, operate, and migrate OpenClaw (gateway, channels, nodes, plugins, model/auth setup). Use when answering OpenClaw setup/debug questions or model migration questions; use the local docs snapshot bundled with this skill as the source of truth. Triggers: openclaw, clawdbot, clawd, clawdhub, gateway, onboard, channels login, whatsapp, telegram, discord, mattermost, pairing, nodes, sandboxing, tailscale, provider migration, Claude to GPT, model swap.
deep-research
heyvhuang/ship-faster
Research a topic thoroughly in this repo and return a structured summary with file references. Use when you need to understand how something works, find patterns across modules, or audit implementations.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.