Stats
Actions
Tags
From flow
Use when building web components, pages, or applications with HTML, CSS, JavaScript, React, Vue, Svelte, or any frontend framework. Triggers on: build a page, create a component, design a UI, landing page, dashboard, settings panel, login page, signup form, pricing page, hero section, card component, navigation, sidebar, modal, frontend, web design, HTML, CSS, styled, Tailwind, web app, website. Ensures distinctive, production-grade output that avoids generic AI aesthetics.
How this skill is triggered — by the user, by Claude, or both
Slash command
/flow:design-frontendThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Create distinctive, production-grade frontend interfaces. This skill replaces vague aesthetic guidance with specific, actionable constraints that produce better first-pass output.
Create distinctive, production-grade frontend interfaces. This skill replaces vague aesthetic guidance with specific, actionable constraints that produce better first-pass output.
Commit to a concrete design spec. Not vibes — specific values.
Pick a specific direction, not "modern and clean." If the first direction that comes to mind feels obvious, deliberately explore alternatives.
See ref/aesthetic-directions.md for 20+ directions with concrete characteristics.
Before writing any markup or styles, define these explicitly:
Fonts: [display font] + [body font] (NEVER first-instinct defaults)
Palette: [dominant hex] + [accent hex] + [background hex] + [text hex]
Type scale: [base]px @ [ratio] → [computed heading sizes]
Spacing: 8px grid → [which multiples will be used]
Shadows: [# of elevation levels] with [distinct purposes]
Typography is the single biggest differentiator between professional and amateur design.
Never reach for these as a first choice: Inter, Roboto, Arial, Helvetica, system-ui, Open Sans, Lato, Montserrat, Poppins, Space Grotesk, Nunito.
If a font feels like the "safe choice," it is the wrong choice. Instead, explore distinctive alternatives. See ref/banned-defaults.md for specific alternatives organized by character.
Subtle differences destroy hierarchy. Use extremes:
| Property | Weak (avoid) | Strong (use) |
|---|---|---|
| Weight contrast | 400 vs 600 | 300 vs 800 |
| Size ratio (heading:body) | 1.5x | 3x+ |
| Letter-spacing | Same everywhere | Tight headings (-0.02em), loose labels (0.08em) |
| Case | Title Case only | MIX: uppercase labels, sentence-case body, lowercase nav |
Pair a distinctive display font with a refined body font. Contrast in character, not conflict:
A single dominant color with one sharp accent beats a timid, evenly-distributed palette. Define the hierarchy:
Instead: Lead with one bold choice. Warm earth tones + terracotta accent. Deep navy + gold. Near-black + single neon highlight. Cream paper + ink black.
Define the full palette in :root or CSS variables. Reference variables everywhere — never hardcode hex values in component styles.
All margins, padding, gaps, and sizes: multiples of 8 (4px acceptable for tight internal spacing).
| Context | Values |
|---|---|
| Icon-to-text gap | 4-8px |
| Form field spacing | 16px |
| Card internal padding | 24px |
| Section gaps | 32-48px |
| Major page sections | 64-80px |
Generous whitespace signals confidence. Cramped layouts signal amateur work. When in doubt, add more space, not less.
Same shadow-md on every element makes the page flat. Define distinct elevation levels:
| Level | Purpose | Character |
|---|---|---|
| 0 | Flush (most elements) | No shadow — flat on surface |
| 1 | Subtle lift (cards, inputs) | Barely visible, tight blur |
| 2 | Interactive (buttons, dropdowns) | Medium, noticeable on hover |
| 3 | Floating (popovers, toasts) | Prominent, wide blur |
| 4 | Overlay (modals) | Dramatic, dark scrim |
Shadows disappear on dark backgrounds. Use lighter surface colors and subtle borders to create elevation instead.
Three-card grid + centered hero is the AI default. Instead:
Every screenful of content should have exactly one element that dominates attention. If everything is emphasized, nothing is.
One well-timed page load with staggered reveals (using animation-delay) creates more impact than identical hover effects on every element.
| Priority | Technique |
|---|---|
| Highest | Staggered entrance on page load |
| High | Scroll-triggered section reveals |
| Medium | Hover states that surprise (scale, color shift, shadow lift) |
| Low | Micro-interactions (toggle, checkbox, loading) |
Prioritize CSS-only solutions. Use Motion library (framer-motion) for React when available.
Before considering the design complete:
ref/banned-defaults.md)ref/banned-defaults.md — Banned fonts/colors/patterns with specific alternativesref/aesthetic-directions.md — 20+ aesthetic directions with concrete characteristicsnpx claudepluginhub raiderrobert/flow --plugin flowGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.