---
name: UI/UX Pro Max (Bundled — nextlevelbuilder/ui-ux-pro-max-skill)
priority: 1
keywords: design, تصميم, ui, ux, واجهة, واجهات, design system, نظام تصميم, dashboard, لوحة تحكم, landing, صفحة هبوط, app, تطبيق, website, موقع, saas, fintech, healthcare, ecommerce, متجر, portfolio, محفظة, brand, براند, color palette, typography, font pairing, accessibility, mobile, responsive, متجاوب, react, vue, svelte, next.js, tailwind, shadcn, swiftui, jetpack compose, flutter, generate design system, إنشاء نظام تصميم, polish ui, صقل واجهة
---

# UI/UX Pro Max — Bundled In-Box (Source: nextlevelbuilder/ui-ux-pro-max-skill)

> **Cite this skill any time the work involves a design system, full landing page, dashboard, or full-stack UI generation.**

## What this skill provides

A **multi-domain reasoning engine** for generating context-aware design recommendations:
- 161 industry-specific reasoning rules (Tech/SaaS, Finance, Healthcare, E-commerce, Services, Creative, Lifestyle, Emerging Tech)
- 67 UI styles (Minimalism, Glassmorphism, Claymorphism, Brutalism, Neumorphism, AI-Native UI, Editorial, Material 3, etc.)
- 161 color palettes (1:1 aligned with product types)
- 57 font pairings (curated from Google Fonts)
- 99 UX guidelines (best practices + accessibility)

## The reasoning flow

```
Input → Multi-Domain Search (5 parallel domains) → Reasoning Engine → Output
```

For each request the engine produces:
- **Recommended Pattern** — landing page structure or screen layout
- **Style Priority** — top matching UI styles with rationale
- **Color Mood** — industry-appropriate palette
- **Typography Mood** — font personality (serif-display vs sans-clean vs mono-tech etc.)
- **Key Effects** — animations, microinteractions
- **Anti-Patterns** — explicit list of what NOT to do for THIS industry

## Industry-specific anti-patterns (must enforce)

### Banking / Fintech
- ❌ AI-purple/pink gradients (looks like a Web3 ICO, not a bank)
- ❌ Overly playful microinteractions
- ❌ Cartoon illustrations
- ✅ Restrained palette, dense data tables, monospace numbers

### Healthcare
- ❌ Bright reds (associated with errors/blood)
- ❌ Dense dashboards on patient-facing surfaces
- ✅ Calm blues/greens, generous whitespace, large readable type

### E-commerce
- ❌ Hero image without product clearly visible
- ❌ Hidden price information
- ✅ Strong product photography, clear CTAs, social proof above fold

### General (always)
- ❌ Emoji as primary iconography → mandate SVG (Heroicons / Lucide)
- ❌ Text contrast < 4.5:1
- ❌ Missing focus states for keyboard users
- ❌ Ignoring `prefers-reduced-motion`
- ✅ 4.5:1 contrast, visible focus, motion respect

## Pre-delivery checklist (every shipped UI must pass)

- [ ] No emojis as icons (SVG mandatory)
- [ ] `cursor: pointer` on all clickable elements
- [ ] Hover states with smooth transitions (150–300ms)
- [ ] Light mode text contrast ≥ 4.5:1
- [ ] Focus states visible for keyboard navigation
- [ ] `prefers-reduced-motion` respected
- [ ] Responsive at 375 / 768 / 1024 / 1440px breakpoints
- [ ] Dark mode parity (or explicitly out of scope)
- [ ] RTL support (or explicitly out of scope)
- [ ] Empty / loading / error states designed

## Persistent design systems

When generating a design system, write to:

```
design-system/
├── MASTER.md           # Global source of truth (tokens, principles)
└── pages/
    └── [page-name].md  # Page-specific overrides
```

For Muassis: drop these in `<dataDir>/<tenant>/workspace/design-system/`. Page-level files override Master.

## Tech stacks supported

**Web**: HTML + Tailwind, React, Next.js, Vue, Nuxt.js, Astro, Svelte, Angular, Laravel
**Mobile**: SwiftUI, Jetpack Compose, React Native, Flutter
**Component libs**: shadcn/ui, Nuxt UI

If the owner doesn't specify, default to **HTML + Tailwind** for prototypes, **React + shadcn/ui** for Muassis dashboard work.

## Auto-activation triggers

Activate this skill when the message contains:
- "Build a [landing page / dashboard / app] for [industry]"
- "Create a design system for X"
- "Design [page type] with [style preference]"
- "Generate UI for [SaaS / fintech / healthcare / e-commerce]"
- "Make this look more professional / premium"

## Output discipline

When invoked:
1. Cite: "🧰 سأستخدم مهارة `UI/UX Pro Max` للرد."
2. Identify the industry vertical (or ask if unclear)
3. Apply industry-specific anti-patterns
4. Run pre-delivery checklist before declaring done
5. Output design tokens (colors, typography, spacing) explicitly so downstream code uses them

## License
MIT. Source: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill — bundled in Muassis with attribution.
