skills.rest
Cwuzto
CwuztoCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Validate UI code against Web Interface Guidelines and report violations in file:line format.

Updated Mar 4, 2026
Search Tags:#design#accessibility#frontend#review#guidelines#web-ui
One-click install
npx skills add https://github.com/Cwuzto/DACN --skill web-design-guidelines-cwuzto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Cwuzto/DACN/tree/main/.agent/skills/web-design-guidelines
Command: npx skills add https://github.com/Cwuzto/DACN --skill web-design-guidelines-cwuzto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web UI implementations often diverge from a centralized set of guidelines, causing visual inconsistencies and accessibility gaps across projects. This Skill enables teams to systematically review code against the latest Web Interface Guidelines to reduce design debt and improve usability.

Core Features & Use Cases

  • Guideline-aware review: scans HTML, CSS, and JS to verify alignment with the latest guidelines.
  • Accessibility checks: flags color contrast, semantic structure, keyboard navigation, and responsive behavior.
  • Use Case: when validating a new page, surface deviations in spacing, typography, and component usage relative to the guidelines.

Quick Start

Run the checker on your UI files to verify compliance with the 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 web UI code for accessibility and design guideline violations?▼

To audit web UI code, run this checker against your HTML, CSS, and JS files to validate alignment with fetched Web Interface Guidelines, reporting deviations in a concise file:line format.

What is the best way to check frontend components for design consistency across projects?▼

Checking frontend components for design consistency requires a guideline-aware review that scans code to verify alignment with centralized rules, reducing visual inconsistencies and design debt across projects.

Can I use this to review spacing and typography deviations on a new web page?▼

Yes, you can validate new pages to surface specific deviations in spacing, typography, and component usage relative to the latest Web Interface Guidelines during your review process.

What format do web interface guideline violations get reported in?▼

Web interface guideline violations are reported in a concise file:line format, allowing developers to quickly locate and fix accessibility gaps and visual inconsistencies in the UI code.

How does a guideline-aware review handle semantic structure and keyboard navigation?▼

A guideline-aware review flags missing semantic structure and verifies keyboard navigation behavior across web components to enforce adherence to accessibility guidelines and improve usability.

Related Skills

Explore More Design & Creative Skills→
CenredJunCenredJun

web-design-guidelines

Assess UI code against the latest Web Interface Guidelines.

Community
Intermediate
agnt-ggagnt-gg
512

web-design-guidelines

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

Community
Intermediate
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced
alexanderopalexanderop
8

web-design-guidelines

Audit local UI files against Web Interface Guidelines and report violations.

Community
Basic