skills.rest
z4nr34l
z4nr34lCOMMUNITY
Explore all skills by this author →
Website𝕏@z4nr34lGitHub

web-design-guidelines

Reviews HTML/CSS/JS code for accessibility and UX guideline conformance, outputting findings as file:line format.

Updated Jan 25, 2026
Search Tags:#accessibility#UI#audit#design-review#conformance#web-guidelines
One-click install
npx skills add https://github.com/z4nr34l/agent-setup --skill web-design-guidelines-z4nr34l
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/z4nr34l/agent-setup/tree/main/claude-code/skills/web-design-guidelines
Command: npx skills add https://github.com/z4nr34l/agent-setup --skill web-design-guidelines-z4nr34l

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams rapidly verify that their web UI aligns with the latest Web Interface Guidelines, catching accessibility gaps, UX inconsistencies, and visual design deviations before deployment.

Core Features & Use Cases

  • Fetch latest guidelines: Pull the most up-to-date rules from the official source.
  • Targeted reviews: Read the specified files or patterns (e.g., index.html, src/**) to focus the audit.
  • Rule application: Check against all guidelines and surface violations in a concise file:line format.
  • Use Case: Ideal for accessibility audits, UX reviews, and site conformance checks against best practices.

Quick Start

Provide a path or pattern to the UI files you want reviewed (for example, index.html or src/**). The skill will fetch the latest guidelines, analyze the specified files, and report findings in the file:line format.

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 UX conformance?▼

To audit UI code for accessibility, provide a file path or pattern like index.html or src/**. The skill fetches the latest Web Interface Guidelines, analyzes the specified HTML/CSS/JS files, and outputs violations in a file:line format.

What is a web design review for accessibility and contrast?▼

A web design review checks HTML, CSS, and JS assets against established Web Interface Guidelines to identify accessibility gaps, contrast issues, semantic errors, and UX deviations before site deployment.

Can I check specific web components against web guidelines?▼

Yes, you can check specific web components by providing targeted file paths or patterns. The audit reads the specified UI files and applies all rules to surface conformance findings.

How do I run a design review on my web project files?▼

Run a design review by supplying a path or pattern to your UI files. The skill fetches current web guidelines, reads the matched HTML, CSS, and JS assets, and reports interaction quality findings.

Does the accessibility audit work with HTML, CSS, and JavaScript?▼

Yes, the accessibility audit works with HTML, CSS, and JavaScript assets. It evaluates semantics, contrast, and interaction quality across these file types to ensure full web interface conformance.

What format are accessibility audit findings reported in?▼

Accessibility audit findings are reported in a concise file:line format. This pinpoints exact locations of accessibility gaps, visual design deviations, and UX inconsistencies within your reviewed codebase.

Related Skills

Explore More Design & Creative Skills→
JetBrainsJetBrains
302

web-design-guidelines

Fetch web interface guidelines and validate HTML, CSS, and JS files for noncompliant UI patterns.

Official
Intermediate
MinBZKMinBZK
2

a11y-review

Automate WCAG 2.1 AA accessibility reviews for web templates, CSS, and HTML.

Official
Basic
thangvawnthangvawn

plankton-code-quality

Automate code quality enforcement with formatters, linters, and Claude subprocesses.

Community
Advanced
thongdn-itthongdn-it
3

web-design-guidelines

Evaluate UI code against Web Interface Guidelines for accessibility and usability.

Community
Intermediate