skills.rest
gelsonsimoes
gelsonsimoesCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Analyze UI code against Web Interface Guidelines and report issues in file:line format.

Updated Feb 22, 2026
Search Tags:#ui#consistency#accessibility#frontend#review#web-guidelines#design-audit
One-click install
npx skills add https://github.com/gelsonsimoes/wms-verticalparts --skill web-design-guidelines-gelsonsimoes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/gelsonsimoes/wms-verticalparts/tree/main/.agent/skills/web-design-guidelines
Command: npx skills add https://github.com/gelsonsimoes/wms-verticalparts --skill web-design-guidelines-gelsonsimoes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI code often breaks accessibility and consistency standards, leading to poor user experience and inconsistent interfaces. This Skill automates guideline-based reviews to catch issues early and speed up design validation.

Core Features & Use Cases

  • Fetch guidelines from the official source and compare files against all rules.
  • Output findings in file:line format to enable quick triage and fixes.
  • Use during design reviews, UI audits, or code reviews to validate conformance with guidelines.

Quick Start

Provide the UI files to review and let the skill fetch and apply the latest Web Interface Guidelines.

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 consistency issues?▼

An automated UI audit compares your code against fetched Web Interface Guidelines to identify accessibility, usability, and consistency issues. It outputs findings in a file:line format to enable quick triage and fixes during design reviews.

What is a design audit and how does it check frontend conformance?▼

A design audit validates frontend conformance by comparing UI code against official Web Interface Guidelines. It reports accessibility and usability findings in a terse file:line format, enabling rapid triage and faster design validation.

How do I check if my frontend code meets web accessibility guidelines?▼

To check frontend accessibility, provide your UI files for an automated review that fetches the latest official Web Interface Guidelines. It compares your code against all rules and outputs findings in a file:line format for quick triage.

Can I use an automated design audit for code reviews without external dependencies?▼

Yes, you can run an automated design audit for code reviews without external dependencies. The tool fetches the latest rules from the official source internally and validates your UI files against all rules to report conformance findings.

What is the best way to format UI accessibility findings for rapid triage?▼

The best way to format UI accessibility findings for rapid triage is a terse file:line format. This allows developers to quickly locate and fix specific usability, consistency, and accessibility issues identified during the UI audit.

Related Skills

Explore More Design & Creative Skills→
cyhinversecyhinverse

web-design-guidelines

Compare UI files against the latest Web Interface Guidelines to report conformance gaps.

Community
Intermediate
juanjaragavijuanjaragavi

web-design-guidelines

Compare project files against Web Interface Guidelines to identify UI violations.

Community
Intermediate
anasahmed07anasahmed07
1

web-design-guidelines

Validate web UI code against Web Interface Guidelines for accessibility and design nonconformities.

Community
Intermediate
benjaminshoemakerbenjaminshoemaker
39

browser-verification

Automate browser-based UI verification with MCP tooling and evidence capture.

Community
Advanced