web-design-guidelines

Identify UI code violating Web Interface Guidelines for accessibility and usability.

1|Updated Apr 13, 2015
One-click install
npx skills add https://github.com/tyler-dot-earth/.dotfiles --skill web-design-guidelines-tyler-dot-earth
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/tyler-dot-earth/.dotfiles/tree/main/agents/skills/web-design-guidelines
Command: npx skills add https://github.com/tyler-dot-earth/.dotfiles --skill web-design-guidelines-tyler-dot-earth

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for Web Interface Guidelines compliance, helping teams catch accessibility and usability gaps early.

Core Features & Use Cases

  • Guideline conformance checks: Analyze HTML/CSS/JS for compliance with the latest Web Interface Guidelines.
  • Accessibility review: Detect color contrast issues, focus management gaps, and semantic HTML usage.
  • Audit scenarios: Review individual pages, design systems, or component libraries for consistency and UX alignment.

Quick Start

Provide the target UI files or patterns and run an automated guideline audit to return findings.

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 HTML and CSS code for web accessibility and usability issues?

To check web accessibility and usability, you need an automated guideline audit that analyzes your HTML, CSS, and JS files for compliance issues like color contrast gaps and semantic HTML errors. This Skill fetches fresh Web Interface Guidelines and scans your specified files to return precise findings.

Can I audit an entire design system or component library for UI guideline compliance?

Yes, you can audit a design system or component library for UI guideline compliance by providing the target file patterns. The review process applies fetched Web Interface Guidelines across your entire web project to identify consistency and UX alignment issues in individual pages or shared components.

What is a UI design audit and how does it detect frontend accessibility gaps?

A UI design audit detects frontend accessibility gaps by applying Web Interface Guidelines to your source code to find focus management errors and semantic HTML misuse. This process fetches current standards, reads your specified files, and outputs terse findings highlighting exact usability violations.

Does this web design review work with any frontend framework?

Yes, the web design review works with any frontend framework because it evaluates the rendered HTML, CSS, and JS code directly. It reads your specified files or patterns and applies standard Web Interface Guidelines to identify accessibility violations regardless of your underlying tech stack.

How do I run a design audit to catch color contrast and focus management issues?

To run a design audit for color contrast and focus management issues, provide your target UI files to the automated scanner. It fetches the latest Web Interface Guidelines, analyzes your code against those rules, and outputs findings in a prescribed terse format highlighting exact violations.