skills.rest
wolfstar-project
wolfstar-projectOFFICIAL
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Review UI code files against Vercel Web Interface Guidelines and report findings.

Updated Aug 8, 2026
Search Tags:#code review#accessibility#ui review#web design#vercel#guidelines#ux audit
One-click install
npx skills add https://github.com/wolfstar-project/code-zero --skill web-design-guidelines-wolfstar-project
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/wolfstar-project/code-zero/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/wolfstar-project/code-zero --skill web-design-guidelines-wolfstar-project

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually checking UI code against accessibility and design best practices is slow and inconsistent. This Skill automates the review by fetching the latest Web Interface Guidelines and auditing your files against every rule. ## Core Features & Use Cases - Guideline-Based Review: Fetches the latest Web Interface Guidelines from the vercel-labs repository before each review, so rules are always current. - File or Pattern Targeting: Accepts a specific file or glob pattern argument to scope the review to the code you care about. - Terse Findings Output: Reports violations in a compact file:line format for quick triage and fixing. - Use Case: Before merging a pull request with new React components, run the review to catch accessibility issues, UX anti-patterns, and design guideline violations in one pass. ## Quick Start Ask the assistant to review your UI files against web interface guidelines, for example by saying "review my UI components in src/components against the web interface guidelines".

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review my UI code for accessibility issues?▼

Provide a file or pattern argument and the Skill fetches the latest Web Interface Guidelines, then checks your files against every rule. Findings are reported in a terse file:line format so you can jump directly to each violation.

What are the Vercel Web Interface Guidelines?▼

They are a set of UI, UX, and accessibility rules maintained in the vercel-labs/web-interface-guidelines repository. This Skill fetches the latest version from the raw command.md file before each review, so the rules are never stale.

Can I review multiple files or a whole directory at once?▼

Yes, the Skill accepts a file-or-pattern argument, so you can pass a glob pattern covering multiple files. If you provide no argument, it will ask which files you want reviewed.

Does this Skill modify my code automatically?▼

No, it only reviews files and outputs findings in a file:line format. Fixing the reported issues is a separate step you perform or request after reading the findings.

Why does the review need network access?▼

The Skill fetches fresh guidelines from the vercel-labs GitHub repository before each review using WebFetch. Without network access it cannot retrieve the current rule set and cannot perform an accurate audit.

Related Skills

Explore More Design & Creative Skills→
KuassKuass
1

mockup-to-code

Convert UI mockups and design files into React, Vue, or HTML/CSS code.

Community
Advanced
sgcarstrendssgcarstrends
21

typography-spacing-enforcer

Scan component files for typography violations and legacy spacing patterns.

Official
Basic
aroidoaroido

accessibility-audit

Audit web components for WCAG 2.1 AA accessibility issues.

Official
Intermediate
jens-wedinjens-wedin

a11y-qa

Audit web applications for accessibility violations via axe-core and eslint-plugin-jsx-a11y.

Community
Intermediate