skills.rest
MattRib
MattRibCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Identify UI code violating Web Interface Guidelines and report file:line findings.

Updated Dec 7, 2025
Search Tags:#accessibility#frontend#review#web standards#UI guidelines#design-quality#UX audit
One-click install
npx skills add https://github.com/MattRib/financial_app --skill web-design-guidelines-mattrib
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/MattRib/financial_app/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/MattRib/financial_app --skill web-design-guidelines-mattrib

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams verify UI code against Web Interface Guidelines, catching accessibility and UX issues early in the design process.

Core Features & Use Cases

  • Guideline compliance checks: Compare UI components and markup against the latest Web Interface Guidelines.
  • Accessibility auditing: Detect contrast, keyboard navigation, ARIA usage, and semantic HTML issues to improve inclusivity.
  • Use Case: Run a review on a new component library to ensure consistent design and accessibility before release.

Quick Start

Provide the UI files or a pattern to review (e.g., index.html, src/components/*.jsx). The tool will fetch the latest guidelines, evaluate the specified files, and report any violations in a concise file:line format.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I check my frontend components for accessibility and UX guideline violations?▼

To check frontend components for accessibility and UX guideline violations, provide your UI files for review. The tool fetches official Web Interface Guidelines, evaluates the specified files, and reports violations in a concise file:line format.

What is a web interface guideline compliance check?▼

A web interface guideline compliance check compares UI components and markup against the latest Web Interface Guidelines to catch accessibility and UX issues early. It evaluates semantic HTML, ARIA usage, contrast, and keyboard navigation.

Can I audit a React component library for ARIA and semantic HTML issues?▼

Yes, you can audit a React component library for ARIA and semantic HTML issues by providing component file paths like src/components/*.jsx. The review detects contrast, keyboard navigation, and markup issues to improve inclusivity before release.

How do I review HTML files for web standards and UX consistency?▼

To review HTML files for web standards and UX consistency, provide target files like index.html to the tool. It analyzes the markup against fetched guidelines and outputs detected violations in a concise file:line format.

What format are UI accessibility audit results reported in?▼

UI accessibility audit results are reported in a concise file:line format. This pinpoints exactly where UI code violates Web Interface Guidelines, allowing developers to quickly locate and fix accessibility and UX consistency issues.

Does the tool require any dependencies to run a UX audit?▼

No dependencies are required to run a UX audit. The tool operates standalone to fetch the official guideline source, analyze target frontend files, and output findings without needing additional components or library installations.

Related Skills

Explore More Design & Creative Skills→
JaylaelikeJaylaelike

web-design-guidelines

Analyze HTML, CSS, and JavaScript files against Web Interface Guidelines.

Community
Intermediate
jaem1n207jaem1n207
18

accessibility-auditor

Audit web pages and UI components against WCAG 2.2 accessibility standards.

Community
Advanced
pradyumnasagarpradyumnasagar
6

agent-handoff

Automate inter-skill data transfer and provenance capture via JSON Material Passports.

Community
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-typography-advanced

Detect web font, contrast, glyph, and language attribute defects on web pages.

Community
Intermediate