AgentSkillsCN

ui-ux-pro-max

UI/UX 设计智能助手。内置 50 种风格、21 套配色方案、50 组字体搭配、20 种图表样式、9 大框架（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui）。支持规划、搭建、创作、设计、实施、评审、修复、优化、提升、重构、校验 UI/UX 代码等操作。适用项目包括：网站、着陆页、仪表盘、管理后台、电商系统、SaaS 平台、作品集、博客、移动应用，以及 .html、.tsx、.vue、.svelte 等多种前端技术。涉及元素包括：按钮、模态框、导航栏、侧边栏、卡片、表格、表单、图表等。风格涵盖：玻璃质感、黏土质感、极简主义、粗犷主义、新拟物主义、便当格栅、深色模式、响应式设计、拟物化设计、扁平化设计。主题则囊括：配色方案、无障碍设计、动画效果、布局设计、字体排版、字体搭配、间距设计、悬停交互、阴影效果、渐变色彩等。集成 shadcn/ui MCP，提供组件搜索与示例参考。

SKILL.md
--- frontmatter
name: ui-ux-pro-max
description: "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."

UI/UX Pro Max - Design Intelligence

Comprehensive 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.

🛡️ Advanced Workflows (防卡死协议)

The "Overhaul" Protocol (重构/焕然一新)

WARNING: 当用户要求 "焕然一新" 或重构整个大文件时，一次性输出会触发 Token 限制导致无响应。必须 分步执行。

Phase 1: CSS Injection (样式注入)

  • •仅重写 <style> 标签或 CSS 文件。
  • •引入新的 Design Tokens (颜色、圆角、阴影)。
  • •Output: 仅 CSS 代码块。

Phase 2: HTML Structural Update (结构调整)

  • •更新头部引用 (Google Fonts, Icons)。
  • •调整核心布局容器 (Card, Grid)。
  • •Output: 关键 HTML 片段替换 (使用 search/replace)。

Phase 3: Content Polish (内容润色)

  • •更新文案 (Emoji, Micro-copy)。
  • •优化交互脚本 (JS)。
  • •Outcome: 最终的 Polish。

Forbidden Actions:

  • •❌ 禁止一次性输出整个 <html>...</html> 文件的代码块 (除非文件 < 100 行)。
  • •❌ 禁止在 Phase 1 中修改 JavaScript 逻辑。

When to Apply

Reference these guidelines when:

  • •Designing new UI components or pages
  • •Choosing color palettes and typography
  • •Reviewing code for UX issues
  • •Building landing pages or dashboards
  • •Implementing accessibility requirements

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.

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

Recommended search order:

  1. •Product - Get style recommendations for product type
  2. •Style - Get detailed style guide (colors, effects, frameworks)
  3. •Typography - Get font pairings with Google Fonts imports
  4. •Color - Get color palette (Primary, Secondary, CTA, Background, Text, Border)
  5. •Landing - Get page structure (if landing page)
  6. •Chart - Get chart recommendations (if dashboard/analytics)
  7. •UX - Get best practices and anti-patterns
  8. •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.

bash
python3 .agent/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

DomainUse ForExample Keywords
productProduct type recommendationsSaaS, e-commerce, portfolio, healthcare, beauty, service
styleUI styles, colors, effectsglassmorphism, minimalism, dark mode, brutalism
typographyFont pairings, Google Fontselegant, playful, professional, modern
colorColor palettes by product typesaas, ecommerce, healthcare, beauty, fintech, service
landingPage structure, CTA strategieshero, hero-centric, testimonial, pricing, social-proof
chartChart types, library recommendationstrend, comparison, timeline, funnel, pie
uxBest practices, anti-patternsanimation, accessibility, z-index, loading
reactReact/Next.js performancewaterfall, bundle, suspense, memo, rerender, cache
webWeb interface guidelinesaria, focus, keyboard, semantic, virtualize
promptAI prompts, CSS keywords(style name)

Available Stacks

StackFocus
html-tailwindTailwind utilities, responsive, a11y (DEFAULT)
reactState, hooks, performance, patterns
nextjsSSR, routing, images, API routes
vueComposition API, Pinia, Vue Router
svelteRunes, stores, SvelteKit
swiftuiViews, State, Navigation, Animation
react-nativeComponents, Navigation, Lists
flutterWidgets, State, Layout, Theming
shadcnshadcn/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:

bash
# 1. Search product type
python3 .agent/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product

# 2. Search style (based on industry: beauty, elegant)
python3 .agent/skills/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style

