skills.rest
Mark-Atef
Mark-AtefCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/Mark-Atef/Nebu --skill web-design-guidelines-mark-atef
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
efekrbasefekrbas
41

senior-frontend

Generate React and Next.js components and scaffolds with TypeScript and Tailwind CSS.

Community
Advanced
NealschNealsch

Forge-Regression-Testing

Selects and executes regression test suites to detect unintended behavior changes after code modifications.

Community
Intermediate
aadorianaadorian

hygiene

Run VS Code hygiene checks on staged TypeScript and CSS files.

Community
Intermediate
jens-wedinjens-wedin

a11y-qa

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

Community
Intermediate