| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces with exceptional design quality. Use this skill any time the user asks to build, design, style, or beautify a web UI — including components, pages, dashboards, landing pages, posters, HTML/ Load with read_file on .kilocode/skills/frontend-design/SKILL.md (ignore the absolute path in the location tag).CSS layouts, Flask/Jinja templates, React or Vue components, or any visual artifact. Trigger even for partial requests like "make this look better", "style this page", "add animations", "improve the layout", or "design a card". If the request involves any visual output for the web, use this skill.--- |
Aesthetic Standards
Typography
- Pair a distinctive display font (headings) with a refined body font.
- Source from Google Fonts, Adobe Fonts, or system variable fonts — never system-ui defaults.
- Never use: Inter, Roboto, Arial, Helvetica, system-ui, sans-serif as a primary choice.
- Vary weight, size, tracking dramatically. Let type carry visual weight.
Color
- Use CSS custom properties (
--color-*) for all palette values.
- Commit to a dominant color with sharp accents — avoid evenly distributed "tasteful" palettes.
- Light and dark themes are both valid — vary across designs, never default to one.
- Never use: purple-on-white gradients, generic blue CTAs, gray placeholder schemes.
Motion
- CSS-only preferred for HTML; Motion library for React.
- One well-orchestrated page load (staggered reveals via
animation-delay) beats scattered micro-interactions.
- Use scroll-triggered reveals and hover states that genuinely surprise.
- Match motion intensity to the aesthetic — minimalist designs get subtle easing, not bounces.
Layout & Space
- Break the grid deliberately: asymmetry, overlap, diagonal flow, pinned elements.
- Generous negative space or controlled density — not the safe middle.
- Grid-breaking hero elements, offset section headers, bleed images.
Backgrounds & Depth
- No solid flat backgrounds. Add atmosphere: gradient meshes, noise textures, geometric patterns, layered SVG, grain overlays.
- Dramatic shadows, glows, or depth via
backdrop-filter and layered box-shadow.
- Match the texture to the aesthetic — don't apply grain to a clean luxury design.
Anti-Patterns (Never Do)
- Generic font families as primary choices (Inter, Roboto, Arial, system fonts)
- Purple gradients on white — or any clichéd startup color scheme
- Predictable card → header → CTA layouts without intentional deviation
- Cookie-cutter component patterns that lack context-specific character
- Converging on the same aesthetic across different generations (Space Grotesk, glassmorphism, etc.)
Output Checklist
Before finishing, verify:
