skills.rest
webdevarif
webdevarifCOMMUNITY
Explore all skills by this author →
Website𝕏@webdevarifGitHub

web-design-guidelines

Review UI code against Vercel Web Interface Guidelines for accessibility, typography, and performance compliance.

Updated Apr 18, 2026
Search Tags:#code review#accessibility#design system#vercel#design review#ui audit#web guidelines
One-click install
npx skills add https://github.com/webdevarif/claude-skills --skill web-design-guidelines-webdevarif
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/webdevarif/claude-skills/tree/main/web-design-guidelines
Command: npx skills add https://github.com/webdevarif/claude-skills --skill web-design-guidelines-webdevarif

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Manually auditing UI code for design system compliance is slow and inconsistent, and teams often miss accessibility, typography, and performance issues before shipping. ## Core Features & Use Cases - Guideline-Based Code Review: Checks UI files against the pinned Vercel Web Interface Guidelines covering accessibility, focus states, forms, animation, typography, images, performance, navigation, dark mode, i18n, and hydration safety. - Reproducible Pinned Snapshot: Uses a vendored copy of the guidelines in references/guidelines.md as the default source, with an optional fetch of the live upstream version to detect rule changes. - Terse Actionable Output: Reports findings grouped by file in a VS Code-clickable file:line format, flagging anti-patterns like transition: all, missing aria-labels, and images without dimensions. - Use Case: Before merging a pull request, run the review on changed React components to catch missing focus-visible styles, unlabeled icon buttons, and hardcoded date formats. ## Quick Start Ask the assistant to review your UI files against the Vercel Web Interface Guidelines, for example: review src/components/Button.tsx for design guideline compliance.

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 against the Vercel Web Interface Guidelines?▼

Provide a file path or glob pattern, and the review loads the pinned guidelines from references/guidelines.md, reads your files, and checks every rule. Findings are output in a terse file:line format grouped by file.

What accessibility issues does a web design guidelines review catch?▼

It flags icon buttons missing aria-label, form controls without labels, div elements with click handlers instead of buttons, images without alt text, missing focus-visible styles, and async updates lacking aria-live regions.

Does the guidelines review use the latest rules or a fixed version?▼

The default execution path uses a pinned snapshot vendored in references/guidelines.md for reproducible results. Optionally, it can fetch the live upstream version from the vercel-labs repository and diff it against the snapshot.

What output format does the UI compliance review produce?▼

Findings are grouped by file using a VS Code-clickable file:line format, such as src/Button.tsx:42 - icon button missing aria-label. Files with no issues are marked with a pass indicator, and explanations are omitted unless a fix is non-obvious.

What are the limitations of automated design guideline checks?▼

The review performs static rule matching on source code, so it cannot judge visual aesthetics, actual rendered contrast, or runtime animation smoothness. Subjective design decisions and cross-browser visual testing still require manual review.

Related Skills

Explore More Design & Creative Skills→
t0labt0lab
2

web-design-guidelines

Review UI code against Web Interface Guidelines and output file:line findings.

Official
Intermediate
ahiendzahiendz
3

web-design-guidelines

Fetch Web Interface Guidelines and report UI compliance issues in file:line format.

Community
Intermediate
aroidoaroido

accessibility-audit

Audit web components for WCAG 2.1 AA accessibility issues.

Official
Intermediate
Owl-ListenerOwl-Listener
2.5k

platform-conventions

Maps iOS HIG and Material Design conventions to guide native app design decisions.

Community
Intermediate