web-design-guidelines

Audits UI code against Vercel Web Interface Guidelines with file:line findings.

15|3|Updated Jul 9, 2026
One-click install
npx skills add https://github.com/kiurakku/cursor-kit-for-ai --skill web-design-guidelines-kiurakku
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/kiurakku/cursor-kit-for-ai/tree/main/plugins/frontend/skills/web-design-guidelines
Command: npx skills add https://github.com/kiurakku/cursor-kit-for-ai --skill web-design-guidelines-kiurakku

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Reviewing UI code for accessibility, forms, animation, typography, and performance issues is slow and inconsistent when done manually. This Skill audits components, pages, or PR diffs against the Vercel Web Interface Guidelines and returns terse, actionable findings with exact file and line locations. ## Core Features & Use Cases - Rule-based UI audit: Checks 15 categories including accessibility, focus states, forms, animation, typography, images, performance, navigation, touch interaction, dark mode, i18n, and hydration safety. - Severity-ranked findings: Classifies each issue as Critical, Major, or Minor with a fix-before-merge model, output in VS Code-clickable file:line format. - Fresh rule fetching: Retrieves the latest guideline text from the vercel-labs repository before every review instead of relying on cached rules. - Use Case: Before merging a pull request that touches React components, run the audit on the changed files to catch missing aria-labels, transition: all, blocked paste handlers, and images without dimensions. ## Quick Start Audit the UI files changed in my current pull request against the Vercel Web Interface Guidelines and list findings by severity.

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 React components for accessibility issues?▼

Run the audit on your component files or PR diff to check for missing aria-labels, unlabeled form controls, div click handlers, and keyboard navigation gaps. Findings are reported with exact file and line numbers plus a severity level.

What are the Vercel Web Interface Guidelines?▼

They are a public rule set from vercel-labs covering accessibility, focus states, forms, animation, typography, performance, and interaction patterns for web UIs. The skill fetches the latest version from the GitHub repository before each review.

Can I audit only the files changed in a pull request?▼

Yes. If no scope is specified, the audit runs git diff --name-only and checks only the changed UI files. You can also scope it to specific files, a directory, or the whole src tree.

What happens if the guideline fetch fails?▼

The fetch is retried once. If it still fails, the audit proceeds using the embedded rule summary in the skill, but the output notes that the review may be based on stale rules.

When should I use a WCAG audit instead of this review?▼

Use this audit for fast code-level checks against interface guidelines during development and PR review. For deep WCAG conformance testing with keyboard and screen reader verification, defer to a dedicated accessibility audit skill.