메뉴
Searchable UI/UX design databases: 50+ styles, 97 palettes, 57 font pairings, 99 UX rules, 25 chart types. CLI generates design systems from natural language. Data-driven complement to ui-design.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
REST and GraphQL API design principles — resource modeling, HTTP semantics, pagination, error handling, HATEOAS, schema design, and DataLoader patterns. Use when designing new APIs, reviewing specs, or establishing team API standards.
Meta-skill that orchestrates the full API development lifecycle — from design through documentation — by coordinating specialized skills, agents, and commands into a seamless build workflow.
API versioning strategies — URL path, header, query param, content negotiation — with breaking change classification, deprecation timelines, migration patterns, and multi-version support. Use when evolving APIs, planning breaking changes, or managing version lifecycles.
Authentication and authorization patterns — JWT, OAuth 2.0, sessions, RBAC/ABAC, password security, MFA, and vulnerability prevention. Use when implementing login flows, protecting routes, managing tokens, or auditing auth security.
Caching strategies, invalidation, eviction policies, HTTP caching, distributed caching, and anti-patterns. Use when designing cache layers, choosing eviction policies, debugging stale data, or optimizing read-heavy workloads.
Safe, zero-downtime database migration strategies — schema evolution, rollback planning, data migration, tooling, and anti-pattern avoidance for production systems. Use when planning schema changes, writing migrations, or reviewing migration safety.
| name | ui-ux-pro-max |
| model | fast |
| version | 1.1.0 |
| description | Searchable UI/UX design databases: 50+ styles, 97 palettes, 57 font pairings, 99 UX rules, 25 chart types. CLI generates design systems from natural language. Data-driven complement to ui-design. |
| tags | ["design","ui","ux","color","typography","style","accessibility","charts"] |
| related | ["ui-design","frontend-design","web-design"] |
Searchable design database with CLI for generating complete design systems from natural language queries.
See also:
ui-designfor fundamentals and decision-making. This skill provides data-driven recommendations via CLI.
| Priority | Category | Impact | Domain |
|---|---|---|---|
| 1 | Accessibility | CRITICAL | ux |
| 2 | Touch & Interaction | CRITICAL | ux |
| 3 | Performance | HIGH | ux |
| 4 | Layout & Responsive | HIGH | ux |
| 5 | Typography & Color | MEDIUM | typography, color |
| 6 | Animation | MEDIUM | ux |
| 7 | Style Selection | MEDIUM | style, product |
| 8 | Charts & Data | LOW | chart |
color-contrast — Minimum 4.5:1 ratio for normal textfocus-states — Visible focus rings on interactive elementsalt-text — Descriptive alt text for meaningful imagesaria-labels — aria-label for icon-only buttonskeyboard-nav — Tab order matches visual orderform-labels — Use label with for attributetouch-target-size — Minimum 44x44px touch targetshover-vs-tap — Use click/tap for primary interactionsloading-buttons — Disable button during async operationserror-feedback — Clear error messages near the problemcursor-pointer — Add cursor-pointer to clickable elementsimage-optimization — Use WebP, srcset, lazy loadingreduced-motion — Check prefers-reduced-motioncontent-jumping — Reserve space for async contentviewport-meta — width=device-width initial-scale=1readable-font-size — Minimum 16px body text on mobilehorizontal-scroll — Ensure content fits viewport widthz-index-management — Define z-index scale (10, 20, 30, 50)line-height — Use 1.5-1.75 for body textline-length — Limit to 65-75 characters per linefont-pairing — Match heading/body font personalitiesduration-timing — Use 150-300ms for micro-interactionstransform-performance — Use transform/opacity, not width/heightloading-states — Skeleton screens or spinnersstyle-match — Match style to product typeconsistency — Use same style across all pagesno-emoji-icons — Use SVG icons, not emojischart-type — Match chart type to data typecolor-guidance — Use accessible color palettesdata-table — Provide table alternative for accessibilitynpx clawhub@latest install ui-ux-pro-max
Python 3 is required for the search CLI.
python3 --version
When a user requests UI/UX work (design, build, create, implement, review, fix, improve), follow these steps.
Extract from the user request:
html-tailwindAlways start with --design-system to get comprehensive recommendations:
python3 scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
This searches 5 domains in parallel (product, style, color, landing, typography), applies reasoning rules from ui-reasoning.csv, and returns a complete design system: pattern, style, colors, typography, effects, and anti-patterns.
Example:
python3 scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
Save the design system for hierarchical retrieval across sessions:
python3 scripts/search.py "<query>" --design-system --persist -p "Project Name"
Creates:
design-system/MASTER.md — Global source of truthdesign-system/pages/ — Folder for page-specific overridesWith page override:
python3 scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
Hierarchical retrieval: When building a specific page, check design-system/pages/<page>.md first. If it exists, its rules override the Master file. Otherwise use design-system/MASTER.md exclusively.
After generating the design system, use domain searches for additional detail:
python3 scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
| Need | Domain | Example |
|---|---|---|
| More style options | style | --domain style "glassmorphism dark" |
| Chart recommendations | chart | --domain chart "real-time dashboard" |
| UX best practices | ux | --domain ux "animation accessibility" |
| Alternative fonts | typography | --domain typography "elegant luxury" |
| Landing structure | landing | --domain landing "hero social-proof" |
Get implementation-specific best practices. Default to html-tailwind if unspecified.
python3 scripts/search.py "<keyword>" --stack html-tailwind
Available stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose
| Domain | Use For | Example Keywords |
|---|---|---|
product | Product type recommendations | SaaS, e-commerce, portfolio, healthcare |
style | UI styles, colors, effects | glassmorphism, minimalism, dark mode |
typography | Font pairings, Google Fonts | elegant, playful, professional |
color | Color palettes by product type | saas, ecommerce, healthcare, fintech |
landing | Page structure, CTA strategies | hero, testimonial, pricing, social-proof |
chart | Chart types, library recs | trend, comparison, timeline, funnel |
ux | Best practices, anti-patterns | animation, accessibility, z-index |
react | React/Next.js performance | waterfall, bundle, suspense, memo |
web | Web interface guidelines | aria, focus, keyboard, semantic |
prompt | AI prompts, CSS keywords | (style name) |
| Stack | Focus |
|---|---|
html-tailwind | Tailwind utilities, responsive, a11y (DEFAULT) |
react | State, hooks, performance, patterns |
nextjs | SSR, routing, images, API routes |
vue | Composition API, Pinia, Vue Router |
svelte | Runes, stores, SvelteKit |
swiftui | Views, State, Navigation, Animation |
react-native | Components, Navigation, Lists |
flutter | Widgets, State, Layout, Theming |
shadcn | shadcn/ui components, theming, forms |
jetpack-compose | Composables, Modifiers, State Hoisting |
# ASCII box (default) — best for terminal display
python3 scripts/search.py "fintech crypto" --design-system
# Markdown — best for documentation
python3 scripts/search.py "fintech crypto" --design-system -f markdown
User request: "Build a landing page for a professional skincare service"
Step 1 — Analyze: Beauty/Spa service, elegant/professional, html-tailwind default.
Step 2 — Design system:
python3 scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
Step 3 — Supplement:
python3 scripts/search.py "animation accessibility" --domain ux
python3 scripts/search.py "elegant luxury serif" --domain typography
Step 4 — Stack:
python3 scripts/search.py "layout responsive form" --stack html-tailwind
Then synthesize design system + detailed searches and implement.
| Rule | Do | Don't |
|---|---|---|
| No emoji icons | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis as UI icons |
| Stable hover states | Use color/opacity transitions | Use scale transforms that shift layout |
| Correct brand logos | Research official SVG from Simple Icons | Guess or use incorrect logo paths |
| Consistent icon sizing | Fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes |
| Rule | Do | Don't |
|---|---|---|
| Cursor pointer | cursor-pointer on all clickable elements | Leave default cursor on interactive elements |
| Hover feedback | Visual feedback (color, shadow, border) | No indication element is interactive |
| Smooth transitions | transition-colors duration-200 | Instant changes or >500ms |
| Rule | Do | Don't |
|---|---|---|
| Glass card (light) | bg-white/80 or higher opacity | bg-white/10 (too transparent) |
| Text contrast (light) | #0F172A (slate-900) for text | #94A3B8 (slate-400) for body text |
| Muted text (light) | #475569 (slate-600) minimum | gray-400 or lighter |
| Border visibility | border-gray-200 in light mode | border-white/10 (invisible) |
| Rule | Do | Don't |
|---|---|---|
| Floating navbar | top-4 left-4 right-4 spacing | Stick to top-0 left-0 right-0 |
| Content padding | Account for fixed navbar height | Let content hide behind fixed elements |
| Consistent max-width | Same max-w-6xl or max-w-7xl | Mix different container widths |
bg-primary not var() wrapper)cursor-pointerprefers-reduced-motion respected