skills.rest
jrmatherly
jrmatherlyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Analyze HTML/CSS/JS files for accessibility and design guideline compliance.

Updated Jan 30, 2026
Search Tags:#accessibility#frontend#UI#audit#guidelines#design-review
One-click install
npx skills add https://github.com/jrmatherly/metorial-workspace --skill web-design-guidelines-jrmatherly
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/jrmatherly/metorial-workspace/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/jrmatherly/metorial-workspace --skill web-design-guidelines-jrmatherly

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams quickly validate UI code against up-to-date Web Interface Guidelines by automating guideline-based checks and reporting deviations.

Core Features & Use Cases

  • Automated UI Review: Scans HTML/CSS/JS for accessibility gaps, semantic accuracy, color contrast, and keyboard navigation issues.
  • Guideline-Conformant Output: Produces concise findings suitable for design reviews and compliance reporting.
  • Use Case: A designer asks to audit a new React component library to ensure contrast ratios meet WCAG 2.1 standards before release.

Quick Start

Run the review on your project by specifying the path or file pattern, e.g., review ui-patterns/**/*.jsx, or simply "review my UI" to fetch guidelines and scan the specified 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 UI code for accessibility and design guideline compliance?▼

To audit UI code for accessibility, you can scan your HTML, CSS, and JavaScript files to check for contrast, semantics, keyboard navigation, and responsive behavior. This process fetches current guidelines and reports deviations in a concise file:line format.

Can I check WCAG contrast ratios in my React component library?▼

Yes, you can check WCAG contrast ratios in a React component library by scanning the target JSX files. The review fetches official guidelines and validates color contrast, semantic accuracy, and keyboard navigation before release.

What is the best way to automate web design reviews for frontend projects?▼

The best way to automate web design reviews is applying guideline-based checks across front-end projects. This automatically scans HTML, CSS, and JS files for accessibility gaps and semantic issues, producing concise findings suitable for compliance reporting.

Does this UI audit fetch the latest accessibility guidelines from official sources?▼

Yes, the UI audit fetches the latest web interface guidelines directly from official sources. It parses your target files against these updated standards to ensure your front-end code accurately meets current compliance requirements.

How do I review specific UI file patterns for semantic accuracy and keyboard navigation?▼

You can review specific UI file patterns by specifying the path or file pattern, such as ui-patterns/**/*.jsx. The tool parses those targeted files and outputs accessibility findings, including semantic accuracy and keyboard navigation issues, in a structured format.

Related Skills

Explore More Design & Creative Skills→
dongitrandongitran
3

web-design-guidelines

Audit UI code against Web Interface Guidelines and output file:line findings.

Community
Basic
CallMeLuigiv2CallMeLuigiv2

web-design-guidelines

Audit UI code against current Web Interface Guidelines for accessibility and UX compliance.

Community
Basic
metabenchmetabench

browser-verification

Launch demo servers and verify UI rendering in live browsers.

Community
Intermediate
tom-xstom-xs

accessibility-selenium-testing

Automate WCAG 2.1/2.2 accessibility audits with Selenium WebDriver and axe-core.

Community
Advanced