ui-uxSearchable 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.
Install via ClawdBot CLI:
clawdbot install wpank/ui-uxSearchable design database with CLI for generating complete design systems from natural language queries.
See also: ui-design for 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-maxPython 3 is required for the search CLI.
python3 --versionWhen 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/ 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-tailwindAvailable 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 markdownUser 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 typographyStep 4 β Stack:
python3 scripts/search.py "layout responsive form" --stack html-tailwindThen 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 respectedGenerated Feb 27, 2026
A fintech company wants to redesign its user dashboard to improve data visualization and accessibility. The skill generates a design system with accessible color palettes and recommends chart types for real-time metrics, ensuring compliance with WCAG standards.
An online retailer needs a high-converting landing page for a new product launch. The skill provides style recommendations for a playful yet professional look, optimizes layout for mobile responsiveness, and includes touch interaction rules for better user engagement.
A healthcare provider is building a patient portal with strict accessibility requirements. The skill prioritizes critical UX rules like keyboard navigation and alt-text, generates a design system focused on clarity, and ensures performance optimizations for loading medical data.
An edtech startup wants to review its learning platform for UX issues before launch. The skill analyzes the code for common pitfalls like content jumping and poor font pairing, offering data-driven fixes to enhance readability and user retention.
A gaming company seeks to improve its mobile app's interface with dark mode and smooth animations. The skill recommends style selections for an immersive experience, applies performance rules for reduced motion, and ensures touch targets are adequate for gameplay.
This model involves offering the skill as part of a monthly subscription for design teams, providing continuous updates to the UI/UX database and CLI tools. Revenue is generated through tiered pricing based on usage and support levels.
Offer basic design system generation for free, with advanced features like persistent storage and domain-specific searches behind a paywall. Revenue comes from upgrades and one-time purchases for premium CLI functionalities.
Provide custom integration services for businesses needing tailored UI/UX solutions, using the skill as a foundation. Revenue is project-based, with fees for implementation, training, and ongoing maintenance support.
π¬ Integration Tip
Ensure Python 3 is installed for CLI functionality and use the --persist flag to save design systems for consistent project-wide retrieval across sessions.
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
Build scalable, themable Tailwind CSS component libraries using CVA for variants, compound components, design tokens, dark mode, and responsive grids.
Create award-winning, memorable websites with advanced animations, creative interactions, and distinctive visual experiences. Use this skill when building sites that need to be exceptionalβportfolio sites, agency showcases, product launches, or any project where "wow factor" matters.
Professional Figma design analysis and asset export. Use for extracting design data, exporting assets in multiple formats, auditing accessibility compliance, analyzing design systems, and generating comprehensive design documentation. Read-only analysis of Figma files with powerful export and reporting capabilities.
Create logos, interfaces, and visual systems with principles of hierarchy, branding, and usability.
Generate and serve live HTML/CSS/JS UI designs from natural language prompts. Use when the user asks to design, create, build, or prototype a website, landing page, UI, dashboard, web page, or frontend mockup. Also triggers on requests to update, tweak, or iterate on a previously generated design. Replaces traditional UI design + frontend dev workflow.