Access
A form is hard to navigate by keyboard
Review labels, focus states, error messaging, and keyboard handlers in the relevant form files.
01 / The skill · Web UI · Design review
Web Design Guidelines: inspect the interface code
A review Skill that fetches current Web Interface Guidelines, reads the files you name, and reports findings at file-and-line level.
Publisher, source, and installation
Published by Vercel Labs · Type: UI code-review Skill
Independent guide. Vercel Labs has not endorsed Floatboat.
Upstream installation
npx skills add vercel-labs/agent-skills --skill web-design-guidelinesUpstream Skills CLI command. The Skill also fetches a separate live guideline source during review.
A realistic request
The installed SKILL.md is a short review workflow rather than a frozen rulebook. Its agent fetches the current guideline source for each review, checks the requested files, and returns terse findings.
Ask the agent
“Review the checkout form components against current web interface guidelines. Report only actionable file:line findings.”
A useful result
A useful response points to the exact control and line, explains the interaction problem, and avoids unlocated aesthetic opinions.
What to review with Web Design Guidelines
Point it at a concrete file set and an interface question.
Interaction
A control behaves inconsistently
Inspect navigation state, touch targets, feedback, and interaction semantics rather than discussing visual taste alone.
Review
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.
What a code review cannot prove
- Visual proof that the rendered page looks right at every viewport.
- An open-ended design concept without source files to inspect.
How the guideline review runs
The original workflow fetches current rules, inspects named files, then reports located findings.
- 01
Select files
Name the page or component files; the original workflow asks for a path if none is provided.
- 02
Fetch current rules
Read the live guideline source rather than relying on a cached checklist.
- 03
Verify located findings
Check reported file:line issues against the rendered interface before editing.
02 / Practical guide
Turn guidelines into located findings
The useful output is a file-and-line finding you can verify, not a generic redesign brief.
Where do the design rules come from?
The SKILL.md instructs the agent to fetch the latest Web Interface Guidelines from Vercel Labs' separate guideline source before every review. The installed Skill is the workflow; the current rules are fetched at review time.
Is this an accessibility certification?
No. File-level findings can uncover implementation problems, but rendered behavior, assistive technology, device interactions, and applicable standards need separate testing.
What you can take away
- File-and-line UI findings
- A review scoped to named source files
- Issues to verify in the rendered page
What to check first
- Was the latest guideline source fetched?
- Are the findings tied to the requested files?
- Does the live UI reproduce the issue?
Explore More Agent Skills
Read another Skill guide and check its original source before using it.
Frequently Asked Questions
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.
03 / Put it to work · Review UI work
Bring interface findings back to the task
Use Floatboat to keep the affected screen, source files, and proposed fixes together while you decide what to change.