Frontend Design

The skill I hand an agent so it makes good visual decisions on its own — the difference between code that works and a UI that actually looks designed.

Overview

Models can write correct markup and still produce something that feels off: cramped spacing, weak hierarchy, arbitrary sizes. This skill encodes the heuristics I'd otherwise have to repeat — a spacing scale, type hierarchy, alignment and rhythm, when to use whitespace versus borders — so the agent reaches for them by default.

What it does

• Pushes a consistent spacing and sizing scale instead of magic numbers.
• Establishes visual hierarchy through type scale, weight and color, not just size.
• Encourages restraint: alignment, whitespace and grouping over decoration.
• Aligns generated UI with the Morpha token system rather than ad-hoc values.

Install

This skill is vendored in .agents/skills/frontend-design/ and pinned in skills-lock.json, so it travels with the repo — an agent working here picks it up automatically. Skills like this are distributed via skills.sh, the pattern being npx skills add <owner>/<name> to add one to a fresh project.

Usage

I keep it loaded whenever I'm building or restyling UI. Concretely it changes behavior during the Design and Development phases: the agent proposes layouts that respect hierarchy and spacing out of the box, and defers to Morpha tokens instead of inventing colors. Pair it with Web Design Guidelines for broader visual rules.