web-design-guidelines
nexu-io/open-design
Review UI code against Vercel's Web Interface Guidelines for layout, typography, color, motion, and accessibility.
What is web-design-guidelines?
This skill audits UI code for compliance with Vercel's Web Interface Guidelines, covering layout, typography, color, motion, and accessibility standards. Use it when you need to validate product UI against established design system rules or perform design reviews.
- Checks UI code against Vercel Web Interface Guidelines rules
- Validates layout, typography, color, and motion compliance
- Audits accessibility standards in UI code
- Outputs findings in concise file:line format
- Compares against pinned guidelines snapshot for reproducibility
- Optionally fetches latest upstream guidelines to check for updates
How to install web-design-guidelines
npx skills add https://github.com/nexu-io/open-design --skill web-design-guidelinesHow to use web-design-guidelines
- 1.Provide a file path or glob pattern of UI files to review, or let the skill prompt you for files
- 2.The skill loads the pinned guidelines from references/guidelines.md
- 3.Optionally, the skill can fetch the latest upstream guidelines to check for updates
- 4.The skill reads your specified files and applies all rules from the guidelines
- 5.Review the output findings in file:line format to identify compliance issues
Use cases
- Review a component's CSS and HTML for design system compliance before merging
- Audit an entire product UI codebase against accessibility and color standards
- Check a new feature's layout and typography against established guidelines
- Validate motion and animation code matches design system specifications
- Perform design reviews on UI files to catch guideline violations early
- Frontend engineers building product UI
- Design system maintainers
- Product teams enforcing design consistency
- Accessibility-focused developers
- Teams using Vercel design standards
web-design-guidelines FAQ
By default, it uses the pinned snapshot at references/guidelines.md for reproducible results. Optionally, it can fetch the latest guidelines from https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md.
It validates layout, typography, color, motion, and accessibility compliance according to Vercel's Web Interface Guidelines.
Findings are output in terse file:line format for easy scanning and navigation.
Yes, the skill reviews against Vercel's design guidelines, which are general best practices for web UI design applicable to any product.
No; the pinned guidelines are vendored locally. Fetching the latest upstream guidelines is optional.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: web-design-guidelines description: | Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI. triggers:
- "web design guidelines"
- "vercel design"
- "product ui standards"
- "design checklist"
- "review my UI"
- "check accessibility"
- "audit design"
- "review UX"
- "设计审查" metadata: author: vercel version: "1.0.0" argument-hint: <file-or-pattern> od: mode: design-system surface: web platform: desktop category: design-systems upstream: "https://github.com/vercel-labs/web-interface-guidelines" source-commit: 4e799d45c17aec1498c269287a83b9dba22b966b preview: type: markdown example_prompt: | Review my UI code against the Vercel Web Interface Guidelines — check layout, typography, color, motion, and accessibility compliance.
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
When a user provides a file or pattern argument:
- Load
references/guidelines.mdas the default source - Optionally fetch the upstream URL to check for updates
- Read the specified files
- Apply all rules from the guidelines
- Output findings using the format specified in the guidelines
If no files specified, ask the user which files to review.
Related skills
More from nexu-io/open-design and the wider catalog.
weread-year-in-review-video-template
Vertical 9:16 HyperFrames video template for WeRead-style annual reading reports with warm paper texture and editorial typography.
wpds
Apply WordPress's official design tokens, typography, and component patterns to themes and sites.
youtube-clipper
Automated YouTube clip generation with highlighting, captioning, and export.
8-bit-orbit-video-template
Retro pixel-art video template with Hyperframes for multi-scene motion design and interactive preview.
memory-evolution
|
memory-intake
|