web-design-guidelines

Fetch web interface guidelines and audit UI files for compliance.

1|Updated Apr 11, 2026
One-click install
npx skills add https://github.com/shige1014-dev/backup-OpenMontage --skill web-design-guidelines-shige1014-dev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/shige1014-dev/backup-OpenMontage/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/shige1014-dev/backup-OpenMontage --skill web-design-guidelines-shige1014-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for Web Interface Guidelines compliance to improve accessibility, consistency, and usability across projects.

Core Features & Use Cases

  • Automated guideline fetch and rule application to UI files
  • Output findings in file:line format for easy integration into code reviews
  • Use Case: Audit a web app against the latest design and accessibility guidelines to surface actionable issues

Quick Start

Provide the UI files you want reviewed, or a pattern to select them, and the skill will fetch the latest guidelines and start the audit.

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 UI code against web accessibility guidelines?

To audit UI code for accessibility, fetch the latest web interface guidelines from a specified URL and evaluate your target UI files against those rules, outputting findings in a terse file:line format for direct integration into design reviews.

Can I review my frontend project for usability and a11y compliance automatically?

You can review frontend projects for a11y compliance by providing UI files or selection patterns; the system fetches up-to-date web guidelines at runtime via a WebFetch mechanism and applies all fetched rules to surface actionable usability issues.

What is the best way to integrate automated design reviews into my web app workflow?

The best way to integrate automated design reviews is to output accessibility and quality findings in a file:line format, allowing developers to directly pinpoint and resolve web guideline violations within their existing code review processes.

Do I need to provide specific files to check frontend usability issues?

Yes, you need to provide the UI files you want reviewed or a pattern to select them so the system can read the targets and evaluate them against all fetched web guidelines to identify specific usability and accessibility issues.

How does fetching up-to-date web guidelines work during a code review?

Fetching up-to-date web guidelines works by using a WebFetch mechanism to retrieve the latest rules from a specified source URL at runtime, ensuring the accessibility and quality audit checks your UI code against current standards.

What limitations exist when evaluating UI patterns for web interface guidelines?

Evaluating UI patterns for web interface guidelines requires a valid guidelines source URL to fetch rules at runtime, and the output is limited to terse file:line findings, meaning you must manually interpret and apply the accessibility fixes.