skills.rest
Syedyasir001
Syedyasir001COMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

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

Updated Apr 17, 2026
Search Tags:#code review#accessibility#frontend#ui review#web design#guidelines#ux audit
One-click install
npx skills add https://github.com/Syedyasir001/RVULibPass --skill web-design-guidelines-syedyasir001
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Syedyasir001/RVULibPass/tree/main/.agent/skills/library/web-design-guidelines
Command: npx skills add https://github.com/Syedyasir001/RVULibPass --skill web-design-guidelines-syedyasir001

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually checking UI code against design and accessibility best practices is slow and inconsistent. This Skill automates the review by fetching the latest Web Interface Guidelines and auditing your files against every rule. ## Core Features & Use Cases - Guideline-Based UI Review: Fetches the latest rules from the vercel-labs web-interface-guidelines repository before each audit, so reviews always use current standards. - Accessibility and UX Audits: Checks your UI code for compliance with interface, accessibility, and design best practices. - Terse Findings Output: Reports violations in a compact file:line format for quick triage and fixing. - Use Case: Before shipping a new page, ask for a review of your React components to catch accessibility and design guideline violations with exact file and line references. ## Quick Start Ask the assistant to review your UI files against web interface guidelines, for example by saying: review my UI code in src/components for accessibility and design best practices.

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 terse file:line format so you can jump directly to each issue.

How to audit a website against design best practices?▼

Specify the UI files to audit and the Skill retrieves current guidelines from the vercel-labs web-interface-guidelines repository, then applies all rules to your code. If you do not specify files, it asks which ones to review.

Does the web design review use up-to-date guidelines?▼

Yes, the Skill fetches fresh guidelines from the source URL before every review rather than relying on cached rules. This ensures each audit reflects the latest published Web Interface Guidelines.

What output format does the UI review produce?▼

Findings are output in a terse file:line format as specified by the fetched guidelines. Each finding points to the exact file and line where a rule violation occurs, making fixes straightforward.

What happens if I don't specify files to review?▼

If no file or pattern argument is provided, the Skill prompts you to specify which files to review. It does not scan your entire project automatically without a target.

Related Skills

Explore More Design & Creative Skills→
engmiguelamaral-pngengmiguelamaral-png

screenshot-to-code

Convert UI screenshots into runnable HTML, CSS, React, or Vue code.

Community
Advanced
Anuar7777Anuar7777

web-design-guidelines

Identify UI files violating Web Interface Guidelines and report fixes in file:line format.

Community
Intermediate
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
yutnayutna
2

nextjs-browser-qa

Automate browser QA checks for Next.js applications with Playwright-based tests.

Community
Advanced