web-design-guidelines

Identify UI compliance issues in source files against Web Interface Guidelines.

Updated Apr 6, 2026
One-click install
npx skills add https://github.com/xmun74/chordlens --skill web-design-guidelines-xmun74
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/xmun74/chordlens/tree/main/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/xmun74/chordlens --skill web-design-guidelines-xmun74

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure UI code and designs comply with Web Interface Guidelines by analyzing files and reporting deviations, enabling faster, more accessible products.

Core Features & Use Cases

  • Fetch latest Web Interface Guidelines and apply them to your project files.
  • Analyze UI components, markup, and styles for accessibility, consistency, and UX quality.
  • Use Case: Review a React component library to surface color contrast and keyboard navigation issues before release.

Quick Start

Provide the files or patterns you want reviewed to start 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 accessibility compliance?

The Skill audits UI code for accessibility and UX quality by fetching the latest Web Interface Guidelines and applying all rules to your provided files. It outputs compliance deviations in a terse file:line format for quick resolution.

Can I review an entire web repository for design guideline deviations?

Yes, you can review an entire web repository for design guideline deviations. The Skill accepts specific file patterns or entire repositories, applies all Web Interface Guidelines rules, and outputs deviations in a terse file:line format.

Does the UI compliance audit work with React component libraries?

Yes, the UI compliance audit works with React component libraries by analyzing their source files. It applies Web Interface Guidelines to surface issues like color contrast and keyboard navigation problems before release.

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

The best way to check web design consistency across a project is applying standardized Web Interface Guidelines to your codebase. The Skill fetches these rules, analyzes your UI files, and reports consistency findings in a terse file:line format.

How does the web accessibility review process work?

The web accessibility review process works by fetching Web Interface Guidelines from a specified URL, reading your provided files, applying all rules, and outputting compliance findings in a file:line format to identify UI deviations.