ui-ux-pro-max-2UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
Install via ClawdBot CLI:
clawdbot install ahump20/ui-ux-pro-max-2Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks. Searchable database with priority-based recommendations.
Reference these guidelines when:
| 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 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 accessibilitySearch specific domains using the CLI tool below.
Check if Python is installed:
python3 --version || python --versionIf Python is not installed, install it based on user's OS:
macOS:
brew install python3Ubuntu/Debian:
sudo apt update && sudo apt install python3Windows:
winget install Python.Python.3.12When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
Extract key information from user request:
html-tailwindAlways start with --design-system to get comprehensive recommendations with reasoning:
python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]This command:
ui-reasoning.csv to select best matchesExample:
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"To save the design system for hierarchical retrieval across sessions, add --persist:
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"This creates:
design-system/MASTER.md — Global Source of Truth with all design rulesdesign-system/pages/ — Folder for page-specific overridesWith page-specific override:
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"This also creates:
design-system/pages/dashboard.md — Page-specific deviations from MasterHow hierarchical retrieval works:
design-system/pages/checkout.mddesign-system/MASTER.md exclusivelyContext-aware retrieval prompt:
I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...After getting the design system, use domain searches to get additional details:
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]When to use detailed searches:
| 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. If user doesn't specify a stack, default to html-tailwind.
python3 skills/ui-ux-pro-max/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, beauty, service |
| style | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
| typography | Font pairings, Google Fonts | elegant, playful, professional, modern |
| color | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
| landing | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
| chart | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
| ux | Best practices, anti-patterns | animation, accessibility, z-index, loading |
| react | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache |
| web | Web interface guidelines | aria, focus, keyboard, semantic, virtualize |
| 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, patterns |
| jetpack-compose | Composables, Modifiers, State Hoisting, Recomposition |
User request: "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"Output: Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
# Get UX guidelines for animation and accessibility
python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux
# Get alternative typography options if needed
python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typographypython3 skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwindThen: Synthesize design system + detailed searches and implement the design.
The --design-system flag supports two output formats:
# ASCII box (default) - best for terminal display
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
# Markdown - best for documentation
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdownThese are frequently overlooked issues that make UI look unprofessional:
| Rule | Do | Don't |
|------|----|----- |
| No emoji icons | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons |
| Stable hover states | Use color/opacity transitions on hover | Use scale transforms that shift layout |
| Correct brand logos | Research official SVG from Simple Icons | Guess or use incorrect logo paths |
| Consistent icon sizing | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
| Rule | Do | Don't |
|------|----|----- |
| Cursor pointer | Add cursor-pointer to all clickable/hoverable cards | Leave default cursor on interactive elements |
| Hover feedback | Provide visual feedback (color, shadow, border) | No indication element is interactive |
| Smooth transitions | Use transition-colors duration-200 | Instant state changes or too slow (>500ms) |
| Rule | Do | Don't |
|------|----|----- |
| Glass card light mode | Use bg-white/80 or higher opacity | Use bg-white/10 (too transparent) |
| Text contrast light | Use #0F172A (slate-900) for text | Use #94A3B8 (slate-400) for body text |
| Muted text light | Use #475569 (slate-600) minimum | Use gray-400 or lighter |
| Border visibility | Use border-gray-200 in light mode | Use border-white/10 (invisible) |
| Rule | Do | Don't |
|------|----|----- |
| Floating navbar | Add top-4 left-4 right-4 spacing | Stick navbar to top-0 left-0 right-0 |
| Content padding | Account for fixed navbar height | Let content hide behind fixed elements |
| Consistent max-width | Use same max-w-6xl or max-w-7xl | Mix different container widths |
Before delivering UI code, verify these items:
cursor-pointerprefers-reduced-motion respectedGenerated Mar 1, 2026
Redesigning a product listing and checkout flow for an online retailer to improve conversion rates and mobile responsiveness. Focus on implementing accessibility guidelines, optimizing touch targets for mobile users, and selecting a color palette that enhances product visibility and brand consistency.
Building a data-heavy admin dashboard for a B2B software service, requiring clear chart visualizations and intuitive navigation. Emphasis on performance optimization for loading large datasets, responsive layout for various screen sizes, and typography that ensures readability of complex information.
Creating a mobile app for patients to schedule medical appointments, with a focus on accessibility for users with disabilities and a calming, professional design style. Key tasks include implementing high-contrast color palettes, ensuring keyboard navigation, and designing forms with clear error feedback.
Designing a visually striking portfolio site to showcase agency work, using styles like glassmorphism or minimalism to highlight projects. Involves selecting font pairings that reflect creativity, optimizing images for fast loading, and ensuring responsive design across devices to attract potential clients.
Developing a secure and user-friendly mobile banking app with features like transaction history and budget tracking. Prioritizes touch interaction guidelines for ease of use, performance optimization for real-time data updates, and adherence to accessibility standards to serve a diverse user base.
Offering a UI/UX design tool or component library with monthly or annual subscriptions, targeting startups and enterprises. Revenue is generated through tiered pricing plans based on features like advanced analytics or premium templates, with potential upsells for custom integrations.
Providing free basic design audits and guidelines to attract clients, with paid services for in-depth reviews, custom design systems, or implementation support. Revenue comes from one-time project fees or retainer agreements for ongoing optimization and maintenance.
Operating a platform where developers can buy and sell pre-built UI components, templates, or design assets, with a focus on accessibility and modern stacks like React or Vue. Revenue is generated through commission on sales, premium listings, or subscription access to exclusive resources.
💬 Integration Tip
Leverage the shadcn/ui MCP integration to quickly search for and implement pre-built components, ensuring consistency and saving development time while adhering to the design system's guidelines.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.
AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.