web-design-guidelines

Identify UI code compliance gaps against Web Interface Guidelines.

1|Updated Mar 12, 2026

Search Tags:#accessibility #frontend #design-guidelines #web-ui #ui-review #guideline-check

Ready to run

npx skills add https://github.com/mahou-labs/shiru --skill web-design-guidelines-mahou-labs

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/mahou-labs/shiru/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/mahou-labs/shiru --skill web-design-guidelines-mahou-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps ensure UI code complies with established Web Interface Guidelines, enabling accessible, consistent, and high-quality interfaces across projects.

Core Features & Use Cases

Guideline Compliance: Compares UI code against the latest Web Interface Guidelines fetched from the official source.
Automated Review: Reads specified files or patterns, applies all rules, and reports findings in a concise file:line style.
Use Case: Ideal for PR reviews, design audits, and accessibility checks across frontend projects.

Quick Start

Provide the target UI files or patterns to review and I will fetch the latest guidelines and run the compliance check.

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 frontend code for web interface guideline compliance?▼

To check frontend code for web interface guideline compliance, provide the target UI files or patterns. The skill fetches the official guidelines, applies the rule set, and outputs findings in a standardized file:line format.

Can I use this for automated accessibility checks in a PR review?▼

Yes, you can use this for automated accessibility checks in PR reviews. It evaluates UI code compliance gaps against web interface guidelines, making it suitable for design audits and CI pipelines to ensure accessibility.

What is the output format for UI code review findings?▼

The output format for UI code review findings is a concise file:line style. This standardized output pinpoints exact UI code compliance gaps against web interface guidelines for accessibility, UX, and visual consistency.

Does the guideline check require specific dependencies to run?▼

No specific dependencies are required to run the guideline check. The skill fetches the necessary web interface guidelines directly from the official source using WebFetch, then applies the rule set to your provided files.

What aspects of UX and visual consistency are evaluated during a design audit?▼

During a design audit, the skill evaluates UX, visual consistency, and accessibility by identifying UI code compliance gaps. It compares your frontend project files against the latest fetched web interface guidelines.