Web Design Guidelines
Agent skill with general web and visual design guidelines an agent should follow.
Broader than component-level heuristics: the web design rules I want an agent to treat as table stakes on every page it builds.
Overview
Where Frontend Design is about implementing a UI well, this skill is about the wider canvas — responsive behavior, readable typography, sensible color usage, accessible contrast, and the conventions users expect from a good web page. It's the baseline I don't want to re-explain per project.
What it does
- Enforces responsive, mobile-first layouts that hold up across breakpoints.
- Keeps typography readable: sane measure, line height and scale.
- Treats accessibility as default — contrast, focus, semantics (see Accessibility).
- Applies consistent, conventional patterns for navigation, forms and feedback.
Install
Vendored in .agents/skills/web-design-guidelines/ and pinned in skills-lock.json.
Like the others it follows the skills.sh distribution pattern —
npx skills add <owner>/<name> to add it elsewhere.
Usage
I keep it on across Design and Development. It nudges the agent toward responsive, accessible, conventional choices without me spelling them out each time, and pairs naturally with the more granular Frontend Design skill.