A form is hard to navigate by keyboard
Review labels, focus states, error messaging, and keyboard handlers in the relevant form files.
Web Design Guidelines by Vercel Labs
Use Web Design Guidelines by Vercel Labs to review interface source files against its current Web Interface Guidelines. Give your agent a page or component to inspect, identify issues in interaction and accessibility, and receive findings tied to file and line locations for focused follow-up.
Install and get started
Choose your agent to see how to get started. In Floatboat, copy a request that asks the agent to read the original instructions. Other options show the Skill installation command or the publisher’s native setup steps.
Choose an agent
Start in Floatboat
Copy the request into a Floatboat conversation
Read the original Web Design Guidelines instructions at https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md. Explain its purpose, required tools, and installation options, then help me use it.Let the agent read the original instructions and check how to use them in your environment.
Download Floatboat ↗Try this request
Review the checkout form components against current web interface guidelines. Report only actionable file:line findings.
About Web Design Guidelines
Web Design Guidelines is a review Skill published by Vercel Labs for checking UI source files against Web Interface Guidelines. Its workflow first retrieves the current rules, then reads the files or patterns named by the user and reports located findings. This makes it useful for reviewing a page or shared component before release, especially when you need issues that can be traced back to implementation. The Skill is a review entry point; the guideline document is maintained separately and should be fetched for each review. Source findings should be checked against the rendered interface, with keyboard and assistive-technology testing added where the task requires it.
Use Cases for Web Design Guidelines
Explore source-based interface reviews for forms, controls, and pages approaching release. Use the current guidelines to inspect labels, focus behavior, interaction feedback, and shared components, then connect each finding to a file location and the user behavior you need to verify.
A control behaves inconsistently
Inspect navigation state, touch targets, feedback, and interaction semantics rather than discussing visual taste alone.
A new page needs a pre-release UI pass
Scope the review to the new page and its shared components so findings map back to code owners.
How to Review UI with Web Design Guidelines
Provide the page or component files you want reviewed and describe the user flow. Ask the agent to retrieve the current guidelines, inspect the selected scope, and report located issues. Verify findings against the rendered interface before deciding which changes to make.
- 01
Choose files and user flow
Provide page or component paths and describe the interaction to review. Include shared components that affect the selected flow.
- 02
Review against current guidelines
Ask the agent to fetch the latest Web Interface Guidelines and inspect the named files. Request findings with file and line locations.
- 03
Verify and resolve findings
Match findings to the rendered UI before editing. Test relevant keyboard, focus, and form behavior after changes.
Explore More Agent Skills
Read another Skill guide and check its original source before using it.
Web Design Guidelines FAQ
Does the Skill contain all web design rules?
No. Its SKILL.md points to a separate, freshly fetched Web Interface Guidelines source.
Can it review a website URL alone?
Its documented workflow reads specified source files. For visual or browser behavior, add a separate rendered-page review.
What does the result look like?
The source asks for terse findings tied to file and line locations, making them easier to verify and fix.
Does a clean review guarantee accessibility?
No. Assistive-technology and real interaction tests are still needed; file review is one layer.
Which checks still need hands-on interaction?
Try keyboard navigation, focus movement, form errors, and layout at narrow widths. Source inspection can identify likely issues, but these interaction checks establish how the interface behaves for a person.
Should I rerun a review after changing shared components?
Yes, include representative pages that consume the changed component. A button, dialog, or navigation fix can change behavior across several routes even when only one source file was edited.
What happens if the agent cannot fetch the guidelines?
The review needs the current guideline source. If it cannot be retrieved, restore access or use a dated copy; results based on that copy cannot establish compliance with later rule changes.