web-design-guidelines

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

2|1|Updated Apr 17, 2025
One-click install
npx skills add https://github.com/abraham-yusuf/pernikahan-web --skill web-design-guidelines-abraham-yusuf
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/abraham-yusuf/pernikahan-web/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/abraham-yusuf/pernikahan-web --skill web-design-guidelines-abraham-yusuf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually auditing UI code for accessibility, UX, and design 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 rules from the vercel-labs web-interface-guidelines repository before each audit, so checks stay 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, ask for a review of your React components to catch accessibility and UX issues against current best practices. ## Quick Start Ask the assistant to review your UI files, for example: review src/components/CheckoutForm.tsx 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 path or glob pattern as the argument, and the Skill fetches the latest Web Interface Guidelines, reads your files, and checks them against every rule. Findings are reported in a terse file:line format for quick fixing.

What guidelines does this UI review use?

It fetches the rules from the vercel-labs/web-interface-guidelines repository on GitHub before each review. This ensures the audit always uses the most current version of the guidelines rather than a stale local copy.

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.

What output format does the UI audit produce?

Findings are output in a terse file:line format as specified by the fetched guidelines. This makes it easy to jump directly to each violation in your editor and resolve it.

Does the UI review work offline?

No, it requires network access because it fetches the latest guidelines from the raw GitHub URL before each review. Without connectivity, the rules cannot be retrieved and the audit cannot proceed.