web-design-guidelines

Review UI code files against Vercel Web Interface Guidelines for accessibility and design compliance.

Updated Aug 3, 2026

Search Tags:#accessibility #ui review #vercel #code audit #ux #design guidelines #web interface

Ready to run

npx skills add https://github.com/Mark-Atef/Nebu --skill web-design-guidelines-mark-atef

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Mark-Atef/Nebu/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/Mark-Atef/Nebu --skill web-design-guidelines-mark-atef

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually auditing UI code against design and accessibility best practices is slow and inconsistent, and teams often lack a shared, up-to-date checklist when reviewing frontend code. ## Core Features & Use Cases - Guideline-Based Review: Fetches the latest Web Interface Guidelines from the vercel-labs repository before each review so rules stay current. - File or Pattern Targeting: Accepts a specific file or glob pattern argument to scope the review to relevant UI code. - Terse Findings Output: Reports violations in a compact `file:line` format that is easy to scan and act on. - Use Case: Before merging a pull request that touches React components, ask for a UI review to catch accessibility issues and design guideline violations with exact line references. ## Quick Start Review my UI components in src/components against the web interface guidelines and list any accessibility or design violations.

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, reads your files, and checks them against all rules. 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 and accessibility best practices published in the vercel-labs/web-interface-guidelines repository. The skill fetches the latest version from the raw command.md file before each review so the rules are always current.

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

Yes, you can pass a file pattern as the argument to scope the review across multiple files. If you provide no argument, the skill asks which files you want reviewed.

Does the UI review work offline or without network access?▼

No, the skill requires network access because it fetches fresh guidelines from the GitHub raw URL before every review using WebFetch. Without connectivity it cannot retrieve the current rule set.

What output format does the design audit produce?▼

Findings are output in a terse file:line format as specified by the fetched guidelines. This makes it easy to locate each violation directly in your editor or CI logs.