HeyvhuangHeyvhuang/ship-faster/skills/tool-ui-ux-pro-max/SKILL.md

tool-ui-ux-pro-max

Skill337 starsChanged 10 months agoMITView on GitHub

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.

In this repository40 other files it gives its agents.
- review-clean-codeSkill
- review-doc-consistencySkill
- review-merge-readinessSkill
- workflow-execute-plansSkill
- workflow-template-extractorSkill
- workflow-template-seederSkill
- cloudflareSkill
- deep-researchSkill
- mcp-cloudflareSkill
- mcp-stripeSkill
- mcp-supabaseSkill
- publish-x-articleSkill
- review-clean-codeSkill
- review-doc-consistencySkill
- review-merge-readinessSkill
- review-qualitySkill
- review-react-best-practicesSkill
- review-seo-auditSkill
- skill-creatorSkill
- skill-evolutionSkill
- skill-improverSkill
- stripeSkill
- supabaseSkill
- tool-ast-grep-rulesSkill
- tool-better-authSkill
- tool-design-style-selectorSkill
- tool-hooks-doctorSkill
- tool-openclawSkill
- tool-programmatic-seoSkill
- tool-schema-markupSkill
- tool-systematic-debuggingSkill
- tool-x-article-publisherSkill
- workflow-brainstormSkill
- workflow-creatorSkill
- workflow-execute-plansSkill
- workflow-feature-shipperSkill
- workflow-project-intakeSkill
- workflow-ship-fasterSkill
- workflow-template-extractorSkill
- workflow-template-seederSkill

The file

We split this skill into the rules it gives an agent

5 rules. About 0 are common, 5 are distinctive, and 0 are very specific to this project.

≈0
Common · estimate
Many files like this have a rule of this kind.
≈5
Distinctive · estimate
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Distinctive:
Use it to quickly retrieve concrete inputs (palette tokens, typography pairings, UX constraints, stack-specific implementation notes) that …
line 10
Distinctive:
Ensure Python is available:
line 17
Distinctive:
When asked to design / improve UI, do this:
line 42
Distinctive:
Search domains (pick 1–3 results per domain, then synthesize):
line 50
Distinctive:
Search by stack to ground decisions in implementation constraints:
line 59

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

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:

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)

Search domains (pick 1–3 results per domain, then synthesize):

product — product type → style direction
style — 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

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free