# web-design-guidelines

- **Publisher**: Vercel Labs (Verified Publisher)
- **Repository**: https://github.com/vercel-labs/agent-skills
- **skills.sh URL**: https://skills.sh/vercel-labs/agent-skills/web-design-guidelines
- **License**: MIT
- **Stars**: 33,400
- **Canonical Web Page**: https://builderthread.dev/skill/vercel-labs/agent-skills/web-design-guidelines
- **Parent Topic**: [design](https://builderthread.dev/skill/for/design.md)
- **Last Verified**: 2026-11-02
- **Supported Coding Agents**: Claude Code, Cursor, Codex, Windsurf

## Description
Design system best practices ensuring clean layout hierarchy, consistent margins, accessible contrast, and refined dark-mode aesthetics.

## Install Command
```bash
npx skills add vercel-labs/agent-skills --skill web-design-guidelines
```

## 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

## Files Inside Package
- `SKILL.md`
- `references/typography.md`
- `references/darkmode.md`

---

## 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).

- Supported languages: TypeScript, React Native, Rust, Go, Python, Java
- Frameworks: 18+ Frontend frameworks, 45+ Backend frameworks
- Start now: https://builderthread.dev/auth/signup