web-design-guidelines

Detect Web Interface Guideline violations in HTML, CSS, and JavaScript UI code.

512|64|Updated Mar 13, 2025

Search Tags:#design #accessibility #audit #review #guidelines #web-ui

Ready to run

npx skills add https://github.com/agnt-gg/agnt --skill web-design-guidelines-agnt-gg

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/agnt-gg/agnt/tree/main/backend/skills/web-design-guidelines
Command: npx skills add https://github.com/agnt-gg/agnt --skill web-design-guidelines-agnt-gg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for Web Interface Guidelines compliance, helping teams ensure accessibility, consistency, and usability.

Core Features & Use Cases

Automated UI guideline checks across codebases (HTML/CSS/JS/frameworks)
Accessibility conformance validation (ARIA roles, semantic HTML, color contrast)
UX consistency audits across components and patterns
Use Case: Evaluate a React component library for accessibility compliance and visual parity with design specs

Quick Start

Provide the UI source files to begin the automated guideline 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 UI code for web design compliance and accessibility gaps?▼

To audit UI code for web design compliance, provide your front-end source files for automated review. The tool examines HTML, CSS, and JavaScript frameworks to identify accessibility gaps, semantic issues, and visual inconsistencies, outputting structured results for developer review.

What is automated accessibility conformance validation for UI components?▼

Automated accessibility conformance validation checks UI code for correct ARIA roles, semantic HTML structure, and color contrast. It evaluates front-end projects against the latest Web Interface Guidelines to ensure usability and visual parity with design specs.

Can I use this web UI guideline review with React component libraries?▼

Yes, you can use this web UI guideline review with React component libraries. It applies across HTML, CSS, and JavaScript frameworks to evaluate component libraries for accessibility compliance and visual consistency.

How do I check my HTML and CSS for semantic issues and visual inconsistencies?▼

To check HTML and CSS for semantic issues and visual inconsistencies, run an automated UI guideline audit on your source files. The process fetches the latest remote guidelines and reports structured findings to guide codebase fixes and optimizations.

What's the best way to ensure UX consistency across front-end codebases?▼

The best way to ensure UX consistency across front-end codebases is to run an automated UI guideline audit. It reviews your source files against fetched Web Interface Guidelines to detect visual inconsistencies and semantic issues, providing structured reports for fixes.