skills.rest
Choco-emmm
Choco-emmmCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Scan UI code for Web Interface Guidelines compliance and report prioritized violations.

7|Updated May 8, 2026
Search Tags:#ui#accessibility#frontend#guidelines#web-design#ux-review
One-click install
npx skills add https://github.com/Choco-emmm/MoodCopilot --skill web-design-guidelines-choco-emmm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Choco-emmm/MoodCopilot/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/Choco-emmm/MoodCopilot --skill web-design-guidelines-choco-emmm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Identify and fix deviations from Web Interface Guidelines in UI code to ensure accessibility, consistency, and usable design across projects.

Core Features & Use Cases

  • Guideline conformance checks: scans UI code for alignment with established Web Interface Guidelines and flags violations.
  • Accessibility and UX validation: evaluates semantic HTML, color contrast, keyboard navigation, and readability.
  • Use Case: Imagine auditing a new web app's interface to patch accessibility gaps before release.

Quick Start

Provide the UI files to review and let the tool fetch the latest guidelines to produce a compliance report.

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 frontend UI code for web accessibility and UX compliance?▼

To check frontend UI code for web accessibility and UX compliance, provide your UI files to scan for semantic HTML, color contrast, and keyboard navigation deviations against established guidelines. The tool outputs a line-numbered, prioritized list of violations with remediation steps.

What is a web interface guidelines audit and how does it validate semantic HTML?▼

A web interface guidelines audit evaluates UI code to ensure semantic correctness, accessibility, and usable design. It validates HTML structure by fetching the latest guidelines, scanning files, and reporting deviations with line-numbered, prioritized remediation steps.

How do I audit a web app interface for accessibility gaps before release?▼

Audit a web app interface for accessibility gaps by submitting UI files for a conformance check. The tool evaluates semantic HTML, color contrast, and keyboard navigation, generating a prioritized compliance report with succinct remediation steps.

Can I use this tool to review UI code without installing dependencies?▼

Yes, you can review UI code for guideline conformance without installing dependencies. The tool operates independently by fetching the latest web interface guidelines to produce a compliance report directly from your provided files.

What is the best way to fix color contrast and keyboard navigation violations in UI code?▼

The best way to fix color contrast and keyboard navigation violations is to run a guideline conformance check on your UI files. The tool identifies these accessibility deviations and provides a line-numbered, prioritized list with succinct remediation steps.

Why does my web design fail semantic correctness checks during a UX review?▼

Your web design may fail semantic correctness checks during a UX review if the UI code deviates from established web interface guidelines. The audit flags these specific HTML issues, providing line-numbered violations and remediation steps to patch accessibility gaps.

Related Skills

Explore More Design & Creative Skills→
nanorepublicananorepublica
61

Frontend Accessibility

Enforce frontend accessibility compliance in HTML, CSS, and JavaScript components.

Community
Basic
TNHoang2708TNHoang2708
1

ck:web-design-guidelines

Review UI code for compliance with Web Interface Guidelines.

Community
Intermediate
HerbertJulioHerbertJulio
20

design-review

Audit frontend code for design consistency, accessibility, and UX patterns.

Community
Intermediate
lord-vinayaklord-vinayak

playwright-accessibility-auditor

Automate browser accessibility testing with axe-core and Playwright.

Community
Advanced