AgentSkillsCN

ui-ux-pro-max

UI/UX设计智能工具。囊括50种风格、21组配色方案、50组字体搭配、20种图表样式、8种组件堆叠（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind）。支持：规划、构建、创作、设计、实现、评审、修复、优化、提升、增强、重构、检查UI/UX代码。项目类型：网站、着陆页、仪表盘、管理后台、电商系统、SaaS平台、作品集、博客、移动应用、.html、.tsx、.vue、.svelte。核心元素：按钮、弹窗、导航栏、侧边栏、卡片、表格、表单、图表。风格类别：玻璃质感、黏土质感、极简主义、粗犷主义、新拟物主义、便当格栅、暗黑模式、响应式设计、拟物化设计、扁平化设计。主题领域：配色方案、无障碍访问、动画效果、布局设计、字体排版、字体搭配、间距设计、悬停交互、阴影效果、渐变色彩。

SKILL.md
--- frontmatter
name: ui-ux-pro-max
description: "UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). 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."
allowed-tools: Bash, Read, Write, Edit, Grep, Glob

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:

bash
python3 --version || python --version

If not installed: brew install python3 (macOS), apt install python3 (Ubuntu), winget install Python.Python.3.12 (Windows)

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:

bash
python3 "$HOME/.claude/skills/ui-ux-pro-max/scripts/search.py" "<keyword>" --domain <domain> [-n <max_results>]

Quick domain reference:

  • •product - Style recommendations by product type
  • •style - Detailed style guide (colors, effects)
  • •typography - Font pairings with Google Fonts
  • •color - Color palettes
  • •landing - Page structure, CTA strategies
  • •chart - Chart types and libraries
  • •ux - Best practices, anti-patterns

For full domain details, see reference/search-domains.md

Step 3: Stack Guidelines

If user doesn't specify a stack, default to html-tailwind.

bash
python3 "$HOME/.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

Example Workflow

User request: "Build a landing page for a skincare service"

bash
# 1. Product type
python3 "$HOME/.claude/skills/ui-ux-pro-max/scripts/search.py" "beauty spa wellness service" --domain product

# 2. Style (based on industry)
python3 "$HOME/.claude/skills/ui-ux-pro-max/scripts/search.py" "elegant minimal soft" --domain style

# 3. Typography
python3 "$HOME/.claude/skills/ui-ux-pro-max/scripts/search.py" "elegant luxury" --domain typography

# 4. Color palette
python3 "$HOME/.claude/skills/ui-ux-pro-max/scripts/search.py" "beauty spa wellness" --domain color

# 5. Landing page structure
python3 "$HOME/.claude/skills/ui-ux-pro-max/scripts/search.py" "hero-centric social-proof" --domain landing

# 6. UX guidelines
python3 "$HOME/.claude/skills/ui-ux-pro-max/scripts/search.py" "animation accessibility" --domain ux

# 7. Stack guidelines (default)
python3 "$HOME/.claude/skills/ui-ux-pro-max/scripts/search.py" "layout responsive" --stack html-tailwind

Then: Synthesize all search results and implement the design.

Quick Rules

Icons: Use SVG (Heroicons, Lucide), never emojis as UI icons Hover: Use color/opacity transitions, not scale transforms Cursor: Add cursor-pointer to all clickable elements Contrast: Light mode text minimum slate-600, body slate-900 Transitions: 150-300ms, never instant or >500ms

For complete rules and pre-delivery checklist, see reference/common-rules.md