web-design-guidelines

Scan HTML, CSS, and JS files against Web Interface Guidelines and return line-numbered reports.

Updated Feb 9, 2026
One-click install
npx skills add https://github.com/H2OSLabs/neuron-ui --skill web-design-guidelines-h2oslabs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/H2OSLabs/neuron-ui/tree/main/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/H2OSLabs/neuron-ui --skill web-design-guidelines-h2oslabs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Web Interface Guidelines skill helps teams enforce consistent, accessible UI patterns by auditing code against the latest best practices before deployment.

Core Features & Use Cases

  • Fetches up-to-date Web Interface Guidelines and evaluates HTML, CSS, and JavaScript against them.
  • Produces a concise report of violations with actionable remediation steps for designers and developers.
  • Use Case: Review a UI component library to ensure color contrast, semantic HTML, and keyboard navigation meet guidelines.

Quick Start

Run the review by providing the path to your UI files and let the tool fetch the latest guidelines and check compliance.

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 project for accessibility and UX compliance?

To audit web accessibility and UX compliance, provide the path to your HTML, CSS, and JavaScript files. The tool fetches the latest Web Interface Guidelines, scans the code, and returns a concise, line-numbered report with actionable remediation steps.

How does a UI lint review check HTML and CSS against web guidelines?

A UI lint review checks HTML and CSS by evaluating the code against up-to-date Web Interface Guidelines. It identifies violations in semantic structure, color contrast, and keyboard navigation, then outputs a file:line formatted report detailing necessary remediation steps.

Can I review a UI component library for consistency before deployment?

Yes, you can review a UI component library for consistency before deployment. The tool scans your provided UI files to ensure color contrast, semantic HTML, and keyboard navigation meet the latest accessibility and usability guidelines.

What is the best way to ensure web interface accessibility for a new project?

The best way to ensure web interface accessibility is to run an automated review against the latest Web Interface Guidelines. This scans your HTML, CSS, and JS files to identify compliance violations early and provides practical remediation notes for designers and developers.

Do I need to manually import web accessibility rules before scanning my code?

No, you do not need to manually import web accessibility rules before scanning. The tool automatically retrieves the latest rules from the official Web Interface Guidelines source during the review process to evaluate your code accurately.

Why does my UI accessibility review report show line numbers?

Your UI accessibility review report shows line numbers to pinpoint exact violation locations in your HTML, CSS, and JavaScript files. This required file:line format helps developers quickly locate and resolve usability and consistency issues.