Web design guidelines

Skill marktantongco/opencodelinux/skills/web-design-guidelines

Quick self-audit checklist for Vercel best practices: typography, color, spacing, responsiveness, and accessibility. Use in tandem with frontend-design to prevent design inconsistencies. For comprehensive guidelines, see vercel-web-design-guidelines.From its SKILL.md

Install

npx -y skills add marktantongco/opencodelinux --skill web-design-guidelines

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

1.7 KB, 331 tokens by cl100k_base, as published. Nobody here has run it

web-design-guidelines

context

This skill ensures every frontend you build follows Vercel's best practices for typography, color, spacing, and accessibility. Use it in tandem with frontend-design to prevent design inconsistencies across projects.

instructions

Before starting any UI work, load these guidelines automatically as a reference.
When generating a component, check:
- Typography: Use a single type scale with at most 2 font families (system fonts preferred).
- Colors: Stick to a 7‑color palette (primary, secondary, accent, background, text, success, error). No custom hex values without a token.
- Spacing: Follow an 8px grid; margins and paddings should be multiples of 8.
- Responsiveness: Design mobile‑first, then add breakpoints at 640px, 768px, 1024px.
- Accessibility: Color contrast ratio ≥ 4.5:1, focus indicators visible, form labels always present.
After building a component, run a quick self‑audit using these rules and report any violations.

constraints

This is a design system rulebook, not a code generator.
Never override these guidelines unless you have a specific brand‑identity override documented.
Violations must be noted explicitly when they occur, with a reason.

examples

Component: Button. Check: font size from type scale (16px), primary color from palette, padding 8px 16px (multiple of 8), focus ring visible, contrast yes.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.