Web Design Guidelines

Reviews the actual code behind a web page against Vercel’s Web Interface Guidelines — a respected industry checklist for accessibility and UX — and returns precise, line-by-line findings so a page meets modern best practices.

Cowork & Chat

How to use it

Point it at the code files for a page (it asks which files if you don’t say). It fetches the latest guidelines fresh each time, checks your markup and styles against every rule — accessibility, keyboard and focus behavior, semantics, interaction details, UX patterns — and outputs terse file:line findings you (or a developer) can act on directly. It reviews the code itself, so it’s best for pages we’re building or have source for, like the onboarding hub or a custom landing page. Pair it with Design Auditor for the broader visual and dark-pattern review.

How to invoke / keep it on

Say “review my UI code against the web interface guidelines” or “check this page’s code for accessibility,” and tell it which files. Have the page’s source files in the session so it can read them.

20 powerful examples for Melinda Maria

Copy, tweak, make them yours. Just describe the task — Claude loads the skill automatically.

01"Review the HTML and CSS of our onboarding-hub landing page against the Web Interface Guidelines and give me the findings as file:line items, prioritizing accessibility and keyboard navigation."

02"Check the code for our custom Lariat landing page against best practices — focus states, semantic markup, and interaction details — and list exactly which lines to fix."

03"Run the web interface guidelines over the sign-up form component on our site and tell me, line by line, what fails accessibility and how to correct it."

04"Audit the code of our new product-page template against the latest Web Interface Guidelines, then summarize the most important fixes in plain English so I can brief the developer."

05"Check the onboarding hub’s dropdown navigation code against the guidelines — keyboard operability, ARIA roles, and focus trapping — and give me file:line fixes."

06"Review the interactive metric-mixer component’s code on our Overview page for accessibility and interaction best practices, and list exactly what to change line by line."

07"Run the guidelines over the logo carousel code on the hub home page — pause-on-hover, reduced-motion support, and keyboard access — and tell me each line that needs work."

08"Audit the code of our gift-guide landing page template against the latest guidelines, focusing on semantic structure and image handling, and give me precise file:line findings."

09"Check our email-signup pop-up’s code against the Web Interface Guidelines — focus management when it opens, escape-to-close, and the dismiss control — with line-level fixes."

10"Review the code behind our PDP’s sticky add-to-cart bar against best practices for mobile interaction and accessibility, and tell me which lines to correct."

11"Run the guidelines over our blog article template’s markup — heading hierarchy, link semantics, and landmark regions — and summarize the top fixes for the developer."

12"Audit the wholesale portal landing page code against the latest Web Interface Guidelines and give me a prioritized file:line list, explaining the important ones in plain English."

13"Check the hub footer’s code (the email-David and Slack buttons) against accessibility and interaction guidelines, and list exactly what to fix line by line."

14"Review our new countdown-banner component’s code against the guidelines — reduced-motion, contrast, and non-distracting updates — and give me line-level corrections."

15"Run the Web Interface Guidelines over the integration-status dashboard page’s code, focusing on the charts’ accessibility and keyboard access, and report file:line findings."

16"Audit the code of our reusable monthly-newsletter HTML template against best practices for accessible, robust email-safe markup, and tell me the most important fixes."

17"Check our homepage hero section’s code against the latest guidelines — heading order, alt text, and the CTA button’s semantics and focus state — with file:line items."

18"Review the search/filter UI code on our collection page against the guidelines for interaction and accessibility, and list line by line what fails and how to fix it."

19"Run the guidelines over the connector-card component used across the hub and give me precise findings plus a plain-English summary of what matters most to fix first."

20"Check our gift-finder quiz front-end code against the Web Interface Guidelines — form controls, error and progress states, focus order, and reduced-motion — and give me file:line fixes."

← Back to Design & Web