web-design-guidelines

Reviews UI code files against fetched Web Interface Guidelines and reports findings.

Updated Jul 28, 2026
One-click install
npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill web-design-guidelines-aadi-110i
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Aadi-110i/PEP-PROJECT/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill web-design-guidelines-aadi-110i

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually checking 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 auditing your files against every rule. ## Core Features & Use Cases - Guideline-Based Review: Fetches the latest rules from the vercel-labs web-interface-guidelines repository before each audit, so checks always reflect current standards. - 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 merging a pull request, ask for a review of your React components to catch accessibility issues and design guideline violations early. ## Quick Start Ask the assistant to review your UI files against web interface guidelines, for example by saying: review the accessibility and design of my components in src/components.

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 of your UI files, and the Skill fetches the latest Web Interface Guidelines and checks your code against every rule. Findings are reported in a compact file:line format so you can jump directly to each issue.

What design guidelines does this UI review check against?

It checks against the Web Interface Guidelines maintained in the vercel-labs web-interface-guidelines repository. The rules are fetched fresh from the source URL before each review, so the audit always uses the current version rather than a cached copy.

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 do not specify any files, the Skill will ask which files you want reviewed.

Does the UI review work without internet access?

No, the Skill requires network access because it fetches the latest guidelines from a remote GitHub raw URL using WebFetch 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 in your code where a rule violation was detected.