skills.rest
nielslataire
nielslataireCOMMUNITY
Explore all skills by this author →
GitHub

vercel-web-design-guidelines

Audits UI code against Vercel's Web Interface Guidelines and reports violations by file and line.

Updated May 21, 2025
Search Tags:#code review#accessibility#a11y#frontend#vercel#ui audit#web guidelines
One-click install
npx skills add https://github.com/nielslataire/Group-LN --skill vercel-web-design-guidelines-nielslataire
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-web-design-guidelines
Source: https://github.com/nielslataire/Group-LN/tree/main/.claude/skills/vercel-web-design-guidelines
Command: npx skills add https://github.com/nielslataire/Group-LN --skill vercel-web-design-guidelines-nielslataire

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? UI code often ships with accessibility, performance, and interaction defects that manual review misses. This Skill audits your frontend files against 100+ concrete rules from Vercel's Web Interface Guidelines and reports each violation with an exact file:line location. ## Core Features & Use Cases - Rule-Based UI Audit: Checks keyboard support, focus management, forms, animation, layout, typography, dark mode, hydration, and i18n against MUST/SHOULD/NEVER severity rules. - Anti-Pattern Detection: Flags common mistakes like transition: all, disabled zoom, missing aria-labels, unvirtualized long lists, and <div onClick> navigation. - Actionable Output: Returns terse findings grouped by file in file:line format, clickable in VS Code, with pass/fail status per file. - Use Case: Before merging a pull request, run the audit on changed components like src/Button.tsx to catch missing focus rings, unlabeled icon buttons, and animations ignoring prefers-reduced-motion. ## Quick Start Audit the file src/components/CheckoutForm.tsx against the web interface guidelines and list all violations.

Frequently Asked Questions about vercel-web-design-guidelines

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

FAQPage Schema
How do I audit React components for accessibility issues?▼

Point the audit at your component files and it checks keyboard support, focus-visible rings, aria-labels on icon buttons, native semantics, and redundant status cues. Findings are reported as file:line entries grouped per file.

What UI anti-patterns does this audit detect?▼

It flags disabled browser zoom, blocked paste, transition: all, outline-none without focus replacement, div-based navigation, images without dimensions, unvirtualized long lists, unlabeled inputs, and hardcoded date formats.

Does the audit check animation and reduced motion support?▼

Yes, it verifies animations honor prefers-reduced-motion, use compositor-friendly properties like transform and opacity, avoid layout property animation, and remain interruptible with correct transform-origin.

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

Yes, the argument-hint accepts a file or pattern, so you can target a single component, a glob of files, or a directory. Results are grouped by file with a pass marker for clean files.

What are the limitations of a static UI guidelines audit?▼

It reviews source code statically, so runtime behaviors like actual focus trapping, scroll restoration, and real device touch targets still need manual or browser-based testing to fully verify.

Related Skills

Explore More Software Engineering Skills→
ebknebkn
8

update-pr

Update GitHub pull request titles and bodies with branch commits.

Community
Advanced
VirtoCommerceVirtoCommerce
2

qa-accessibility

Audits web interfaces for WCAG 2.2 AA compliance using axe-core and Lighthouse checks.

Official
Advanced
Hack23Hack23
9

playwright-testing

Automate end-to-end browser testing for static websites with Playwright.

Official
Advanced
pnewsampnewsam
1

compliance-accessibility

Review web interfaces against WCAG 2.2 accessibility requirements.

Community
Intermediate