web-design-guidelines
Reviews UI code for compliance with web interface design guidelines, checking accessibility, design, and user experience to ensure interface quality and standards.
npx skills add vercel-labs/agent-skills --skill web-design-guidelinesBefore / After Comparison
1 组In the past, reviewing UI code for compliance with web design guidelines primarily relied on manual inspection. This was not only time-consuming and labor-intensive but also prone to missing issues due to subjective judgment or fatigue, especially concerning accessibility, design specifications, and user experience. This led to inconsistent interface quality, degraded user experience, and even potential compliance risks.
Now, by reviewing UI code with automated tools, it's possible to efficiently and accurately check its compliance with web interface design guidelines. These tools can quickly identify accessibility defects, design inconsistencies, and potential user experience issues, providing detailed reports and improvement suggestions. This significantly enhances review efficiency and accuracy, ensures interface quality and standards, and provides users with a higher quality and more user-friendly interactive experience.
description SKILL.md
name: web-design-guidelines description: Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices". metadata: author: vercel version: "1.0.0" argument-hint:
Web Interface Guidelines
Review files for compliance with Web Interface Guidelines.
How It Works
- Fetch the latest guidelines from the source URL below
- Read the specified files (or prompt user for files/pattern)
- Check against all rules in the fetched guidelines
- Output findings in the terse
file:lineformat
Guidelines Source
Fetch fresh guidelines before each review:
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.
Usage
When a user provides a file or pattern argument:
- Fetch guidelines from the source URL above
- Read the specified files
- Apply all rules from the fetched guidelines
- Output findings using the format specified in the guidelines
If no files specified, ask the user which files to review.
forumUser Reviews (0)
Write a Review
No reviews yet
Statistics
User Rating
Rate this Skill