web-design-guidelines

Review HTML, CSS, and React files against Web Interface Guidelines.

Updated Apr 17, 2026

Search Tags:#accessibility #audit #guidelines #best-practices #web-design #ui-review

Ready to run

npx skills add https://github.com/Chris-Maskey/opencode-config --skill web-design-guidelines-chris-maskey

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Chris-Maskey/opencode-config/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/Chris-Maskey/opencode-config --skill web-design-guidelines-chris-maskey

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps developers and designers quickly find violations of Web Interface Guidelines and accessibility issues in UI code so teams can fix UX and compliance problems before deployment.

Core Features & Use Cases

Guidelines-driven audits: Fetches the canonical Web Interface Guidelines and applies every rule to the provided files or patterns.
File-level findings: Reads frontend files and reports precise issues using a terse file:line output format for easy triage.
Use Case: Audit a set of React components or static HTML/CSS files to identify accessibility problems and guideline deviations across a page or entire site.

Quick Start

Review the UI files at the specified path against the latest Web Interface Guidelines and return findings in 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 audit my React components for accessibility issues?▼

You can audit React components for accessibility issues by reviewing UI code against Web Interface Guidelines. The tool reads frontend HTML, CSS, and JavaScript files, evaluates rules, and outputs precise findings in a terse file:line format for easy triage.

What is the best way to check HTML and CSS files for web design guideline violations?▼

The best way to check HTML and CSS files for web design guideline violations is running a guidelines-driven audit. It fetches the canonical Web Interface Guidelines, applies every rule to the provided files, and reports deviations using a precise file:line output format.

Can I use this to audit an entire site's UI code?▼

Yes, you can use this to audit an entire site's UI code. It supports single-page components, whole-site audits, and ad-hoc file patterns by reading specified frontend files and evaluating them against the fetched Web Interface Guidelines.

How do I get precise file and line numbers for UX and compliance problems in frontend code?▼

To get precise file and line numbers for UX and compliance problems, run an audit on your frontend code. The tool evaluates UI files against Web Interface Guidelines and outputs accessibility issues and violations in a terse file:line format for quick triage.

Does the accessibility audit work with static HTML files or only JavaScript frameworks?▼

The accessibility audit works with both static HTML files and JavaScript frameworks. It reviews frontend HTML, CSS, and JavaScript/React component files, applying Web Interface Guidelines to detect violations and accessibility issues across all specified files.

Why should I run a web interface guidelines review before deployment?▼

Running a web interface guidelines review before deployment helps developers and designers quickly find violations and accessibility issues in UI code. This allows teams to fix UX and compliance problems early, ensuring the interface meets accessibility best-practices.