Frontend Design Skill

Use this skill whenever the task involves how an interface looks and feels: layout, spacing, typography, color, component design, states, and interaction.

The goal is interfaces that feel considered and quiet. Clear hierarchy, generous space, and restraint. Good defaults beat decoration.

Principles

• Restraint first. Remove before you add. Most screens improve by deleting elements, not styling them.
• Hierarchy is the job. Make the most important thing obviously the most important and let everything else recede.
• Be consistent. Reuse the same spacing, type, and color tokens instead of inventing new ones per screen.
• Design the states, not just the happy path: loading, empty, error, and long-content each need a deliberate look.
• Content leads. Design around real text and real data, never lorem ipsum and three perfect items.

Spacing and layout

• Use one spacing scale (for example 4 / 8 / 12 / 16 / 24 / 32) and stick to it. No arbitrary pixel values.
• Use whitespace to group related things and separate unrelated ones. Proximity is grouping.
• Align to a grid. Things that line up read as intentional.
• Give text a comfortable measure, roughly 60 to 75 characters per line.
• Prefer a clear single column on small screens over a cramped multi-column layout.

Type

• Limit type sizes and weights. A small, fixed scale carries hierarchy better than many sizes.
• Set a readable body size (16px or up) and a relaxed line-height (around 1.5 to 1.7) for long text.
• Reach for weight and size to create emphasis before reaching for color.

Color

• Keep a small, intentional palette: a background, a foreground, one or two accents, and muted and border tones.
• Lead with neutrals. Use accent color sparingly to mean something (an action, a state), not for decoration.
• Meet contrast minimums (WCAG AA is 4.5:1 for body text). Never communicate state with color alone.
• Support light and dark with the same tokens, not a separate hand-tuned theme.

Components and states

• Design a component as a small set of explicit states, not one default mockup.
• Always show a focus state for keyboard users. Never remove the outline without replacing it.
• Make interactive elements look interactive and give immediate feedback on action.
• Keep affordances honest: buttons look like buttons, links look like links.

Motion

• Motion should explain a change, not perform. Keep it short (around 150 to 250ms) and purposeful.
• Animate transforms and opacity, not layout, to stay smooth.
• Respect prefers-reduced-motion and provide a calm, motion-free path.

Accessibility

• Start from semantic HTML; it gives you behavior and accessibility for free.
• Maintain visible focus, a logical tab order, and labels for icon-only controls.
• Check the design at 200% zoom and on a narrow viewport before calling it done.

Review checklist

• Is the hierarchy obvious at a glance, even squinting?
• Is spacing on the scale and consistent across the screen?
• Are the loading, empty, and error states designed?
• Does it pass contrast, focus, and keyboard checks?
• Could anything be removed without losing meaning?