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 nguyenphiikhanh/netro
ui-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.
1senior-fullstack
Comprehensive fullstack development skill for building complete web applications with React, Next.js, Node.js, GraphQL, and PostgreSQL. Includes project scaffolding, code quality analysis, architecture patterns, and complete tech stack guidance. Use when building new projects, analyzing code quality, implementing design patterns, or setting up development workflows.
1mobile-developer
Develop React Native, Flutter, or native mobile apps with modern
1mobile-design
Mobile-first design thinking and decision-making for iOS and Android apps.
1clean-code
Pragmatic coding standards - concise, direct, no over-engineering, no unnecessary comments
1database-optimizer
Expert database optimizer specializing in modern performance
1