mcpField
U
ui-ux-pro-max-skill

ui-ux-pro-max-skill

github.com/dokhacgiakhoaDesign & UI511158 installsUpdated 20w ago
Repository

About ui-ux-pro-max-skill

A design skill for agents working on interfaces and frontend architecture. It offers visual principles, Tailwind CSS and Framer Motion patterns, anti-pattern guidance, and advice for SaaS dashboards, landing pages, and mobile apps.

Key features

  1. 01Glassmorphism and spacing rules
  2. 02Micro-interaction and layout animation guidance
  3. 03Bento grids and other UI patterns
  4. 04Design anti-pattern guidance
  5. 05Advice for dashboards, landing pages, and mobile apps

Use cases

  1. 01Plan information hierarchy for a SaaS dashboard
  2. 02Design animated landing page components
  3. 03Improve touch targets in a mobile app
  4. 04Standardize corner radii and spacing

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dokhacgiakhoa/agent-skills-4-vibe-coding-cli --skill ui-ux-pro-max-skill

After installing, type/ui-ux-pro-max-skillin Claude Code to confirm it loaded.

Details

From the project README

🎨 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

// 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.

Comments

Markdown supported