skills.rest
sadroad
sadroadCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Review UI code for compliance with Web Interface Guidelines.

Updated Aug 23, 2026
Search Tags:#accessibility#web development#frontend#ui review#code audit#design guidelines
One-click install
npx skills add https://github.com/sadroad/.dotfiles --skill web-design-guidelines-sadroad
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/sadroad/.dotfiles/tree/main/modules/home-manager/opencode/skills/web-design-guidelines
Command: npx skills add https://github.com/sadroad/.dotfiles --skill web-design-guidelines-sadroad

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure that user interface code adheres to established web design best practices, focusing on accessibility, usability, and performance.

Core Features & Use Cases

  • Accessibility Review: Checks for common accessibility issues like missing ARIA labels, improper focus states, and semantic HTML usage.
  • Design Guideline Compliance: Verifies adherence to visual and interactive design principles, including typography, animation, and form handling.
  • Performance Optimization: Identifies potential performance bottlenecks related to rendering, image loading, and animation.
  • Use Case: A developer can use this Skill to automatically scan their React components for compliance with Vercel's Web Interface Guidelines before deployment.

Quick Start

Review the UI code in the 'src/components' directory for compliance with 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 my frontend code for web accessibility and UI compliance?▼

You can audit UI code for accessibility and design compliance by scanning component files against established web interface guidelines. This process reviews ARIA labels, focus states, semantic HTML, forms, and touch interactions to ensure your frontend adheres to best practices.

What does a UI code audit check for in web development?▼

A UI code audit checks frontend code for compliance with web interface guidelines, covering accessibility, focus states, forms, animation, typography, content handling, images, performance, navigation, touch interaction, dark mode, locale, hydration, and hover states to ensure adherence to best practices.

Can I scan React components for accessibility issues before deployment?▼

Yes, you can scan React components for accessibility issues before deployment by analyzing specified files or patterns in your directory. The review checks for missing ARIA labels, improper focus states, and semantic HTML usage to ensure adherence to best practices.

What's the best way to check frontend code for performance and dark mode compliance?▼

The best way to check frontend code for performance and dark mode compliance is to run a UI code audit against web interface guidelines. This identifies potential rendering bottlenecks related to images and animation while verifying correct dark mode and locale handling.

Does this UI review check for mobile touch interaction and safe areas?▼

Yes, this UI review checks for mobile touch interaction and safe areas. It analyzes your code against defined rules that also cover navigation, hover states, hydration, and locale handling to ensure a fully compliant web interface.

Related Skills

Explore More Design & Creative Skills→
giosuetedeschi-specgiosuetedeschi-spec

web-design-guidelines

Evaluate web interface code for compliance with design and accessibility standards.

Community
Intermediate
gaia-reactgaia-react
21

a11y-fixes

Resolve axe-core accessibility violations with standardized WCAG AA code patterns.

Official
Intermediate
t-stringst-strings

Global Validation

Enforce centralized validation standards across repository code and CI pipelines.

Official
Basic
Luqman-Ud-DinLuqman-Ud-Din

qa-form-a11y

Inspect web forms for accessibility defects in labels, aria attributes, and focus order.

Community
Advanced