skills.rest
mhintz1980
mhintz1980COMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Identify accessibility and UX compliance gaps in web UI code against Web Interface Guidelines.

Updated Nov 16, 2025
Search Tags:#ui#accessibility#a11y#frontend#usability#lint#design-review
One-click install
npx skills add https://github.com/mhintz1980/ptl-lova --skill web-design-guidelines-mhintz1980
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/mhintz1980/ptl-lova/tree/main/.github/skills/web-design-guidelines
Command: npx skills add https://github.com/mhintz1980/ptl-lova --skill web-design-guidelines-mhintz1980

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review files for compliance with Web Interface Guidelines and help ensure accessibility, usability, and visual consistency across web interfaces.

Core Features & Use Cases

  • Automated conformance checks: compares UI code against the latest Web Interface Guidelines to surface violations.
  • Accessibility & UX audits: evaluates contrast, keyboard navigation, semantic structure, responsive behavior, and readability.
  • Remediation guidance: provides actionable recommendations to bring components in line with guidelines on design, typography, and layout.

Quick Start

Run the UI files or patterns through the checker to verify accessibility and UX compliance against the latest 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 React UI code for accessibility and UX compliance?▼

You can audit React UI code for accessibility and UX compliance by running files through a design guideline checker to identify contrast, keyboard navigation, and semantic structure violations. The tool reports issues in file:line format and outputs remediation suggestions.

What is the best way to check web interface guidelines for HTML and CSS projects?▼

The best way to check web interface guidelines for HTML and CSS projects is using an automated conformance checker that evaluates contrast, responsive behavior, readability, and semantic structure. It surfaces violations and provides actionable remediation recommendations.

Does this accessibility audit tool work with React components and HTML/CSS?▼

Yes, this accessibility audit tool works with React components, HTML/CSS projects, and various UI patterns. It evaluates UI code against current Web Interface Guidelines to identify accessibility and usability compliance gaps.

How do I fix accessibility violations reported in file:line format?▼

To fix accessibility violations reported in file:line format, review the remediation suggestions provided alongside each violation. The checker outputs actionable recommendations to bring components in line with guidelines on design, typography, and layout.

What specific accessibility and usability issues does a UI design audit cover?▼

A UI design audit covers contrast, keyboard navigation, semantic structure, responsive behavior, and readability. It evaluates these accessibility and usability factors against current Web Interface Guidelines to surface compliance gaps in web UI code.

Related Skills

Explore More Design & Creative Skills→
kos3nzkos3nz

web-design-guidelines

Audit HTML, CSS, and JavaScript UI code against Web Interface Guidelines.

Community
Intermediate
Choco-emmmChoco-emmm
7

web-design-guidelines

Scan UI code for Web Interface Guidelines compliance and report prioritized violations.

Community
Intermediate
MesteriisMesteriis

ui-qa

Routes UI testing and review tasks to specialized skills for visual regression, accessibility checks, and frontend debugging.

Community
Advanced
Kilo-OrgKilo-Org
166

web-design-guidelines

Evaluate UI code against Web Interface Guidelines for accessibility and design compliance.

Official
Intermediate