ui-ux-pro-max-skill
🎨 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
More from dokhacgiakhoa/antigravity-ide
notion-mcp
Official Notion Model Context Protocol Server for workspace interaction.
33filesystem-mcp
Official Filesystem Model Context Protocol Server for local file operations.
24puppeteer-mcp
Official Puppeteer Model Context Protocol Server for browser automation.
15penetration-tester-master
Ultimate Offensive Security Master Skill.
14postgres-mcp
Official PostgreSQL Model Context Protocol Server for database interaction.
14ui-ux-pro-max
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.
13