web-design-guidelines

Verify HTML/CSS/JS UI code against Web Interface Guidelines and report findings in file:line format.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure UI implementations adhere to Web Interface Guidelines, reducing accessibility gaps and UX issues during development.

Core Features & Use Cases

  • Guidelines-driven review: fetches the latest Web Interface Guidelines and applies them to your UI files.
  • File-scoped analysis: reads HTML, CSS, and JS files (or patterns) and highlights violations against the guidelines.
  • Output reporting: returns findings in a terse file:line style suitable for quick triage in code reviews.
  • Use Case: Imagine reviewing a new web UI; you provide your HTML/CSS/JS files, and this skill flags aria attributes, color contrast, focus management, and pattern mismatches.

Quick Start

Provide the path(s) to your UI files (HTML/CSS/JS) and let the skill fetch the latest guidelines to begin the review.

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 HTML and CSS for web accessibility compliance?

To audit web accessibility compliance, provide the paths to your HTML, CSS, and JS files. The skill evaluates them against Web Interface Guidelines and reports violations in a terse file:line format.

What is the best way to automate UX compliance reviews for web apps?

Automating UX compliance reviews involves fetching the latest Web Interface Guidelines and applying them to your UI code. This skill flags aria attributes, color contrast, and focus management issues for quick triage.

Can I check UI code against web design guidelines without installing dependencies?

Yes, you can check UI code without dependencies. The skill requires no external modules and reads your target files directly to evaluate all rules against the fetched design guidelines.

Does this accessibility checker work with JavaScript files or only HTML and CSS?

This accessibility checker works with JavaScript files as well as HTML and CSS. It reads all specified UI files or patterns to highlight violations and pattern mismatches across your web project.

How do I get a code review report for web interface guideline violations?

To get a code review report for web interface guideline violations, run the skill on your target files. It returns findings in a terse file:line style suitable for quick triage during development.