web-design-guidelines

Audit UI code against Web Interface Guidelines for accessibility and usability.

203|9|Updated Dec 23, 2019
One-click install
npx skills add https://github.com/elianiva/dotfiles --skill web-design-guidelines-elianiva
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/elianiva/dotfiles/tree/main/agents/skills/web-design-guidelines
Command: npx skills add https://github.com/elianiva/dotfiles --skill web-design-guidelines-elianiva

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web teams struggle to ensure UI code aligns with current Web Interface Guidelines for accessibility, usability, and visual consistency.

Core Features & Use Cases

  • Fetch latest guidelines from a trusted source before reviews.
  • Validate HTML/CSS/JS against those guidelines and report deviations with precise locations.
  • Use Case: A designer or developer runs a quick audit of a new dashboard to ensure color contrast, keyboard navigation, and semantic markup meet required standards.

Quick Start

Provide the target UI files or patterns to review and let the skill fetch the latest guidelines and run the compliance checks.

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 UX issues?

You can validate UI code against Web Interface Guidelines by providing target files or patterns; the skill fetches the latest official guidelines, runs compliance checks for accessibility and usability, and outputs a report with precise deviation locations.

What does a UI accessibility review cover for a web dashboard?

An accessibility review validates color contrast, keyboard navigation, and semantic markup against current Web Interface Guidelines, identifying usability and visual consistency deviations in your dashboard code with precise file locations.

Can I run a design review on existing HTML and CSS files without manual setup?

Yes, provide your HTML and CSS files or patterns directly; the skill fetches the latest guidelines from the official source automatically and applies compliance checks without requiring additional setup or dependencies.

Do I need any external dependencies or components to check UI compliance?

No dependencies or components are required; the skill independently fetches the latest Web Interface Guidelines from the official source and applies compliance rules to your provided UI files or patterns to generate the report.

What is the best way to identify color contrast and keyboard navigation issues in UI code?

Run a compliance audit by providing your UI files; the skill fetches current Web Interface Guidelines and validates color contrast and keyboard navigation, reporting each deviation with precise file locations.

How does fetching the latest guidelines improve a UX design review?

Fetching the latest guidelines ensures the UX design review applies current accessibility and usability standards from the official source to your UI code, preventing outdated checks and improving compliance report accuracy.