skills.rest
jay6697117
jay6697117COMMUNITY
Explore all skills by this author →
Website𝕏@nullGitHub

web-design-guidelines

Evaluate UI code against Web Interface Guidelines and output a compliance report.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web UI often diverges from established guidelines, leading to accessibility and usability gaps. This skill analyzes code against Web Interface Guidelines and surfaces non-compliance, accelerating reviews and reducing design debt.

Core Features & Use Cases

  • Guideline-driven review: Compares UI code against the latest Web Interface Guidelines to identify violations.
  • Pattern-based checks: Validates common UI patterns for accessibility, contrast, and semantic markup.
  • Audit & reporting: Generates a concise, actionable report that highlights issues and suggested fixes.
  • Use Case: Use during a design review or PR to ensure new UI components conform before release.

Quick Start

Provide the UI files or patterns to review and let the skill fetch guidelines to begin the audit.

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

You can audit UI code for accessibility and compliance by comparing it against Web Interface Guidelines to validate semantic markup, contrast, and common UI patterns. The review generates a concise report highlighting deviations and actionable fixes.

What is the best way to ensure web component accessibility before a design review?▼

The best way to ensure web component accessibility is running a guideline-driven review that fetches Web Interface Guidelines to validate UI patterns. This surfaces violations and outputs a compliance report with suggested fixes before release.

Can I use this to check visual consistency and usability for a component library?▼

Yes, you can check visual consistency and usability for a component library by analyzing the UI code against Web Interface Guidelines. The audit validates common UI patterns for semantic markup and contrast to ensure visual consistency across components.

How do I generate an actionable report for UI guideline violations during a PR?▼

To generate an actionable report for UI guideline violations during a PR, provide the UI files or patterns for review. The audit evaluates the code against Web Interface Guidelines and outputs a concise report highlighting issues and suggested fixes.

Does the web interface audit check semantic markup and contrast automatically?▼

Yes, the web interface audit automatically checks semantic markup and contrast by validating common UI patterns against established guidelines. It performs pattern-based checks to identify deviations and ensure accessibility compliance.

Related Skills

Explore More Design & Creative Skills→
raphaelmansraphaelmans

web-design-guidelines

Audit web UI files against official Web Interface Guidelines and report findings in file:line format.

Community
Intermediate
sanky369sanky369
29

accessibility-excellence

Audit web applications for WCAG compliance and accessibility gaps.

Community
Basic
dragoscirjandragoscirjan

lang-html

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

Community
Basic
stephschofieldstephschofield

web-design-guidelines

Audit UI code for Web Interface Guidelines compliance and report findings in file:line format.

Community
Intermediate