enuno/tool-ui-ux-pro-max
skills/ship-faster/skills/tool-ui-ux-pro-max/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add enuno/claude-command-and-control tool-ui-ux-pro-maxInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 4, 2026, 7:36 PM8.4s3 files scanned
SKILL.md
- name:
- tool-ui-ux-pro-max
- description:
- 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.
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
Related Skills
enuno/mempalace
tools
VerifiedTrustedCommunity
MemPalace local-first AI memory system. Use when setting up persistent memory for Claude Code sessions, mining project files or conversation transcripts, querying past context, configuring MCP tools, managing the knowledge graph, or troubleshooting palace operations.
12SKILL.mdUpdated May 26, 2026
enuno/langsmith
tools
VerifiedTrustedCommunity
LangSmith Python SDK — trace, evaluate, and monitor LLM applications. Covers @traceable decorator, trace context manager, Client API, evaluate() / aevaluate(), comparative evaluation, custom evaluators, dataset management, prompt caching, ASGI middleware, and pytest plugin.
12SKILL.mdUpdated May 26, 2026
enuno/langgraph
development
VerifiedTrustedCommunity
LangGraph (Python) — build stateful, controllable agent graphs with checkpointing, streaming, persistence, interrupts, fault tolerance, and durable execution. Covers both Graph API (StateGraph) and Functional API (@entrypoint/@task).
12SKILL.mdUpdated May 26, 2026
enuno/langgraph-graph-api
development
VerifiedTrustedCommunity
LangGraph Graph API (Python) — build explicit DAG agent workflows with StateGraph, typed state, nodes, edges, Command routing, Send fan-out, checkpointers, interrupts, and streaming. Use when you need explicit control flow and graph topology.
12SKILL.mdUpdated May 26, 2026