web-design-guidelines

Review UI code files against Vercel's Web Interface Guidelines and report violations.

Updated Aug 6, 2026
One-click install
npx skills add https://github.com/ferrarifankid04/ai-skills-public --skill web-design-guidelines-ferrarifankid04
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/ferrarifankid04/ai-skills-public/tree/main/claude-code/skills/web-design-guidelines
Command: npx skills add https://github.com/ferrarifankid04/ai-skills-public --skill web-design-guidelines-ferrarifankid04

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually auditing UI code for accessibility 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 - Automated UI Audits: Checks specified files or patterns against the full set of Web Interface Guidelines rules. - Always-Current Rules: Fetches the latest guidelines from the official Vercel source before each review, so audits never rely on stale rules. - Precise Findings: Outputs violations in a terse file:line format for quick navigation and fixing. - Use Case: Before shipping a new landing page, ask for a review of your React components to catch accessibility issues, contrast problems, and UX anti-patterns in one pass. ## Quick Start Ask the assistant to review my UI files in the components directory 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 files or a file pattern you want reviewed, and the Skill fetches the latest Web Interface Guidelines and checks your code against every rule. Findings are reported in a concise file:line format so you can jump directly to each issue.

What are the Web Interface Guidelines this audit uses?

The guidelines are maintained by Vercel and fetched fresh from the vercel-labs/web-interface-guidelines repository before each review. This ensures the audit always applies the most current accessibility and design rules rather than outdated cached versions.

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

Yes, you can pass a file pattern or specify multiple files as the argument. If you provide no files, the Skill will prompt you to specify which files to review before running the audit.

Does the UI review work offline or without network access?

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

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 pipe results into other tooling.