skills.rest
eburairu
eburairuCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Review UI code against Vercel Web Interface Guidelines for accessibility and semantics.

1|Updated Jan 5, 2026
Search Tags:#accessibility#ARIA#frontend#semantic-html#design-review#UI-guidelines
One-click install
npx skills add https://github.com/eburairu/Squat-Tracker --skill web-design-guidelines-eburairu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/eburairu/Squat-Tracker/tree/main/.agent/skills/web-design-guidelines
Command: npx skills add https://github.com/eburairu/Squat-Tracker --skill web-design-guidelines-eburairu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams verify that UI code conforms to the Vercel Web Interface Guidelines, reducing design drift during reviews.

Core Features & Use Cases

  • Guideline conformance checks: automatically assess components against Vercel guidelines.
  • Accessibility & semantics review: ensure aria-labels, labels, keyboard navigation, and semantic HTML.
  • Code review efficiency: generate concise feedback for UI code reviews and design audits.

Quick Start

Run a conformance review of the provided UI code against the Vercel Web Interface Guidelines.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit UI code for accessibility and semantic HTML compliance?▼

To audit UI code for accessibility, you can run an automated review that checks for accessible labels, semantic HTML, ARIA usage, and keyboard navigation to ensure components meet Vercel Web Interface Guidelines.

Can I use this design review tool with React and Vue components?▼

Yes, this design review tool works with frontend projects and component libraries built with HTML, CSS, JavaScript, React, and Vue, checking them against consistent design tokens and UI guidelines.

What is the best way to check color contrast and ARIA labels in frontend projects?▼

The best way to check color contrast and ARIA labels is to run an automated conformance review that validates these accessibility attributes against established web interface guidelines.

How do I generate concise UI code review feedback for a pull request?▼

You can generate concise UI code review feedback for pull requests by running an automated design audit that evaluates style conformity, semantic structure, and accessibility compliance.

Why does my component library suffer from design drift during code reviews?▼

Component libraries suffer from design drift during code reviews when UI code lacks automated conformance checks for consistent design tokens, semantic HTML, and accessibility standards.

Do I need a specific framework to verify keyboard navigation and ARIA usage?▼

No, you do not need a specific framework. You can verify keyboard navigation and ARIA usage across standard HTML, React, and Vue frontend projects without additional dependencies.

Related Skills

Explore More Design & Creative Skills→
tsaoltsaol
66

frontend-design

Design and implement production-grade frontend interfaces with HTML/CSS/JS, React, or Vue.

Community
Advanced
kamp-uskamp-us
25

review-design

Render PR previews with Playwright and check UI design against the four-pillars design law.

Official
Advanced
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced
opencodosopencodos
14

web-design

Audit HTML, CSS, and JS for web interface guideline compliance.

Official
Intermediate