# 3. Search typography
python3 .agent/skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography

# 4. Search color palette
python3 .agent/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color

# 5. Search landing page structure
python3 .agent/skills/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing

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

# 7. Search stack guidelines (default: html-tailwind)
python3 .agent/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

  1. •Be specific with keywords - "healthcare SaaS dashboard" > "app"
  2. •Search multiple times - Different keywords reveal different insights
  3. •Combine domains - Style + Typography + Color = Complete design system
  4. •Always check UX - Search "animation", "z-index", "accessibility" for common issues
  5. •Use stack flag - Get implementation-specific best practices
  6. •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

RuleDoDon't
No emoji iconsUse SVG icons (Heroicons, Lucide, Simple Icons)Use emojis like 🎨 🚀 ⚙️ as UI icons
Stable hover statesUse color/opacity transitions on hoverUse scale transforms that shift layout
Correct brand logosResearch official SVG from Simple IconsGuess or use incorrect logo paths
Consistent icon sizingUse fixed viewBox (24x24) with w-6 h-6Mix different icon sizes randomly

Interaction & Cursor

RuleDoDon't
Cursor pointerAdd cursor-pointer to all clickable/hoverable cardsLeave default cursor on interactive elements
Hover feedbackProvide visual feedback (color, shadow, border)No indication element is interactive
Smooth transitionsUse transition-colors duration-200Instant state changes or too slow (>500ms)

Light/Dark Mode Contrast

RuleDoDon't
Glass card light modeUse bg-white/80 or higher opacityUse bg-white/10 (too transparent)
Text contrast lightUse #0F172A (slate-900) for textUse #94A3B8 (slate-400) for body text
Muted text lightUse #475569 (slate-600) minimumUse gray-400 or lighter
Border visibilityUse border-gray-200 in light modeUse border-white/10 (invisible)

Layout & Spacing

RuleDoDon't
Floating navbarAdd top-4 left-4 right-4 spacingStick navbar to top-0 left-0 right-0
Content paddingAccount for fixed navbar heightLet content hide behind fixed elements
Consistent max-widthUse same max-w-6xl or max-w-7xlMix 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-motion respected

📚 Knowledge Base

Rule Categories by Priority

PriorityCategoryImpactDomain
1AccessibilityCRITICALux
2Touch & InteractionCRITICALux
3PerformanceHIGHux
4Layout & ResponsiveHIGHux
5Typography & ColorMEDIUMtypography, color
6AnimationMEDIUMux
7Style SelectionMEDIUMstyle, product
8Charts & DataLOWchart

Quick Reference

1. Accessibility (CRITICAL)

  • •color-contrast - Minimum 4.5:1 ratio for normal text
  • •focus-states - Visible focus rings on interactive elements
  • •alt-text - Descriptive alt text for meaningful images
  • •aria-labels - aria-label for icon-only buttons
  • •keyboard-nav - Tab order matches visual order
  • •form-labels - Use label with for attribute

2. Touch & Interaction (CRITICAL)

  • •touch-target-size - Minimum 44x44px touch targets
  • •hover-vs-tap - Use click/tap for primary interactions
  • •loading-buttons - Disable button during async operations
  • •error-feedback - Clear error messages near problem
  • •cursor-pointer - Add cursor-pointer to clickable elements

3. Performance (HIGH)

  • •image-optimization - Use WebP, srcset, lazy loading
  • •reduced-motion - Check prefers-reduced-motion
  • •content-jumping - Reserve space for async content

4. Layout & Responsive (HIGH)

  • •viewport-meta - width=device-width initial-scale=1
  • •readable-font-size - Minimum 16px body text on mobile
  • •horizontal-scroll - Ensure content fits viewport width
  • •z-index-management - Define z-index scale (10, 20, 30, 50)

5. Typography & Color (MEDIUM)

  • •line-height - Use 1.5-1.75 for body text
  • •line-length - Limit to 65-75 characters per line
  • •font-pairing - Match heading/body font personalities

6. Animation (MEDIUM)

  • •duration-timing - Use 150-300ms for micro-interactions
  • •transform-performance - Use transform/opacity, not width/height
  • •loading-states - Skeleton screens or spinners

7. Style Selection (MEDIUM)

  • •style-match - Match style to product type
  • •consistency - Use same style across all pages
  • •no-emoji-icons - Use SVG icons, not emojis

8. Charts & Data (LOW)

  • •chart-type - Match chart type to data type
  • •color-guidance - Use accessible color palettes
  • •data-table - Provide table alternative for accessibility