web-design-guidelines

Audit UI code against official Web Interface Guidelines and report violations in file:line format.

2|Updated Apr 11, 2026
One-click install
npx skills add https://github.com/JaimeJunr/context-mode --skill web-design-guidelines-jaimejunr
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/JaimeJunr/context-mode/tree/main/.claude/skills/design/web-design-guidelines
Command: npx skills add https://github.com/JaimeJunr/context-mode --skill web-design-guidelines-jaimejunr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure their web UI aligns with official Web Interface Guidelines, catching accessibility and usability gaps early and speeding up design reviews.

Core Features & Use Cases

  • Fetch the latest guidelines from the central source.
  • Read the target UI files or patterns provided by the user.
  • Apply all rules from the fetched guidelines and report violations in a concise file:line format.
  • Use cases include accessibility audits, UX reviews, and design conformance checks across web projects.

Quick Start

Provide the UI files or patterns to review, then run the guidelines check to receive the results.

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 web UI for accessibility and usability compliance?

To audit web UI for accessibility and usability compliance, you provide your UI files or patterns to the checker, which fetches official Web Interface Guidelines and reports violations in a concise file:line format.

Can I run a design review against specific UI code files?

Yes, you can run a design review by providing target UI code files. The checker reads the provided files, applies all rules from the fetched Web Interface Guidelines, and outputs conformance gaps.

What is the best way to check web interface guidelines conformance across a project?

The best way to check web interface guidelines conformance is applying fetched rules across provided project patterns to surface visual and accessibility gaps quickly in a concise file:line format.

How do I get the latest web design guidelines for a UI audit?

To get the latest web design guidelines for a UI audit, the checker fetches rules directly from the central source, ensuring all accessibility, usability, and visual conformance checks are current.

Does this accessibility audit require any external dependencies?

No, this accessibility audit requires no external dependencies. You simply provide the target UI files or patterns, and it fetches the latest guidelines to run checks independently.

Why should I use an automated UI guidelines checker for design reviews?

An automated UI guidelines checker speeds up design reviews by catching accessibility, usability, and visual conformance gaps early, ensuring web UI aligns with official Web Interface Guidelines.