web-design-guidelines

Review UI code files against Vercel Web Interface Guidelines and report findings.

Updated Jul 30, 2026

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

Ready to run

npx skills add https://github.com/mrestrepoj10/re-hear --skill web-design-guidelines-mrestrepoj10

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/mrestrepoj10/re-hear/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/mrestrepoj10/re-hear --skill web-design-guidelines-mrestrepoj10

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually auditing UI code for accessibility, design, and UX 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 current Web Interface Guidelines from the vercel-labs repository before each audit, so rules are always up to date. - File or Pattern Targeting: Accepts a specific file or glob pattern as an argument, or prompts you for files when none are given. - Terse Findings Output: Reports violations in a compact `file:line` format for quick triage and fixing. - Use Case: Before merging a pull request that touches React components, run the review on the changed files to catch accessibility and design guideline violations early. ## Quick Start Ask the assistant to review your UI files against the web interface guidelines, for example by saying: review src/components/Button.tsx for design guideline compliance.

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 and checks your files against every rule. Findings are reported in a terse file:line format so you can jump directly to each violation.

What are the Web Interface Guidelines used for UI review?▼

They are a rule set maintained in the vercel-labs/web-interface-guidelines repository covering interface design and accessibility best practices. The Skill fetches the current version from the raw GitHub URL before each review rather than relying on 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 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 a raw.githubusercontent.com URL before each review. Without connectivity it cannot retrieve the rule set needed to perform the audit.

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 each violation easy to locate and fix directly in your editor.