web-design-guidelines

Audit UI code compliance with Web Interface Guidelines and report findings in file:line format.

1.0k|92|Updated May 22, 2026
One-click install
npx skills add https://github.com/open-gsd/gsd-pi --skill web-design-guidelines-open-gsd
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/open-gsd/gsd-pi/tree/main/src/resources/skills/web-design-guidelines
Command: npx skills add https://github.com/open-gsd/gsd-pi --skill web-design-guidelines-open-gsd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code to ensure it complies with Web Interface Guidelines, reducing accessibility gaps and visual inconsistencies across a project, and helping teams ship more usable interfaces.

Core Features & Use Cases

  • Guideline retrieval: Fetch the latest Web Interface Guidelines from the official source before reviews.
  • File assessment: Read the target UI files or patterns and apply all rules to identify violations.
  • Result reporting: Output findings in a terse file:line format to support quick remediation and traceability.
  • Use Case: QA engineers auditing a UI component library for accessibility conformance and design consistency.

Quick Start

Provide the target UI files or patterns and let the skill fetch the latest guidelines, then report any violations.

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 interface guidelines and accessibility compliance?

To review UI code for accessibility conformance and design consistency, you provide target frontend files or patterns. The tool fetches the latest official web interface guidelines and evaluates files via WebFetch, outputting violations in a file:line format for quick remediation.

What is the best way to check UI code against official web design guidelines?

The best way to check UI code against official web design guidelines is to use an automated review process that fetches the latest rules from the source URL and evaluates design assets, ensuring visual adherence and UX consistency across your project files.

How does a code review for UX consistency and visual adherence work in web projects?

A code review for UX consistency and visual adherence works by reading target UI files, applying all fetched web interface rules to identify violations, and generating a terse file:line report. This helps teams ship more usable interfaces by reducing accessibility gaps and visual inconsistencies.

Do I need to manually provide web interface guidelines to audit my UI component library?

No, you do not need to manually provide web interface guidelines to audit your UI component library. The review process automatically fetches the latest guidelines from the official source URL before evaluating your frontend codebase and design assets for compliance.

Can I use this approach to review design assets in web projects for accessibility gaps?

Yes, you can review design assets in web projects for accessibility gaps. The process applies to frontend codebases and design assets, auditing them against all fetched rules to identify violations and traceability issues, supporting quick remediation for QA engineers.

What format are UI code compliance violations reported in during a guidelines review?

UI code compliance violations are reported in a terse file:line format during a guidelines review. This format supports quick remediation and traceability by pinpointing exact locations in frontend codebases where accessibility, UX consistency, or visual adherence rules are violated.