web-design-guidelines

Analyze UI code against Web Interface Guidelines and report file:line findings.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/meganide/claude --skill web-design-guidelines-meganide
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/meganide/claude/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/meganide/claude --skill web-design-guidelines-meganide

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure UI code aligns with Web Interface Guidelines, reducing accessibility gaps and design inconsistencies across a project.

Core Features & Use Cases

  • Guideline-driven reviews: Compare code against the latest Web Interface Guidelines.
  • Automated checks: Identify accessibility, UX, and design-organization issues across multiple files.
  • Use Case: When asked to review a site for accessibility or design quality, run this skill to surface non-conformant UI elements and generate a concise report.

Quick Start

To begin, run the web-design-guidelines skill against your UI files and provide the paths or patterns to review (e.g., src/**.html, styles/*.css).

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 UI code for web design compliance?

To audit UI code for web design compliance, run this skill against your UI files by providing specific file paths or patterns, such as src/**.html or styles/*.css. It fetches the latest Web Interface Guidelines and reports non-conformant findings in a concise file:line format.

What is a UI code review for accessibility and UX quality?

A UI code review for accessibility and UX quality compares your frontend code against Web Interface Guidelines to identify design inconsistencies and accessibility gaps. This skill fetches the latest guidelines, reads your specified files, and outputs a terse file:line report of non-conformant elements.

Can I review multiple UI files for design consistency at once?

Yes, you can review multiple UI files for design consistency at once. By providing file path patterns like src/**.html or styles/*.css, the skill reads all specified files and generates a consolidated report covering accessibility, UX quality, and overall design organization.

Does a web design audit require external dependencies or components?

No, a web design audit using this skill requires no external dependencies or components. It independently fetches the latest Web Interface Guidelines from a remote source, reads your specified UI files, and generates a compliance report without needing additional setup.

What is the best way to check frontend code against Web Interface Guidelines?

The best way to check frontend code against Web Interface Guidelines is to run an automated skill that fetches the latest standards and compares your code. This skill surfaces accessibility, UX, and design inconsistencies, reporting findings tersely in a file:line format.

When do I need a UI compliance audit for web design?

You need a UI compliance audit for web design when you want to ensure your UI code aligns with Web Interface Guidelines, reducing accessibility gaps and design inconsistencies across a project before deployment or during a code review.