skills.rest
mahou-labs
mahou-labsOFFICIAL
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/mahou-labs/shiru --skill web-design-guidelines-mahou-labs
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Michae2xlMichae2xl

web-design-guidelines

Review UI code against Web Interface Guidelines for compliance issues.

Community
Intermediate
bybren-llcbybren-llc
395

release-patterns

Automate PR creation, CI validation, and release coordination in rebase-first workflows.

Official
Intermediate
pavegpaveg
2

ui-design-standards

Enforce UI design standards across frontend projects with theme tokens and component architecture.

Community
Advanced
Ikki-GroupIkki-Group

web-design-guidelines

Evaluate UI code against Web Interface Guidelines and output findings in file:line format.

Official
Intermediate