skills.rest
mirandagabrieldev
mirandagabrieldevCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Analyze UI code against Web Interface Guidelines for accessibility and design issues.

Updated Aug 23, 2026
Search Tags:#design#ui#accessibility#validation#review#guidelines
One-click install
npx skills add https://github.com/mirandagabrieldev/claude-build-template --skill web-design-guidelines-mirandagabrieldev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/mirandagabrieldev/claude-build-template/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/mirandagabrieldev/claude-build-template --skill web-design-guidelines-mirandagabrieldev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Skill helps teams ensure UI code complies with the Web Interface Guidelines by systematically validating design and accessibility aspects against the latest rules, reducing manual review time.

Core Features & Use Cases

  • Fetch the latest guidelines from the specified source and keep checks up to date.
  • Read target files or patterns provided by the user and apply all guideline rules.
  • Output findings in the concise file:line format to support quick remediation.
  • Use Case: Audit a web UI file or set of files for accessibility and design consistency.

Quick Start

Fetch the latest guidelines and apply them to your UI files to check for compliance.

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 accessibility and design issues?▼

To audit UI code for accessibility, this skill analyzes your files against the Web Interface Guidelines and reports findings in a concise file:line format for quick remediation. It fetches the latest rules at runtime to validate design consistency.

What is the file:line format for UI accessibility validation results?▼

The file:line format for accessibility validation pinpoints exact locations of design issues in your UI code. This deterministic output provides clear failure handling, enabling developers to quickly locate and fix accessibility violations.

How do I check if my web files comply with the latest web interface guidelines?▼

You can check web files for compliance by providing target files or patterns to this skill. It fetches the latest guidelines from a specified source at runtime, applies all rules, and outputs accessibility and design findings.

Can I review a set of UI files for design consistency automatically?▼

Yes, you can automatically review a set of UI files for design consistency. The skill reads target file patterns provided by the user, applies all guideline rules systematically, and reduces manual review time by reporting violations.

Does this accessibility review tool require any dependencies to run?▼

No external dependencies are required to run this accessibility review tool. It operates independently to fetch guidelines at runtime, validate results, and provide deterministic output with clear failure handling for your UI code.

What is the best way to handle accessibility failures reported in UI code?▼

The best way to handle accessibility failures is using the deterministic file:line output format. This concise reporting method identifies exact design issues and supports quick remediation by directing developers straight to the affected code.

Related Skills

Explore More Design & Creative Skills→
kalamdbkalamdb
48

web-design-guidelines

Audit UI source code against Web Interface Guidelines for accessibility and design consistency.

Official
Intermediate
outcomeengoutcomeeng
1

auditing-skills

Audit SKILL.md files for structural and content issues with file:line findings.

Official
Advanced
ElwinLiuElwinLiu

web-design-guidelines

Automate UI code reviews against Web Interface Guidelines for accessibility and consistency.

Community
Intermediate
kevindreekevindree

browser-testing-with-devtools

Inspect live DOM, console, network, and accessibility data via Chrome DevTools MCP.

Community
Advanced