Skip to content
Apiara

Search design skills

Start here
Design & build a websitefrontend-design · Website codeRefine an existing interfaceimpeccable · UI review & refinementsReview web interface guidelinesweb-design-guidelines · Findings with file referencesCreate posters & static artworkcanvas-design · PNG / PDFDesign a presentationpptx · Editable PPTXChoose colors & typographytheme-factory · A theme applied to your workExplore generative artalgorithmic-art · Interactive p5.js artworkCreate video & motionremotion-best-practices · Remotion project & rendered videoImplement a Figma designfigma · UI code in your projectDocument a Stitch design systemdesign-md · DESIGN.mdBuild an interactive web prototypeweb-artifacts-builder · React prototype & bundled HTMLMake a Slack GIF reactionslack-gif-creator · Looping GIF
↑ ↓ Select   ↵ OpenEsc Close
Back to skills

Review web interface guidelines

web-design-guidelines · Vercel

Review UI code against Vercel's Web Interface Guidelines and locate issues in the files you choose.

Output
Findings with file references
Needs
UI source files and online access
Download skill

ZIP · 5 KB · MIT

Install folder: .claude/skills/web-design-guidelines/

Setup & example
Illustration, not a tested output.

What it does

What to bring
UI source files or a file pattern, and network access to the latest guidelines.
Requirements
An AI tool with access to your UI source files and the online guidelines.
Keep in mind
A code review does not replace testing real interactions, assistive technologies, or every device.

Try a design task

Once the skill is loaded, copy the task and adapt it to your brief.

Use web-design-guidelines to review the homepage and booking form source files in this project. Fetch the latest guidelines first. List issues with file and line references. Focus on keyboard access, form labels, focus states, and responsive layout. Review only; do not edit yet.
Installation instructions

For Claude's Code / project entry; manage chat and Cowork skills in account settings.

  1. Copy the skill folder, or use the installer

    Extract the ZIP and copy the complete web-design-guidelines folder into .claude/skills/ in your project.

    Or run this command in your project terminal with Node.js / npx. It gets the author's latest version, which may differ from the download.

    npx skills add vercel-labs/agent-skills --skill web-design-guidelines --agent claude-code
    Read the installation docs

  2. Confirm the skill is loaded

    Reopen your tool and check that web-design-guidelines is available. If it is missing, check the installation location in the upstream docs.

Review the result

  • Findings refer to the actual files you supplied.
  • Important findings can be reproduced in the browser.
  • Recheck the page after applying fixes.

Did you complete the task?

Next steps

web-design-guidelines — Apiara