# Ui Ux Pro Max Skill

> Guides UI and UX design for web frontends using Tailwind CSS and Framer Motion, covering glassmorphi

Guides UI and UX design for web frontends using Tailwind CSS and Framer Motion, covering glassmorphism styling, a 4px-based spacing scale, Magic UI components (bento grids, marquees, shiny buttons, beam effects), AnimatePresence exit animations and layout animations, and layout guidance for SaaS dashboards, landing pages and mobile apps. Use when building or styling React interface components, adding Framer Motion animations, or designing dashboard, landing page or mobile layouts with Tailwind.

- Page: https://ss33.ai/skills/dokhacgiakhoa/ui-ux-pro-max-skill-84465053269
- Publisher: dokhacgiakhoa
- Category: [Software Development](https://ss33.ai/skills/category/software-development-t44z8z) › [Frontend & UI](https://ss33.ai/skills/category/software-development-t44z8z/frontend-and-ui-q25e9r)
- License: MIT
- Source: https://github.com/dokhacgiakhoa/agent-skills-4-vibe-coding-cli/blob/c4a059bbf7a8d6b2162071f0fbfe74053faa6d20/cli/skills/ui-ux-pro-max-skill/SKILL.md

## Skill

SKILL.md: https://ss33.ai/api/v1/ss33/download/dokhacgiakhoa/ui-ux-pro-max-skill-84465053269

# 🎨 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.*