web-design-guidelines

Audits HTML, CSS, and component code against Web Interface Guidelines.

Updated Jan 24, 2026
One-click install
npx skills add https://github.com/honki12345/my-agent-skills --skill web-design-guidelines-honki12345
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/honki12345/my-agent-skills/tree/main/web-design-guidelines
Command: npx skills add https://github.com/honki12345/my-agent-skills --skill web-design-guidelines-honki12345

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams verify that UI code aligns with Web Interface Guidelines, improving accessibility, usability, and consistency across projects.

Core Features & Use Cases

  • Guideline-driven review: fetches the latest guidelines from the official source before auditing files.
  • File scope auditing: analyzes frontend artifacts (HTML, CSS, JS/React components) to surface compliance issues.
  • Actionable output: reports findings in a concise, developer-friendly format to guide fixes.
  • Use Case: during a UI audit, run checks across a project to identify accessibility violations and UX inconsistencies.

Quick Start

Review your project’s UI files against the latest Web Interface 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 frontend code for web accessibility and UX inconsistencies?

Analyze HTML, CSS, and component files against Web Interface Guidelines to surface violations in a developer-friendly format. This process fetches the latest official rules to identify accessibility issues and UX inconsistencies across frontend artifacts.

What is a UI accessibility audit and how does it improve frontend projects?

A UI accessibility audit checks frontend artifacts for compliance with Web Interface Guidelines to improve usability and consistency. It surfaces actionable violations in HTML and component code, ensuring projects meet standard accessibility requirements.

Can I use this to check React components for Web Interface Guidelines compliance?

Yes, you can check React components for Web Interface Guidelines compliance. The audit analyzes JS and component code alongside HTML and CSS to identify accessibility violations and UX issues within your frontend project files.

Does the web guideline review fetch the latest official accessibility rules automatically?

Yes, the web guideline review fetches the latest rules from the official source automatically before auditing files. This ensures your HTML and CSS frontend code is always evaluated against the most current accessibility standards.

What is the best way to report accessibility violations in a design review?

The best way to report accessibility violations in a design review is to generate a concise, actionable format listing specific guideline failures. This guides developers directly to the fixes needed in the frontend UI code.

What file types are supported for a frontend UI code audit?

A frontend UI code audit supports HTML, CSS, and JS or component files. The analysis scopes these frontend artifacts to identify web guideline conformance issues and improve overall UI accessibility.