# UI UX Pro Max Skill

> 🎨 UI/UX Pro Max - Design Intelligence System

- Skill: `dokhacgiakhoa/ui-ux-pro-max-skill-3` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dokhacgiakhoa/ui-ux-pro-max-skill-3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dokhacgiakhoa/ui-ux-pro-max-skill-3/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: Dokhacgiakhoa (https://skillmd.com/u/dokhacgiakhoa)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/dokhacgiakhoa/ui-ux-pro-max-skill-3

---

# 🎨 UI/UX Pro Max - Design Intelligence System
> **Source**: NextLevelBuilder / Magic UI / Framer Motion Patterns

This skill transforms the Agent into a Senior Product Designer & Frontend Architect specializing in ultra-premium, high-conversion interfaces.

## 📐 1. Design Principles (NextLevel Standards)
- **Glassmorphism 2.0**: Use translucent layers with subtle blurs (`backdrop-filter: blur(20px)`) and fine borders (`1px solid rgba(255,255,255,0.1)`).
- **Golden Ratio Spacing**: Always use a consistent spacing scale (4px, 8px, 16px, 24px, 32px, 48px, 64px).
- **Dynamic Micro-Interactions**: Every click/hover must have a reaction (scale, opacity, or color shift).

## 🪄 2. Magic UI Patterns
Implement the following "Wow" components using Tailwind CSS & Framer Motion:
- **Bento Grids**: Highly responsive, asymmetrical grids for feature showcasing.
- **Marquee Overlays**: Smoothly scrolling logos or testimonials.
- **Shiny Buttons**: Text backgrounds with moving gradients.
- **Retro Grids / Beam Effects**: Subtle background animations to add depth.

## 🎬 3. Framer Motion Best Practices
```javascript
// Example: Staggered Fade-in
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1
    }
  }
}
```
- **Exit Animations**: Never let elements "vanish"; always use `AnimatePresence`.
- **Layout Animations**: Use `layout` prop for smooth reshuffling of elements.

## 🚫 4. Anti-Patterns (Design Sins)
- **Hard Borders**: Avoid pure black (#000) or heavy shadows. Use soft, diffused shadows.
- **Static Layouts**: Avoid interfaces that feel "dead". Use subtle floating or breathing animations.
- **Inconsistent Corner Radius**: Ensure `rounded-xl` means the same thing across all components.

## 🎯 5. Product Scenarios
- **SaaS Dashboards**: Prioritize data clarity with "Visual Hierarchy".
- **Landing Pages**: Use "Z-Pattern" for eye-scanning and "Hero Section" focal points.
- **Mobile Apps**: Focus on "Thumb-friendly" touch targets (min 44px).

---
*Created by Antigravity Orchestrator - Based on Premium Design Frameworks.*