ui-ux-pro-max
UI/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.
- Installs
- 92
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/joneqian/claude-skills-suite --skill ui-ux-pro-max- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads ui-ux-pro-max automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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 .claude/skills/ui-ux-pro-max/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 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
Available stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn
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 |
shadcn | shadcn/ui components, theming, forms, patterns |
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 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
# 2. Search style (based on industry: beauty, elegant)
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style
# 3. Search typography
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
# 4. Search color palette
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color
# 5. Search landing page structure
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing
# 6. Search UX guidelines
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
# 7. Search stack guidelines (default: html-tailwind)
python3 .claude/skills/ui-ux-pro-max/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
Related
- Agent:
ui-ux-designer- Full design specification workflow (PRD analysis → design strategy → DESIGN_SPEC.md)
FAQ
What does the ui-ux-pro-max skill do?
UI/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.
How do I install ui-ux-pro-max?
Run npx skills add https://github.com/joneqian/claude-skills-suite --skill ui-ux-pro-max in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/ui-ux-pro-max/ (personal) or .claude/skills/ui-ux-pro-max/ (project).
Which AI agents can use ui-ux-pro-max?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is ui-ux-pro-max safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains ui-ux-pro-max?
It is published by joneqian in joneqian/claude-skills-suite. It has 92 recorded installs.
More from joneqian/claude-skills-suite
wechat-miniprogram
joneqian/claude-skills-suite
WeChat Mini Program development framework. Use for building WeChat mini apps, WXML templates, WXSS styles, WXS scripting, component development, and WeChat API integration.
tdesign-miniprogram
joneqian/claude-skills-suite
Open the skill to read its SKILL.md instructions.
mysql-patterns
joneqian/claude-skills-suite
Open the skill to read its SKILL.md instructions.
sequelize-patterns
joneqian/claude-skills-suite
Sequelize Node.js ORM for SQL databases. Use for database models, migrations, associations, queries, transactions, validations, hooks, and working with PostgreSQL, MySQL, MariaDB, SQLite, SQL Server.
backend-patterns
joneqian/claude-skills-suite
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, NestJS, FastAPI, and Next.js API routes.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.