skills.rest
jokken79
jokken79COMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Identify UI code violating Web Interface Guidelines and report accessibility and design inconsistencies.

1|Updated Dec 15, 2025
Search Tags:#ui#accessibility#review#ux#web-guidelines#design-audit
One-click install
npx skills add https://github.com/jokken79/YuKyuDATA-app1.0v --skill web-design-guidelines-jokken79
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/jokken79/YuKyuDATA-app1.0v/tree/main/.agent/skills/web-design-guidelines
Command: npx skills add https://github.com/jokken79/YuKyuDATA-app1.0v --skill web-design-guidelines-jokken79

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure UI code adheres to Web Interface Guidelines, improving accessibility, usability, and visual consistency across web interfaces.

Core Features & Use Cases

  • Automated guideline checks for HTML, CSS, and JavaScript against the latest Web Interface Guidelines.
  • Accessibility conformance checks (color contrast, semantic HTML, keyboard navigation, ARIA usage).
  • Design consistency review across pages and components.
  • Use Case: QA engineers or frontend developers run checks on new pages to identify accessibility issues and styling inconsistencies.

Quick Start

Provide the UI files or patterns you want reviewed and run the Web Interface Guidelines checker.

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 web UI code for accessibility and design inconsistencies?▼

To audit web UI code for accessibility and design inconsistencies, provide your HTML, CSS, and JavaScript files to an automated checker. It fetches the latest Web Interface Guidelines, applies them to specified files, and reports violations in a concise format.

What is a web interface guidelines checker and how does it work?▼

A web interface guidelines checker identifies UI code that violates established rules by fetching the latest guidelines and applying them to your files. It surfaces accessibility issues, semantic HTML errors, and UX pattern inconsistencies automatically.

Can I use an automated design audit tool for small web projects?▼

Yes, you can use an automated design audit tool for web projects of any size. It performs automated accessibility conformance checks and design consistency reviews regardless of project scale or component complexity.

Does an accessibility review check color contrast and keyboard navigation?▼

Yes, an accessibility review checks color contrast, semantic HTML, keyboard navigation, and ARIA usage. It applies these conformance checks against the latest Web Interface Guidelines to identify UI violations.

What is the best way to ensure UI code adheres to web guidelines?▼

The best way to ensure UI code adheres to web guidelines is running automated checks on HTML, CSS, and JavaScript. This design audit fetches the latest rules and reports accessibility and styling inconsistencies concisely.

Do I need to install dependencies to run a UX pattern check?▼

No dependencies are required to run a UX pattern check. The tool fetches the latest rules from the guidelines source directly and applies them to your specified UI files to report accessibility violations.

Related Skills

Explore More Design & Creative Skills→
pavanpaikpavanpaik

web-design-guidelines

Assess HTML, CSS, and JavaScript UI code against Web Interface Guidelines.

Community
Intermediate
do-ob-iodo-ob-io

web-design-guidelines

Analyze HTML, CSS, and JavaScript UI code against Web Interface Guidelines.

Official
Basic
PrakD3PrakD3
1

web-design-guidelines

Identify UI code violating Web Interface Guidelines and report findings in file:line format.

Community
Intermediate
bdbchbdbch
2

accessibility-review

Audit web applications for WCAG 2.1/2.2 accessibility compliance in Chrome.

Community
Advanced