skills.rest
cptunderpantsmoons
cptunderpantsmoonsCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Audit web UI files against Web Interface Guidelines for accessibility and consistency.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams verify that their UI code adheres to the Web Interface Guidelines, ensuring accessibility, consistency, and usability across web platforms.

Core Features & Use Cases

  • Guideline-driven reviews: automatically evaluates UI files against up-to-date Web Interface Guidelines.
  • Accessibility audits: checks color contrast, keyboard navigation, semantic markup, and ARIA usage.
  • Use Case: You want to audit a product page for color contrast and semantic HTML to meet accessibility standards.

Quick Start

Review the provided UI files for compliance with the Web Interface Guidelines and 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 my UI code for web accessibility compliance?▼

To audit UI code for web accessibility compliance, provide your HTML, JSX, TSX, or CSS files and a guidelines URL. The tool fetches fresh rules and outputs findings in a terse file:line format.

What is the best way to check HTML and JSX files against web interface guidelines?▼

Checking HTML and JSX files against web interface guidelines involves applying fetched rules to your codebase. The tool evaluates individual pages or entire sites for accessibility, visual consistency, and UX compliance.

Can I review CSS for color contrast and semantic markup automatically?▼

Yes, you can review CSS for color contrast and semantic markup automatically. The tool audits ARIA usage, keyboard navigation, and visual consistency directly against your provided web interface guidelines.

How do I get a file and line report for UX evaluation issues?▼

To get a file and line report for UX evaluation issues, run the tool against your specified UI files. It applies all rules from the fetched guidelines and outputs violations directly in a terse file:line format.

Do I need to provide a guidelines URL for an accessibility audit?▼

Yes, you need to provide a guidelines URL for an accessibility audit. The tool fetches fresh web interface guidelines from that URL to evaluate your UI code for compliance, visual consistency, and usability.

How does a guideline-driven review handle large web projects?▼

A guideline-driven review handles large web projects by evaluating specified files or prompting for file patterns across the entire site. It applies all fetched rules to output accessibility and UX findings in file:line format.

Related Skills

Explore More Design & Creative Skills→
nickstradnickstrad

web-design-guidelines

Audit UI code against Web Interface Guidelines for accessibility and UX compliance.

Community
Basic
jewbetchajewbetcha
115

web-design-guidelines

Automate UI compliance checks against Web Interface Guidelines.

Community
Basic
Hack23Hack23
9

html-accessibility

Audit static HTML/CSS sites and implement WCAG 2.1 AA accessibility improvements.

Official
Intermediate
GabeujinGabeujin

web-design-reviewer

Inspect website screenshots and DOM structure to fix design issues.

Community
Advanced