skills.rest
munlucky
munluckyCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Assesses UI code conformity with Web Interface Guidelines, reporting accessibility and design violations by file:line.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web projects often struggle to meet consistent UI standards and accessibility. This Skill provides a structured review process to align UI code with Web Interface Guidelines, reducing UX debt and legal risk.

Core Features & Use Cases

  • Accessibility audit: checks color contrast, keyboard navigation, semantics, and ARIA attributes.
  • Consistency validation: verifies typography, spacing, and component usage against guidelines.
  • Use Case: before launching a new UI, run this Skill to surface accessibility issues and design deviations for remediation.

Quick Start

Review the provided UI files against the latest Web Interface Guidelines and report accessibility and design violations.

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 compliance before launch?▼

To audit UI code for accessibility compliance, you need a structured review process that checks color contrast, keyboard navigation, semantics, and ARIA attributes against Web Interface Guidelines. This skill automates that by fetching fresh guidelines and reporting violations in a concise file:line format.

What is the best way to check web interface design consistency across a project?▼

Checking web interface design consistency involves verifying typography, spacing, and component usage against established guidelines. This skill reads your specified UI files, applies all design rules, and surfaces any deviations to help align your project and reduce UX debt.

Can I review specific UI files for ARIA attribute and semantic violations?▼

Yes, you can review specific UI files for ARIA attribute and semantic violations. The skill reads the file paths you provide, fetches the latest Web Interface Guidelines, applies accessibility rules, and outputs a detailed report of any non-conforming code lines.

Do I need to manually update the web design guidelines for the review?▼

No, you do not need to manually update the web design guidelines. The skill automatically fetches fresh guidelines from the source URL during the review process, ensuring your accessibility checks and design audits always apply the latest compliance rules.

What format does the accessibility review report use to show findings?▼

The accessibility review report uses a concise file:line format to show findings. This precise output identifies exact locations of design deviations and accessibility issues in your UI code, enabling quick and targeted remediation before your web interface launches.

Related Skills

Explore More Design & Creative Skills→
rodrigobranasrodrigobranas
1

web-design-guidelines

Analyze UI code for compliance with Web Interface Guidelines.

Community
Intermediate
WASD6570WASD6570
1

web-design-guidelines

Audits frontend source files for accessibility, UX, and web guideline violations.

Community
Intermediate
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced
bdbchbdbch
2

accessibility-review

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

Community
Advanced