skills.rest
shengmingzhishu
shengmingzhishuCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Review UI code against Vercel Web Interface Guidelines for design, accessibility, and UX compliance.

Updated Jul 31, 2026
Search Tags:#code review#accessibility#a11y#vercel#design review#ux#ui audit
One-click install
npx skills add https://github.com/shengmingzhishu/LeeCommonVideoCut --skill web-design-guidelines-shengmingzhishu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/shengmingzhishu/LeeCommonVideoCut/tree/main/.rules-skills/react-stack/.trae/skills/web-design-guidelines
Command: npx skills add https://github.com/shengmingzhishu/LeeCommonVideoCut --skill web-design-guidelines-shengmingzhishu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually auditing front-end code for design consistency, accessibility, and UX best practices is slow and error-prone. This Skill automates the review of UI code against the official Vercel Web Interface Guidelines, producing concise file:line findings with fix suggestions. ## Core Features & Use Cases - Design Compliance Audit: Checks spacing scale (8px baseline grid), typography scale, color tokens, elevation hierarchy, border radius, and icon sizing consistency. - Accessibility (A11y) Checks: Verifies color contrast ratios, visible focus states, alt text, semantic HTML, ARIA labels, form label associations, tab order, and prefers-reduced-motion support. - UX Best Practice Review: Validates hover/active states, loading skeletons, empty and error states, 44x44px touch targets, pointer cursors, and content-jump prevention. - Use Case: During a code review of a React pull request, run this Skill on the changed component files to get a terse list of design and accessibility violations with exact line references before merging. ## Quick Start Ask the AI to review the specified UI files or glob pattern against the Vercel Web Interface Guidelines and list all design, accessibility, and UX issues.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit UI code for accessibility issues?▼

Provide the target files or a glob pattern, and the review checks color contrast ratios, focus states, alt text, semantic HTML, ARIA labels, form labels, tab order, and prefers-reduced-motion support. Findings are reported in file:line format with fix suggestions.

What design rules does the Vercel Web Interface Guidelines review check?▼

It checks spacing scale consistency on an 8px baseline grid, typography scale usage, color palette adherence to design tokens, elevation and shadow hierarchy, border radius scale, and icon usage and sizing consistency.

Does this tool generate fixed UI code automatically?▼

No, it is an audit and review tool that outputs a problem list with repair suggestions in file:line format. It complements design-generation skills rather than replacing them, so fixes are applied by the developer or a code-generation skill.

Can I review multiple files at once with a glob pattern?▼

Yes, you can specify individual file paths or a glob pattern for batch review. If no files are specified, the Skill asks which files to review before proceeding.

Why does the review fetch guidelines from a remote URL each time?▼

The Skill fetches the latest rules from the vercel-labs web-interface-guidelines repository before each review so audits always reflect the current standard. This requires network access to retrieve the raw command.md file.

Related Skills

Explore More Design & Creative Skills→
remix-runremix-run
33.3k

review-pr

Review Remix pull requests from a local checkout for correctness and security.

Official
Intermediate
VirtoCommerceVirtoCommerce
2

qa-storybook

Detect visual and behavioral regressions in Storybook components through structured QA testing.

Official
Advanced
bitovibitovi
1

component-reuse

Audit frontend codebases to identify reusable UI components before creating new ones.

Official
Intermediate
VKirillVKirill
15

web-qa-2026

Run aggregated npm run verify checks for web quality in CI.

Community
Advanced