★ 33,400License: MIT
web-design-guidelines
Design system best practices ensuring clean layout hierarchy, consistent margins, accessible contrast, and refined dark-mode aesthetics.
Publisher: Vercel Labs•Audited: 2026-11-02•Agents: Claude Code, Cursor, Codex, Windsurf
When to use this skill
- •Establishing spacing tokens and typography hierarchies in Tailwind CSS
- •Ensuring accessible color contrast ratios for light and dark themes
- •Eliminating layout shift and awkward card padding in marketing interfaces
Package Files
SKILL.mdSource File
references/typography.mdSource File
references/darkmode.mdSource File
Related design Skills
frontend-ui-engineering
Core guidelines from Addy Osmani on frontend performance, accessible component structures, responsive typography, and state management patterns.
impeccable
Strict visual rules for typography scales, deliberate spacing tokens, accessible contrast, and layout polish to prevent generic AI interface slop.
taste-skill
Replaces generic bootstrap-style layouts with intentional aesthetic direction, browser visual checks, and high-taste design patterns.
Production grade starter repo
Pre built starter repo with auth, databases, backend, and AI integrations already configured based on your tech stack of choice (worth $200+ and saves you 30+ hours of configuration).
6 Core Languages Supported18+ Frontend • 45+ Backend
TypeScript
React Native
Rust
Go
Python
Java
Custom PRD & business logicTasks streamed via MCPAgent skills pre-installed