web-design-guidelines

Name: web-design-guidelines
Availability: InStock
Author: hayatosc

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

1|Updated Feb 16, 2026

Search Tags:#design #ui #code review #accessibility #audit #guidelines #web

Ready to run

npx skills add https://github.com/hayatosc/dotfiles --skill web-design-guidelines-hayatosc

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/hayatosc/dotfiles/tree/main/home/dot_agents/skills/web-design-guidelines
Command: npx skills add https://github.com/hayatosc/dotfiles --skill web-design-guidelines-hayatosc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many UI reviews are manual, inconsistent, and miss accessibility or design-guideline violations; this Skill automates checking front-end code against an authoritative set of web interface guidelines so reviewers can find issues quickly and consistently.

Core Features & Use Cases

Fetches the latest Web Interface Guidelines from the canonical source before each review to ensure checks are up to date.
Reads user-provided files or file patterns (HTML, CSS, JS, templates) and applies the fetched rule set to identify accessibility, UX, and best-practice violations.
Outputs findings in a terse file:line format suitable for quick triage, continuous integration checks, or pull request comments.
Use Case: Run a pre-merge audit on a pull request to surface accessibility failures and design inconsistencies across components.

Quick Start

Review the files matching the pattern site/**/*.html for accessibility and guideline violations using the web-design-guidelines skill.

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 frontend code for accessibility and UX guideline violations?▼

To audit frontend code for accessibility and UX violations, provide your HTML, CSS, or JavaScript files and the tool fetches the canonical Web Interface Guidelines to evaluate each rule, outputting findings in a concise file:line format for quick triage.

Can I check HTML and CSS files against web design guidelines before a pull request merge?▼

Yes, you can check HTML and CSS files against web design guidelines by applying the rule set to your supplied files or patterns, making it suitable for running pre-merge audits on pull requests to surface design inconsistencies.

What is the best way to automate web interface guideline compliance checks for a component library?▼

Automating web interface guideline compliance involves fetching the latest authoritative rules from a specified URL, reading your component library files, and evaluating each rule against them to identify best-practice and accessibility issues automatically.

Does this UI code review tool require any specific dependencies or component installations?▼

No, this UI code review tool requires no specific dependencies or component installations, allowing you to directly evaluate file patterns like site/**/*.html against the fetched web interface guidelines without additional environment setup.

How does the tool format accessibility audit findings for continuous integration checks?▼

The tool formats accessibility audit findings in a terse file:line notation, which is specifically designed to be suitable for quick triage, continuous integration checks, or automated pull request comments.

Why should I use an automated guideline audit instead of manual UI code review?▼

You should use an automated guideline audit because many manual UI reviews are inconsistent and miss accessibility or design-guideline violations, whereas automating the check ensures reviewers find issues quickly and consistently.