Web Design Guidelines

What it does

Web Design Guidelines is a code-review workflow that retrieves Vercel’s current Web Interface Guidelines and checks selected UI files against them. It targets concrete implementation details such as labels, focus, forms, animation, images and navigation state. Findings are intended to identify code locations and actionable issues. It is particularly useful as a review pass after a feature is implemented.

When to use it

• Audit a checkout form for missing labels, ambiguous validation and keyboard focus problems.
• Review navigation and search state so links and browser history behave predictably.
• Check image dimensions, motion preferences and interactive controls across selected UI components.

Step-by-step workflow

1. Specify the files or component pattern to review. A narrow scope makes findings easier to verify and fix.
2. Retrieve the current guideline source linked by the skill. The rules live outside SKILL.md and can change independently.
3. Read the actual files and compare them against the relevant guideline categories. Preserve file and line references.
4. Report actionable findings in the requested file:line style. Distinguish observed code defects from behaviors that still need browser testing.
5. After fixes, test the relevant controls with a keyboard and inspect the rendered result. Use assistive-technology testing where required.

Example request

Use web-design-guidelines to review src/components/CheckoutForm.tsx and its styles. Fetch the current guidelines first. Check visible labels, autocomplete, validation messages, focus visibility, submission states and reduced-motion behavior. Return actionable findings with file and line references. Separate code-confirmed issues from checks requiring a browser. Preserve the current payment flow.

Worked example

An input placeholder can suggest what to type while leaving the field without a persistent visible label. The source review can identify that implementation issue and point to the component. It cannot establish the complete screen-reader experience from markup alone; the corrected form still needs interaction testing, including focus placement after validation fails.

What you get

Actionable UI findings with code locations.

How to evaluate the result

• Expect specific findings tied to actual files rather than a generic list of design advice. Each finding should explain the user-visible consequence and a useful correction.
• Verify the review used the current guideline source. If retrieval fails, report that limitation rather than silently claiming a current audit.
• After changes, test keyboard navigation, labels, error feedback and state transitions in the rendered page.

What you need

Relevant UI files, network access to the current guidelines and a skills-compatible client.

Setup and activation

The Vercel repository README documents installation through the skills CLI. Select a client that supports Agent Skills, inspect the chosen skill and supporting files, then follow that client’s installation path. Mention the skill name in a scoped request. Shared file format does not guarantee the same tools, network permissions or behavior across Claude Code, Codex and other clients. This page installs nothing. Before local installation, review and security-scan the exact source/version; catalogue inclusion is not security approval.

Limits and considerations

This is not a full accessibility certification, legal compliance assessment or replacement for testing with assistive technology. It requires network access to the guideline source and access to the relevant UI files. It reviews an interface rather than defining a new brand direction.

Related workflows

• Use Frontend Design for visual direction before this review pass.
• Use Web App Testing to exercise behaviors that static inspection cannot prove.

License and reuse

MIT at repository level; check current terms.

Further reading

• Publisher setup and repository README
• Current interface guideline source