Gorgeous UI Framework

When to use this skill

• •When building a "Gorgeous UI Dashboard" or any premium web interface.
• •When the user asks for "wow" factor, vibrant aesthetics, or modern design.

Design Principles

• •Vibrant Aesthetics: Avoid generic colors. Use curated, harmonious palettes (e.g., HSL tailored colors, sleek dark modes).
• •Glassmorphism: Use translucent backgrounds with backdrop-blur for a premium feel.
• •Smooth Gradients: Implement subtle, multi-stop gradients for depth and movement.
• •Modern Typography: Use clean sans-serif fonts (e.g., Inter, Outfit, Roboto) with a clear hierarchy.
• •Micro-Animations: Add subtle hover effects, transitions, and entry animations to make the UI feel alive.
• •Generous Spacing: Ensure plenty of white space ("breathing room") to maintain clarity and tidiness.
• •Card-Based Layout: Organize components into distinct, elevated cards with subtle shadows.

Standard UI Components

• •Collapsible Sidebar: For clean navigation.
• •KPI Metric Cards: High-impact data displays at the top.
• •Interactive Data Viz: Beautiful line/bar charts with smooth animations (e.g., using Recharts or Chart.js).
• •Responsive Tables: Clean, paginated, and sortable data grids.

Prompting for Gorgeous UI

When generating code for a gorgeous UI, always include instructions for:

• •Theme (Dark/Light/Both)
• •Primary/Accent color palette
• •CSS utility classes for glass effect
• •Animation triggers (e.g., framer-motion or CSS transitions)