A finished-looking page can still leave users unable to submit a form, navigate with a keyboard, or understand an error. This skill reviews interface source against explicit rules. Its normal output is a concise list of locations and problems, useful before release or during a focused usability cleanup.
Install and invoke
From the project root, use a terminal with Node.js and npm to install this individual skill for Claude Code. For Codex, replace --agent claude-code with --agent codex. This is a project-scoped installation. Refresh or reopen the agent session after installation, then name the skill explicitly in your request.
npx skills@latest add vercel-labs/agent-skills --skill web-design-guidelines --agent claude-code
Specify files and the user's task
Adapt this first request to your project:
Use web-design-guidelines to review src/app/checkout/page.tsx and its form components. Fetch the current rules and report findings without editing. Prioritize keyboard operation, labels, submission errors, focus, and mobile overflow. Include file and line locations, separating checkout blockers from copy-style suggestions.
A request to review an entire website leaves too much scope undefined. Supply the page, related components, and a concrete journey such as entering an address and completing checkout. The skill fetches the current Web Interface Guidelines before inspecting the requested files. Its rules are therefore not permanently frozen in the installed package, and access to the rules source is part of the workflow.
Fix obstacles before stylistic details
The guidelines cover accessible names for icon buttons, form labels, visible focus, semantic controls, asynchronous announcements, and actionable errors. On a checkout screen, a clickable div replacing a button or an error that cannot be located deserves attention before punctuation preferences.
Request file and line locations so findings can become small edits. A general suggestion to improve accessibility is less useful than identifying the exact control and missing behavior. When an application uses wrapper components, inspect their implementation before reporting a missing label or focus treatment that may already be supplied internally.
Then consider content and layout. Real addresses can be longer than sample text; sticky overlays can hide focused controls; images without dimensions can shift surrounding content. Motion and autoplay media also need appropriate reduced-motion behavior and controls. Broad coverage is a reason to prioritize, not a reason to rewrite the entire interface in one pass.
Rank findings by one user journey
Choose what a visitor actually needs to finish, such as “address → delivery option → submit order” on checkout. At each step, ask the agent for locatable source findings: does a field have a visible label, is an error near it and readable, does loading provide feedback, and can keyboard users reach and see focus? The guideline file can change, so read the current source rather than treating a remembered checklist as the complete latest text.
Fix blockers first. A field error expressed only through a red border can prevent some users from knowing what to change; it matters more than making every shadow uniform. A report needs file and line, user consequence and a concrete remedy. If a shared component supplies the label internally, follow the component before reporting it missing from the page.
Bring static guidance into the running UI
After a fix, complete the journey with a keyboard, submit both empty and invalid values, and test narrow screens and long content for clipping. Make sure modals, sticky footers and dynamic notices do not swallow focus. The Skill is a source-level review entry point; runtime layout, screen-reader behavior and full accessibility conformance require further testing.
Another case: filtering returns no results
Review a search page’s empty state with a concrete request: “After a user enters a query with no matches, does the UI explain the result, preserve the query and offer a way to clear filters? Can loading be distinguished from a true empty result? Report current-guideline findings with component files and lines.” Acceptance is more than a screenshot: enter, submit and clear the query with a keyboard, then inspect a narrow screen for text hidden by the filter bar. If results update asynchronously, confirm that status text changes with them instead of retaining the previous count.
Guidelines still need a concrete visual direction
For a page built from scratch, first supply visual direction, reference pages, content hierarchy, and available assets; then use this skill to review the result. A user who installed design and React rules before asking Codex for a portal from an empty repo still got a generic UI. Guidelines can expose usability and hierarchy issues, but they do not choose a brand style; compare the first result with the intended design and give concrete revisions.