ui-ux-pro-max
npx machina-cli add skill guanyang/antigravity-skills/ui-ux-pro-max --openclawFiles (1)
SKILL.md
8.5 KB
UI/UX Pro Max - Design Intelligence
Searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices.
Prerequisites
Check if Python is installed:
python3 --version || python --version
If Python is not installed, install it based on user's OS:
macOS:
brew install python3
Ubuntu/Debian:
sudo apt update && sudo apt install python3
Windows:
winget install Python.Python.3.12
How to Use This Skill
When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
Step 1: Analyze User Requirements
Extract key information from user request:
- Product type: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
- Style keywords: minimal, playful, professional, elegant, dark mode, etc.
- Industry: healthcare, fintech, gaming, education, etc.
- Stack: React, Vue, Next.js, or default to
html-tailwind
Step 2: Search Relevant Domains
Use search.py multiple times to gather comprehensive information. Search until you have enough context.
python3 scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
Recommended search order:
- Product - Get style recommendations for product type
- Style - Get detailed style guide (colors, effects, frameworks)
- Typography - Get font pairings with Google Fonts imports
- Color - Get color palette (Primary, Secondary, CTA, Background, Text, Border)
- Landing - Get page structure (if landing page)
- Chart - Get chart recommendations (if dashboard/analytics)
- UX - Get best practices and anti-patterns
- Stack - Get stack-specific guidelines (default: html-tailwind)
Step 3: Stack Guidelines (Default: html-tailwind)
If user doesn't specify a stack, default to html-tailwind.
python3 scripts/search.py "<keyword>" --stack html-tailwind
Available stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter
Search Reference
Available Domains
| 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 |
prompt | AI prompts, CSS keywords | (style name) |
Available Stacks
| 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 |
Example Workflow
User request: "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
AI should:
# 1. Search product type
python3 scripts/search.py "beauty spa wellness service" --domain product
# 2. Search style (based on industry: beauty, elegant)
python3 scripts/search.py "elegant minimal soft" --domain style
# 3. Search typography
python3 scripts/search.py "elegant luxury" --domain typography
# 4. Search color palette
python3 scripts/search.py "beauty spa wellness" --domain color
# 5. Search landing page structure
python3 scripts/search.py "hero-centric social-proof" --domain landing
# 6. Search UX guidelines
python3 scripts/search.py "animation" --domain ux
python3 scripts/search.py "accessibility" --domain ux
# 7. Search stack guidelines (default: html-tailwind)
python3 scripts/search.py "layout responsive" --stack html-tailwind
Then: Synthesize all search results and implement the design.
Tips for Better Results
- Be specific with keywords - "healthcare SaaS dashboard" > "app"
- Search multiple times - Different keywords reveal different insights
- Combine domains - Style + Typography + Color = Complete design system
- Always check UX - Search "animation", "z-index", "accessibility" for common issues
- Use stack flag - Get implementation-specific best practices
- Iterate - If first search doesn't match, try different keywords
Common Rules for Professional UI
These are frequently overlooked issues that make UI look unprofessional:
Icons & Visual Elements
| 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 |
Interaction & Cursor
| 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) |
Light/Dark Mode Contrast
| 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) |
Layout & Spacing
| 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 |
Pre-Delivery Checklist
Before delivering UI code, verify these items:
Visual Quality
- No emojis used as icons (use SVG instead)
- All icons from consistent icon set (Heroicons/Lucide)
- Brand logos are correct (verified from Simple Icons)
- Hover states don't cause layout shift
- Use theme colors directly (bg-primary) not var() wrapper
Interaction
- All clickable elements have
cursor-pointer - Hover states provide clear visual feedback
- Transitions are smooth (150-300ms)
- Focus states visible for keyboard navigation
Light/Dark Mode
- Light mode text has sufficient contrast (4.5:1 minimum)
- Glass/transparent elements visible in light mode
- Borders visible in both modes
- Test both modes before delivery
Layout
- Floating elements have proper spacing from edges
- No content hidden behind fixed navbars
- Responsive at 320px, 768px, 1024px, 1440px
- No horizontal scroll on mobile
Accessibility
- All images have alt text
- Form inputs have labels
- Color is not the only indicator
-
prefers-reduced-motionrespected
Source
git clone https://github.com/guanyang/antigravity-skills/blob/main/skills/ui-ux-pro-max/SKILL.mdView on GitHub Overview
UI/UX Pro Max is a searchable database that consolidates UI styles, color palettes, font pairings, chart types, and UX guidelines. It offers stack-specific guidance for eight popular frameworks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind) and supports projects from websites and dashboards to mobile apps. Use it to plan, design, implement, review, and refine UI/UX code with confidence.
How This Skill Works
How it works: 1) Analyze the user’s requirements (product type, style keywords, industry, and stack). 2) Gather context by querying relevant domains (Product, Style, Typography, Color, Landing, Chart, UX, Stack) with search.py to build a design brief. 3) Apply the appropriate stack guidelines (default to html-tailwind if no stack is specified) to generate ready-to-use UI/UX assets and guidance.
When to Use It
- Kick off a SaaS dashboard UI with branding, color palette, and typography guidance.
- Design a responsive landing page using glassmorphism or minimalism and a Tailwind-backed stack.
- Audit or refactor an admin panel (React/Next.js) for accessibility, spacing, and interactive states.
- Create a portfolio site or blog with curated font pairings and layout best practices.
- Revamp an e-commerce product page or mobile app prototype with charts and component patterns.
Quick Start
- Step 1: Analyze user requirements (product type, style keywords, industry, and stack).
- Step 2: Run domain searches with: python3 scripts/search.py "<keyword>" --domain <domain> (repeat for product, style, typography, color, landing, chart, ux, stack).
- Step 3: Apply stack guidelines (default to html-tailwind) and begin design, implementation, or review.
Best Practices
- Define product type, target audience, and style keywords before starting.
- Use the search sequence (Product, Style, Typography, Color, Landing, Chart, UX, Stack) to gather context.
- Default to html-tailwind when no stack is specified and apply stack-specific guidelines.
- Prioritize accessibility, responsive design, and clear typography/spacing.
- Validate designs with real content and iterative reviews across stakeholders.
Example Use Cases
- SaaS dashboard built with Next.js using a glassy color palette and curated font pairings.
- Marketing landing page designed with minimalism and Tailwind-based components.
- Admin panel created in Vue with dark mode and material-like card layouts.
- Portfolio site built with Svelte and typography-driven layouts for readability.
- E-commerce product page prototype featuring charts, cards, and responsive grid.
Frequently Asked Questions
Add this skill to your agents
