web-interface-guidelines-review

Name: web-interface-guidelines-review
Availability: InStock
Author: thrillmade

Review UI code against web-interface guidelines for accessibility and design tokens.

1|Updated May 15, 2026

Search Tags:#accessibility #web design #code compliance #design guidelines #UI review

Ready to run

npx skills add https://github.com/thrillmade/agent-skills --skill web-interface-guidelines-review

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-interface-guidelines-review
Source: https://github.com/thrillmade/agent-skills/tree/main/skills/web-interface-guidelines-review
Command: npx skills add https://github.com/thrillmade/agent-skills --skill web-interface-guidelines-review

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps maintain consistent and accessible UI design by reviewing code or design outputs against established web-interface guidelines.

Core Features & Use Cases

Guideline Compliance: Checks UI code against Vercel's WIG, Material 3, Radix patterns, and UDTS-specific rules.
Contrast and Accessibility: Ensures proper contrast ratios and accessibility standards are met.
Typography and Spacing: Validates the use of atomic typography and spacing tokens.
Action Labels: Ensures buttons and links use appropriate and accessible labels.
Focus and Keyboard Navigation: Validates focus management and keyboard accessibility.
Forms and Input Standards: Ensures form controls are programmatically labeled and functional.
Token Discipline: Checks for the correct use of design tokens in the code.
Use Case: Before merging a PR that introduces a new UI component, use this Skill to ensure it adheres to the established guidelines.

Quick Start

Run the skill to review the UI code in the 'new-component' PR against the web interface guidelines.

Frequently Asked Questions about web-interface-guidelines-review

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

FAQPage Schema

How do I check my React component code for WCAG accessibility and contrast compliance?▼

To check React component code for WCAG accessibility and contrast compliance, review UI outputs against established web-interface guidelines focusing on contrast ratios, focus management, and form standards. This ensures proper keyboard navigation and programmatic labeling.

What is the best way to validate design token usage in Vue or Svelte UI code?▼

Validating design token usage in Vue or Svelte UI code involves checking the implementation against UDTS-specific rules and atomic typography and spacing tokens. This token discipline ensures that component spacing and typography remain consistent across the application.

Can I use this UI review process to check action labels and form standards in Astro?▼

Yes, you can use this UI review process to check action labels and form standards in Astro. It validates that buttons and links use accessible labels and ensures form controls are programmatically labeled and functional across supported frameworks.

Does this web interface guideline review support Material 3 and Radix patterns?▼

This web interface guideline review supports Material 3 and Radix patterns by checking UI code compliance against these established guidelines. It validates focus management, keyboard accessibility, and proper action labels according to the specified pattern libraries.

When do I need to run a web interface guideline compliance check on my UI code?▼

You need to run a web interface guideline compliance check before merging a pull request that introduces new UI components. This ensures the new code adheres to contrast, typography, spacing, and focus management standards before deployment.

Why does my UI component fail focus management and keyboard navigation checks?▼

Your UI component fails focus management and keyboard navigation checks because it does not adhere to established web interface guidelines for keyboard accessibility. Validating focus states and implementing proper focus traps or sequences resolves these compliance issues.