web-design-guidelines

Provide a file path or glob pattern as the argument, and the skill loads the guidelines then checks each file against all rules. Findings are reported in terse file:line format grouped by file, ready to click open in VS Code.

It checks accessibility (aria-labels, semantic HTML), focus states, forms, animation (prefers-reduced-motion, transition: all), typography, images (dimensions, lazy loading), performance (list virtualization), dark mode, i18n (Intl APIs), and hydration safety.

Yes. The skill first tries to fetch guidelines from the vercel-labs GitHub repository, then falls back to a local cache file (guidelines-cache.md). If both fail, it continues using the assistant's internal knowledge of the guidelines.

Use this skill for general UI quality review against Vercel's guidelines, which include some accessibility rules. For dedicated accessibility and WCAG compliance audits, the documentation directs you to the separate accessibility skill instead.

Output is grouped by file using file:line references, with one terse finding per line stating the issue and location. Files with no violations are marked with a pass check, and explanations are omitted unless a fix is non-obvious.