How to Review UI Accessibility and UX with web-design-guidelines
Accessibility and usability issues in web applications are often overlooked during development. Catching these problems after release significantly increases remediation costs.
This article explains how to use the web-design-guidelines skill to review UI code against Web Interface Guidelines.
What This Skill Does
web-design-guidelines reviews UI code for compliance with Web Interface Guidelines:
- Automatically fetches guidelines from Vercel Labs
- Applies rules to specified files or patterns
- Reports issues in
file:lineformat - Checks accessibility, UX, and design best practices
This skill is suited for frontend developers maintaining UI quality standards and teams streamlining design reviews.
Installation
Prerequisites
- Claude Code installed
- WebFetch available (used to retrieve guidelines)
Install Command
claude mcp add github.com/langgenius/dify/tree/main/.claude/skills/web-design-guidelines
Usage
Basic Usage
Specify the files to review:
Review the UI in src/components/Button.tsx
The skill operates in these steps:
- Fetches guidelines from the Vercel Labs repository
- Reads the specified files
- Checks against all rules
- Outputs findings in
file:lineformat
Pattern Matching
You can review multiple files using patterns:
Check the UI in src/components/**/*.tsx
Guidelines Source
Guidelines are fetched from:
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
Fresh guidelines are retrieved for each review, ensuring rule updates are automatically reflected.
Important Considerations
Internet Connection Required
This skill fetches guidelines from the web and does not work in offline environments.
File Specification Needed
If no files or patterns are provided, the skill will ask which files to review. Deciding review targets in advance makes the process smoother.
Concise Output Format
Results use a terse file:line format. For detailed explanations of each finding, refer to the corresponding guideline rule.
Summary
web-design-guidelines enables UI code review against Web Interface Guidelines for accessibility and UX compliance. Guidelines are fetched automatically, ensuring checks always use the latest rules.
For full specifications, visit the skill detail page.