skills.rest
kaitoartz
kaitoartzCOMMUNITY
Explore all skills by this author →
Website𝕏@kaitoartzzGitHub

web-design-guidelines

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

Updated Jun 30, 2026
Search Tags:#code review#accessibility#Vercel#ui review#web design#guidelines#UX audit
One-click install
npx skills add https://github.com/kaitoartz/dotfiles --skill web-design-guidelines-kaitoartz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/kaitoartz/dotfiles/tree/main/dot_gemini/config/skills/web-design-guidelines
Command: npx skills add https://github.com/kaitoartz/dotfiles --skill web-design-guidelines-kaitoartz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually auditing UI code for accessibility and design 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 Compliance Review: Fetches the latest rules from the vercel-labs web-interface-guidelines repository and applies them to your UI code. - Terse Findings Output: Reports violations in a compact file:line format for quick triage. - Use Case: Before shipping a new page, ask for a review of your React components to catch accessibility issues, UX anti-patterns, and design guideline violations in one pass. ## Quick Start Review my UI code in src/components against the Web Interface Guidelines and list all violations.

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, reads your files, and checks them against all rules. Findings are reported in a terse file:line format for quick fixes.

What guidelines does the web design review use?▼

It fetches the latest rules from the vercel-labs web-interface-guidelines repository on GitHub before each review. This ensures audits always use the current version rather than stale cached 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 files, the Skill asks which files you want reviewed.

Why does the review require network access?▼

The Skill fetches fresh guidelines from a raw GitHub URL before each review using WebFetch. Without network access to that URL, it cannot retrieve the rules needed to perform the audit.

What are the limitations of automated UI guideline review?▼

Static code review cannot evaluate runtime behavior, visual rendering, or actual screen reader output. Use it as a first-pass audit alongside manual testing and browser-based accessibility tools.

Related Skills

Explore More Design & Creative Skills→
trycompaitrycompai
1.8k

code

Enforce type safety and component patterns in TypeScript and React code.

Official
Intermediate
alo-expalo-exp
6

gsd-review-fix

Apply atomic fixes with DCO sign-off and verify via tests and re-review.

Official
Advanced
aroidoaroido

accessibility-audit

Audit web components for WCAG 2.1 AA accessibility issues.

Official
Intermediate
jens-wedinjens-wedin

a11y-qa

Audit web applications for accessibility violations via axe-core and eslint-plugin-jsx-a11y.

Community
Intermediate