skills.rest
souki202
souki202COMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Audit UI code against Web Interface Guidelines and report accessibility gaps.

Updated Feb 21, 2026
Search Tags:#design#ui#accessibility#a11y#guidelines#code-review
One-click install
npx skills add https://github.com/souki202/metaclaw --skill web-design-guidelines-souki202
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/souki202/metaclaw/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/souki202/metaclaw --skill web-design-guidelines-souki202

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure UI code adheres to Web Interface Guidelines, improving accessibility, usability, and overall design quality.

Core Features & Use Cases

  • Fetch fresh guidelines from the source URL before each review.
  • Read specified UI files or patterns and apply the guideline rules consistently.
  • Generate concise findings that highlight deviations and recommended fixes.
  • Use Case: Run an accessibility conformity check on a React component library during a design review or before a release.

Quick Start

Run a UI audit against the latest Web Interface Guidelines using your project files.

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 React component library for accessibility issues?▼

To audit a React component library for accessibility issues, the Skill reads your UI files and checks them against Web Interface Guidelines, reporting deviations in a concise file:line format. It fetches the latest rules before each review.

Can I run a UI accessibility check on plain HTML and CSS files?▼

Yes, you can run a UI accessibility check on plain HTML and CSS files. The Skill audits frontend codebases across frameworks like React, Vue, or plain HTML/CSS, applying guideline rules to identify usability and accessibility gaps.

What is the best way to check UI code against Web Interface Guidelines during a design review?▼

The best way to check UI code against Web Interface Guidelines during a design review is to fetch the latest rules from the source URL, read the target files, and generate concise findings that highlight deviations and recommended fixes.

Does this UI audit tool work with Vue component libraries?▼

Yes, this UI audit tool works with Vue component libraries. It applies to frontend codebases across frameworks such as React, Vue, or plain HTML/CSS, making it suitable for reviews, refactors, and quality checks.

How do I identify accessibility and usability gaps in my design system?▼

To identify accessibility and usability gaps in your design system, the Skill applies Web Interface Guidelines to your codebase and reports findings in a concise file:line style, highlighting deviations and recommended fixes.

Why does my UI audit report file:line deviations instead of full file summaries?▼

Your UI audit reports file:line deviations to provide concise findings that highlight exact locations of accessibility and usability gaps. This format helps you quickly identify and apply recommended fixes during code reviews or refactors.

Related Skills

Explore More Design & Creative Skills→
hayatoschayatosc
1

web-design-guidelines

Review HTML, CSS, and JavaScript files against Web Interface Guidelines and accessibility rules.

Community
Intermediate
dappvibedappvibe
1

web-design-guidelines

Analyze UI code for compliance with Web Interface Guidelines.

Community
Intermediate
NagyViktNagyVikt
2

web-design-guidelines

Audit web interface code against centralized design and accessibility guidelines.

Community
Intermediate
RedHatProductSecurityRedHatProductSecurity
47

semgrep

Automate static code analysis for security vulnerabilities across multi-language repositories.

Official
Intermediate