---
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` |

## Quick Reference

## 🧠 Knowledge Modules (Fractal Skills)

### 1. [1. Accessibility (CRITICAL)](./sub-skills/1-accessibility-critical.md)
### 2. [2. Touch & Interaction (CRITICAL)](./sub-skills/2-touch-interaction-critical.md)
### 3. [3. Performance (HIGH)](./sub-skills/3-performance-high.md)
### 4. [4. Layout & Responsive (HIGH)](./sub-skills/4-layout-responsive-high.md)
### 5. [5. Typography & Color (MEDIUM)](./sub-skills/5-typography-color-medium.md)
### 6. [6. Animation (MEDIUM)](./sub-skills/6-animation-medium.md)
### 7. [7. Style Selection (MEDIUM)](./sub-skills/7-style-selection-medium.md)
### 8. [8. Charts & Data (LOW)](./sub-skills/8-charts-data-low.md)
### 9. [Step 1: Analyze User Requirements](./sub-skills/step-1-analyze-user-requirements.md)
### 10. [Step 2: Generate Design System (REQUIRED)](./sub-skills/step-2-generate-design-system-required.md)
### 11. [Step 3: Supplement with Detailed Searches (as needed)](./sub-skills/step-3-supplement-with-detailed-searches-as-needed.md)
### 12. [Step 4: Stack Guidelines (Default: html-tailwind)](./sub-skills/step-4-stack-guidelines-default-html-tailwind.md)
### 13. [Available Domains](./sub-skills/available-domains.md)
### 14. [Available Stacks](./sub-skills/available-stacks.md)
### 15. [Step 1: Analyze Requirements](./sub-skills/step-1-analyze-requirements.md)
### 16. [Step 2: Generate Design System (REQUIRED)](./sub-skills/step-2-generate-design-system-required.md)
### 17. [Step 3: Supplement with Detailed Searches (as needed)](./sub-skills/step-3-supplement-with-detailed-searches-as-needed.md)
### 18. [Step 4: Stack Guidelines](./sub-skills/step-4-stack-guidelines.md)
### 19. [Icons & Visual Elements](./sub-skills/icons-visual-elements.md)
### 20. [Interaction & Cursor](./sub-skills/interaction-cursor.md)
### 21. [Light/Dark Mode Contrast](./sub-skills/lightdark-mode-contrast.md)
### 22. [Layout & Spacing](./sub-skills/layout-spacing.md)
### 23. [Visual Quality](./sub-skills/visual-quality.md)
### 24. [Interaction](./sub-skills/interaction.md)
### 25. [Light/Dark Mode](./sub-skills/lightdark-mode.md)
### 26. [Layout](./sub-skills/layout.md)
### 27. [Accessibility](./sub-skills/accessibility.md)