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

version: 4.1.0-fractal
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.

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

Rule Categories by Priority

Priority	Category	Impact	Domain
1	Accessibility	CRITICAL	`ux`
2	Touch & Interaction	CRITICAL	`ux`
3	Performance	HIGH	`ux`
4	Layout & Responsive	HIGH	`ux`
5	Typography & Color	MEDIUM	`typography`, `color`
6	Animation	MEDIUM	`ux`
7	Style Selection	MEDIUM	`style`, `product`
8	Charts & Data	LOW	`chart`

ui-ux-pro-max

UI/UX Pro Max - Design Intelligence

When to Apply

Rule Categories by Priority

Quick Reference

🧠 Knowledge Modules (Fractal Skills)

1. 1. Accessibility (CRITICAL)

2. 2. Touch & Interaction (CRITICAL)

3. 3. Performance (HIGH)

4. 4. Layout & Responsive (HIGH)

5. 5. Typography & Color (MEDIUM)

6. 6. Animation (MEDIUM)

7. 7. Style Selection (MEDIUM)

8. 8. Charts & Data (LOW)

9. Step 1: Analyze User Requirements

10. Step 2: Generate Design System (REQUIRED)

11. Step 3: Supplement with Detailed Searches (as needed)

12. Step 4: Stack Guidelines (Default: html-tailwind)

13. Available Domains

14. Available Stacks

15. Step 1: Analyze Requirements

16. Step 2: Generate Design System (REQUIRED)

17. Step 3: Supplement with Detailed Searches (as needed)

18. Step 4: Stack Guidelines

19. Icons & Visual Elements

20. Interaction & Cursor

21. Light/Dark Mode Contrast

22. Layout & Spacing

23. Visual Quality

24. Interaction

25. Light/Dark Mode

26. Layout

27. Accessibility