web-design-guidelines

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

Updated Jun 28, 2026
One-click install
npx skills add https://github.com/412181-HerediaLara/ScaffoldingBE-FE --skill web-design-guidelines-412181-heredialara
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/412181-HerediaLara/ScaffoldingBE-FE/tree/main/FE/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/412181-HerediaLara/ScaffoldingBE-FE --skill web-design-guidelines-412181-heredialara

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually auditing UI code against design and accessibility best practices is slow and inconsistent. This Skill automates the review by fetching the latest Web Interface Guidelines and checking your files against every rule. ## Core Features & Use Cases - Guideline-Based Review: Fetches the latest Web Interface Guidelines from the official Vercel source before each audit, so rules are always current. - File or Pattern Targeting: Reviews specific files or glob patterns you provide, or prompts you to specify which files to check. - Terse Findings Output: Reports violations in a compact file:line format for quick triage and fixing. - Use Case: Before shipping a new React page, ask for a UI review to catch accessibility issues, inconsistent patterns, and guideline violations in one pass. ## Quick Start Ask the assistant to review my UI files 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 the file paths or a glob pattern for your UI files, and the Skill fetches the latest Web Interface Guidelines and checks each file against all rules. Findings are reported in a compact file:line format so you can jump directly to each issue.

What are the Vercel Web Interface Guidelines?

They are a set of UI and accessibility best practices published by vercel-labs in the web-interface-guidelines repository. The Skill fetches the current version from the raw command.md file on GitHub before every review, so the rules are never stale.

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

Yes, you can pass a file pattern as the argument to review multiple matching files in one run. If you provide no files, 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 the latest guidelines from the GitHub raw URL before each review. Without connectivity, the rules cannot be retrieved and the audit cannot proceed.

What output format does the design audit produce?

The audit outputs findings in a terse file:line format as specified by the fetched guidelines. Each finding points to the exact location of the violation so you can navigate and fix issues quickly.