skills.rest
SomtoUgeh
SomtoUgehCOMMUNITY
Explore all skills by this author →
Website𝕏@somto_oderaGitHub

web-design-guidelines

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

Updated Oct 27, 2025
Search Tags:#accessibility#a11y#UI#audit#design-review#web-design-guidelines
One-click install
npx skills add https://github.com/SomtoUgeh/dotfiles --skill web-design-guidelines-somtougeh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/SomtoUgeh/dotfiles/tree/main/claude/skills/web-design-guidelines
Command: npx skills add https://github.com/SomtoUgeh/dotfiles --skill web-design-guidelines-somtougeh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web interfaces often fail to meet accessibility and usability guidelines, leading to usability issues, missed compatibility, and compliance risks. This Skill provides a structured approach to audit UI code against established guidelines and surface actionable fixes.

Core Features & Use Cases

  • Fetch the latest Web Interface Guidelines from a trusted source and apply them to your UI files.
  • Analyze HTML/CSS/ARIA markup to identify accessibility gaps, color contrast issues, semantic problems, and keyboard navigation barriers.
  • Generate clear, prioritized recommendations for designers and developers, tailored to your project.
  • Use Case: When asked to review a landing page or dashboard, fetch guidelines and produce a list of issues with locations and suggested fixes.

Quick Start

Provide the file paths or glob pattern for the UI assets to review (e.g., templates/index.html, src/**/*.jsx), then run the skill to fetch the latest rules and evaluate the files.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check my HTML and CSS for web accessibility compliance?▼

To check web accessibility compliance, audit UI files against established Web Interface Guidelines. This process analyzes HTML, CSS, and ARIA markup to identify semantic problems, color contrast issues, and keyboard navigation barriers, generating prioritized file:line fixes.

How do I run a UI audit on my web project templates?▼

Run a UI audit on web project templates by providing file paths or glob patterns like src/**/*.jsx. The evaluation fetches the latest rules from a central guidelines URL and scans the specified files to output deterministic, rule-based findings in a terse file:line format.

What is the best way to find ARIA markup issues in a dashboard interface?▼

The best way to find ARIA markup issues in a dashboard interface is to perform a structured design review. Fetching established web design guidelines allows you to evaluate UI code and surface clear, prioritized recommendations for designers and developers.

Can I use a glob pattern to review multiple JSX files for UI design compliance?▼

Yes, you can use a glob pattern like src/**/*.jsx to review multiple files for UI design compliance. The system evaluates all matched UI assets across your web project by fetching the latest rules and producing deterministic, rule-based findings.

What specific accessibility gaps does a UI code audit identify?▼

A UI code audit identifies accessibility gaps including color contrast issues, semantic HTML problems, and keyboard navigation barriers. By analyzing markup against web interface guidelines, it generates clear, prioritized recommendations tailored to your project.

Related Skills

Explore More Design & Creative Skills→
JaylaelikeJaylaelike

web-design-guidelines

Analyze HTML, CSS, and JavaScript files against Web Interface Guidelines.

Community
Intermediate
team-telnyxteam-telnyx
3

telnyx-account-management-go

Manage Telnyx sub-accounts with Go SDK examples.

Official
Intermediate
dragoscirjandragoscirjan

lang-html

Enforce semantic HTML, WCAG 2.1 AA accessibility, and keyboard navigability.

Community
Basic
rajyeole6rajyeole6

agency-accessibility-auditor

Audits digital interfaces against WCAG 2.2 standards for accessibility and generates remediation reports.

Community
Advanced