skills.rest
UlaYuga
UlaYugaCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

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

Updated May 5, 2026
Search Tags:#accessibility#frontend#ui review#vercel#design review#ux audit#web guidelines
One-click install
npx skills add https://github.com/UlaYuga/promo-preflight --skill web-design-guidelines-ulayuga
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/UlaYuga/promo-preflight/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/UlaYuga/promo-preflight --skill web-design-guidelines-ulayuga

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 latest rules from the vercel-labs web-interface-guidelines repository before each audit, so checks always reflect current best practices. - File or Pattern Targeting: Accepts a specific file or glob pattern as an argument, or prompts you to choose which files to review. - Terse Findings Output: Reports violations in a compact file:line format for quick triage and fixing. - Use Case: Before merging a pull request, ask for a review of your React components to catch accessibility and UX issues flagged by the guidelines. ## Quick Start Ask the assistant to review my UI files in src/components 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 a file or pattern argument and the Skill fetches the latest Web Interface Guidelines, then checks your files against every rule. Findings are reported in a terse file:line format so you can locate and fix each issue quickly.

What are the Vercel Web Interface Guidelines?▼

They are a set of UI, accessibility, and UX rules maintained in the vercel-labs/web-interface-guidelines repository. The Skill fetches the current version from the raw command.md file before each review, so checks always use the latest rules.

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

Yes, you can pass a file pattern as the argument to review multiple matching files in one run. If you provide no argument, the Skill 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 GitHub raw URL before each review. Without connectivity, the rules cannot be retrieved and the review cannot proceed.

What output format does the UI audit produce?▼

Findings are output in a terse file:line format as specified by the fetched guidelines. This makes it easy to jump directly to each violation in your editor.

Related Skills

Explore More Design & Creative Skills→
datamonsterrdatamonsterr

react

Guide React component creation and routing in Next.js and React Router.

Community
Intermediate
cloudvoyantcloudvoyant

pr-fix

Fetch open pull requests and generate proposed code fixes for unresolved review comments.

Official
Intermediate
samymitysamymity
1

browser-qa

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

Community
Intermediate
RomualdPRomualdP

Zero Warnings Enforcer

Enforce zero ESLint warnings and TypeScript errors via root-cause fixes.

Community
Advanced