Web Design Guidelines
Pulls in Vercel's internal web design standards covering layout, typography, color, motion, and accessibility for product UI. You'd reach for this when building modern web interfaces and want opinionated guidance from a team that ships polished products at scale. The skill surfaces during design system planning, so Claude can reference these guidelines when you're making UI decisions or auditing existing designs. It's essentially Vercel's design checklist packaged as a skill, which means you get their specific takes on things like spacing systems and animation timing rather than generic best practices. Comes from the vercel-labs/skills repo, so it reflects real production patterns they actually use.
- install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.
- 19
- skills.sh installs
- 4.1K
- GitHub stars
- 106.9K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add nexu-io/open-design --skill web-design-guidelines --agent claude-codeInstalls into .claude/skills of the current project.
Files
Web Interface Guidelines
Review files for compliance with Web Interface Guidelines.
How It Works
- Load the pinned guidelines from
references/guidelines.md— this is the default, reproducible execution path - Optionally, fetch the latest guidelines from the upstream URL below and diff against the pinned snapshot to see if anything has changed
- Read the specified files (or prompt user for files/pattern)
- Check against all rules in the guidelines
- Output findings in the terse
file:lineformat
Guidelines Source
Default (pinned): The vendored copy at references/guidelines.md is the default execution path. It is a pinned snapshot of the upstream guidelines and guarantees the skill produces reproducible results in any runtime environment.
Upstream (live): For users who want the very latest rules, the live source is available at:
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
Fetching the live version is optional — the pinned snapshot is always the baseline.
Usage
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/nexu-io/open-design
- Categories
- Frontend Development, Git & Pull Requests, Code Review & Quality, Cloud & Infrastructure, Design & UI/UX
- First seen
- Jun 3, 2026
More from nexu-io/open-design
All 217- Creative Director3.6K
- Design Brief3.6K
- Threejs3.5K
- Apple Hig3.4K
- Pptx Html Fidelity Audit3.3K
- Design Review3.3K
- Design Md3.3K
- D3 Visualization3.3K
- Hatch Pet3.2K
- Frontend Skill3.2K
- Data Report3.2K
- Copywriting3.2K
- Color Expert3.1K
- Docx3.1K
- Pdf3.1K
- Brand Guidelines3.1K
- Ui Skills3.1K
- Pptx3.1K
- Flutter Animating Apps3.1K
- Canvas Design3.1K
- Remotion3.1K
- Plan Design Review3K
- Pptx Generator3K
- Swiftui Design3K
Recommended
More Frontend Development
typescript-security-reviewgiuseppe-trisciuoglio/developer-kitProvides security review capability for TypeScript/Node.js applications, validates code against XSS, injection, CSRF, JWT/OAuth2 flaws, dependency CVEs, and sec4.1Kskills.sh installs
browser-screenshotzc277584121/marketing-skillsTake focused, region-specific screenshots from web pages using a dedicated headed Chrome profile with persistent login state. Navigates to the right page based 4.1Kskills.sh installs
inngest-durable-functionsinngest/inngest-skillsUse when building functions that must survive process crashes, retry automatically on failure, run on a schedule, react to events, or maintain state across infr4Kskills.sh installs
maui-app-lifecycledotnet/skills.NET MAUI app lifecycle guidance — the four app states, cross-platform Window lifecycle events (Created, Activated, Deactivated, Stopped, Resumed, Destroying), 4Kskills.sh installs
content-experimentation-best-practicessanity-io/agent-toolkitContent experimentation and A/B testing guidance covering experiment design, hypotheses, metrics, sample size, statistical foundations, CMS-managed variants, an4Kskills.sh installs
plugin-forgesoftaworks/agent-toolkitCreate and manage Claude Code plugins with proper structure, manifests, and marketplace integration. Use when creating plugins for a marketplace, adding plugin 4Kskills.sh installs