ui-ux-pro-max
- Repo stars 63
- Author updated Live
- Author repo WeAgentChat
- Domain
- Design
- Compatible agents
-
- Claude Code
- Cursor
- Cline
- Codex
- Windsurf
- Gemini CLI
- +20
- Trust score
- 88 / 100 · community maintained
- Author / version / license
- @0000005 · no license declared
- Token usage
- Lean
- Setup complexity
- Guided setup
- External API key
- Not required
- Operating systems
- macOS · Linux · Windows
- Runtime requirements
- Python
- Permissions
-
- Read-only
- Write / modify
- Shell exec
- Network behavior
- Local-only
- Install commands
- 26 variants
Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.
Heads up: 未限定 allowed-tools,默认拥有全部工具权限。
---
name: ui-ux-pro-max
description: UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React…
category: design
runtime: Python
---
# ui-ux-pro-max output preview
## PART A: Task fit
- Use case: 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..
- Inputs: target material, constraints, expected output, and acceptance criteria.
- Evidence boundary: follow “Prerequisites / How to Use This Skill / Step 1: Analyze User Requirements” and do not present inference as author intent.
## PART B: Execution result
- **01** The card summarizes the use case; runtime output centers on “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.”.
- **02** When the source has headings, the agent prioritizes “Prerequisites / How to Use This Skill / Step 1: Analyze User Requirements” so the result follows the author’s structure.
- **03** Typical output includes task judgment, concrete steps, required commands or file edits, validation, and follow-up options.
- **04** Risk context follows the fingerprint: read files, write/modify files, run shell commands; mostly runs locally; usually needs no extra API key.
## Running Rules
- read files, write/modify files, run shell commands; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding scope.
- Return the result, validation criteria, and next iteration options. The source does not require a stable slash command. After installation, invoke the skill by name and describe the task.
Name target files or source material, expected output, forbidden changes, and whether network or shell access is allowed. Permission fingerprint: read files, write/modify files, run shell commands.
Start with a small task and check whether the result follows “Prerequisites / How to Use This Skill / Step 1: Analyze User Requirements”. Inspect diffs, logs, previews, or tests before expanding scope.
Confirm the final output includes a concrete result, evidence, and next action. If it stays generic, tighten inputs, boundaries, and acceptance criteria.
---
name: ui-ux-pro-max
description: UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React…
category: design
source: 0000005/WeAgentChat
---
# ui-ux-pro-max
## When to use
- UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte…
- Use it when the task has clear inputs, repeatable steps, and validation criteria.
## What to provide
- Target material, scope, expected result, and forbidden changes.
- Whether network, commands, file writes, or external services are allowed.
## Execution rules
- Organize steps around “Prerequisites / How to Use This Skill / Step 1: Analyze User Requirements” and keep inference separate from source facts.
- read files, write/modify files, run shell commands; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding the task.
## Output requirements
- Return the deliverable, key evidence, validation method, and next action.
- Mark missing information as unknown; do not invent commands, platforms, or dependencies. The author source anchors workflow facts; repository files anchor sources and commands; Fluxly only adds fit, limitations, and quality judgment.
skill "ui-ux-pro-max" {
input -> user goal + target files + boundaries + acceptance criteria
context -> Prerequisites / How to Use This Skill / Step 1: Analyze User Requirements
rules -> SKILL.md triggers / order / output contract
runtime -> Python | read files, write/modify files, run shell commands | mostly runs locally
guardrails -> usually needs no extra API key + small-sample validation + diff/log review
output -> copyable result + checklist + next iteration
} 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 .codex/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 .codex/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 .codex/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
# 2. Search style (based on industry: beauty, elegant)
python3 .codex/skills/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style
# 3. Search typography
python3 .codex/skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
# 4. Search color palette
python3 .codex/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color
# 5. Search landing page structure
python3 .codex/skills/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing
# 6. Search UX guidelines
python3 .codex/skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux
python3 .codex/skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
# 7. Search stack guidelines (default: html-tailwind)
python3 .codex/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
- Split Into Multiple Files - For better maintainability:
- Separate components into individual files (e.g.,
Header.tsx,Footer.tsx) - Extract reusable styles into dedicated files
- Keep each file focused and under 200-300 lines
- Separate components into individual files (e.g.,
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)
Decide Fit First
Design Intent
How To Use It
Boundaries And Review