frontend-design

Creates distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Analyzes existing designs and adapts to project aesthetics.TRIGGERS - Keywords: UI, UX, CSS, SCSS, Sass, Less, styling, styles, stylesheet, Tailwind, styled-components, emotion, CSS-in-JS, Chakra, MUI, Material UI, Radix, shadcn, headless UI, layout, flexbox, grid, responsive, mobile-first, breakpoints, media queries, animation, transition, motion, keyframes, hover, focus, active states, visual design, typography, fonts, typeface, font-family, text styling, headings, color, colors, palette, color scheme, theme, theming, dark mode, light mode, branding, spacing, padding, margin, gap, whitespace, shadows, box-shadow, borders, border-radius, rounded corners, gradients, buttons, cards, forms, inputs, modals, dialogs, navigation, navbar, sidebar, header, footer, hero section, landing page, dashboard, component styling, design system, design tokens.TRIGGERS - Phrases: "make it look better", "improve the look", "looks ugly"

// tip: Run this command in your terminal to install the skill