skills.rest
Chris-Maskey
Chris-MaskeyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/Chris-Maskey/opencode-config --skill web-design-guidelines-chris-maskey
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
p-potvinp-potvin
1

web-design-guidelines

Assess frontend HTML, CSS, and JavaScript against Web Interface Guidelines and accessibility rules.

Community
Intermediate
billh93billh93

web-design-guidelines

Identify UI code compliance issues against the latest Web Interface Guidelines.

Community
Intermediate
thec3ukthec3uk

Global Tech Stack

Enforce global tech stack standards across code files during generation, review, and refactoring.

Official
Basic
SpagesticSpagestic
4

web-design-guidelines

Review UI code against Web Interface Guidelines for accessibility and UX compliance.

Community
Basic