web-design-guidelines

Enforce Web Interface Guidelines compliance on UI codebases.

Updated Mar 8, 2026
One-click install
npx skills add https://github.com/ZiadNagar/zeVillage-AI-Toolkit --skill web-design-guidelines-ziadnagar
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/ZiadNagar/zeVillage-AI-Toolkit/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/ZiadNagar/zeVillage-AI-Toolkit --skill web-design-guidelines-ziadnagar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automatically verify that UI code adheres to Web Interface Guidelines to catch accessibility gaps and design inconsistencies before release.

Core Features & Use Cases

  • Fetches the latest guidelines from the official source and applies them to your UI code.
  • Analyzes HTML/CSS/JS for accessibility compliance, visual consistency, and semantic correctness.
  • Use Case: Run a design audit on a UI module to identify violations and generate a remediation plan.

Quick Start

Provide the UI files you want reviewed and initiate a guideline compliance check against the latest Web Interface Guidelines.

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 and web design guidelines?

To audit UI code for web design guidelines, provide your UI files for review. The tool fetches the latest official Web Interface Guidelines, analyzes HTML/CSS/JS for accessibility and semantic correctness, and outputs findings in a terse file:line format.

What is a web interface design review and how does it work?

A web interface design review identifies compliance gaps in UI codebases. It automatically fetches standard guidelines, applies rules across web apps or marketing sites to catch accessibility gaps and visual inconsistencies, and generates a remediation plan before release.

Can I run a design review on a component library and dashboards?

Yes, you can run a design review on a component library and dashboards. The tool applies web interface guidelines across various UI codebases, including web apps and marketing sites, to enforce visual consistency and semantic correctness.

How do I check HTML and CSS compliance with web interface guidelines?

To check HTML and CSS compliance, specify the files for review. The tool reads your code, applies the latest fetched Web Interface Guidelines rules to analyze accessibility and visual consistency, and outputs precise file:line violations.

What's the best way to catch accessibility gaps in a UI codebase before release?

The best way to catch accessibility gaps before release is to run an automated guideline compliance check. This reviews your UI files against the latest Web Interface Guidelines to detect violations and output actionable findings in a terse file:line format.