ui-ux-pro-max

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)

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