AgentSkillsCN

ui-ux-pro-max

提供全面的 UI/UX 设计指导与规范。适用于设计 UI、选择配色方案与字体排版、审视 UX 问题，或落实无障碍性设计时使用。

SKILL.md
--- frontmatter
name: "ui-ux-pro-max"
description: "Provides comprehensive UI/UX design guidance and rules. Invoke when designing UI, choosing palettes/typography, reviewing UX issues, or implementing accessibility."

UI/UX Pro Max - Design Intelligence

Comprehensive design guide for web and mobile applications with priority-based UX rules and design system recommendations.

When to Apply

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

Rule Categories by Priority

  1. •Accessibility (CRITICAL)
  2. •Touch & Interaction (CRITICAL)
  3. •Performance (HIGH)
  4. •Layout & Responsive (HIGH)
  5. •Typography & Color (MEDIUM)
  6. •Animation (MEDIUM)
  7. •Style Selection (MEDIUM)
  8. •Charts & Data (LOW)

Quick Reference

Accessibility

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

Touch & Interaction

  • •Minimum 44x44px touch targets
  • •Use click/tap for primary interactions
  • •Disable button during async operations
  • •Clear error messages near the problem
  • •Add cursor-pointer to clickable elements

Performance

  • •Use WebP, srcset, and lazy loading for images
  • •Respect prefers-reduced-motion
  • •Reserve space for async content to avoid jumps

Layout & Responsive

  • •Use viewport meta width=device-width initial-scale=1
  • •Minimum 16px body text on mobile
  • •Avoid horizontal scroll
  • •Define z-index scale (10, 20, 30, 50)

Typography & Color

  • •Line-height 1.5–1.75 for body text
  • •Limit line length to 65–75 characters
  • •Pair heading/body fonts with compatible personalities

Animation

  • •Use 150–300ms for micro-interactions
  • •Prefer transform/opacity over width/height
  • •Use skeletons or spinners for loading states

Style Selection

  • •Match style to product type
  • •Keep visual style consistent across pages
  • •Prefer SVG icons over emoji icons

Charts & Data

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

How to Use

Step 1: Analyze User Requirements

Extract:

  • •Product type
  • •Style keywords
  • •Industry
  • •Tech stack

Step 2: Generate Design System (Required)

Run the design-system search first:

code
python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system -p "Project Name"

Step 2b: Persist Design System (Optional)

code
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"

For page overrides:

code
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

Step 3: Apply Rules in Order

Address CRITICAL items first, then HIGH, then MEDIUM, then LOW.