web-design-guidelines

Fetch Web Interface Guidelines and report UI compliance issues in file:line format.

3|Updated Feb 13, 2026
One-click install
npx skills add https://github.com/ahiendz/DuAnCuoiKhoa --skill web-design-guidelines-ahiendz
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/ahiendz/DuAnCuoiKhoa/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/ahiendz/DuAnCuoiKhoa --skill web-design-guidelines-ahiendz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams ensure web interfaces meet established Web Interface Guidelines, improving accessibility, usability, and consistency across products.

Core Features & Use Cases

  • Guideline-driven review: automatically checks UI files against the latest guidelines and reports deviations.
  • Accessibility focus: highlights issues related to color contrast, keyboard navigation, semantic HTML, and ARIA attributes.
  • Audit scenario support: suitable for reviews during design handoffs, code reviews, and UI refresh cycles.

Quick Start

Provide the files you want reviewed and I will fetch the latest guidelines and report any compliance gaps.

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 UI code for accessibility and compliance issues?

To audit web UI code for accessibility and compliance, provide your UI files for review. The tool fetches the latest Web Interface Guidelines, validates the code against these rules, and reports deviations in a concise file:line format with suggested fixes.

What is a guideline-driven UI review and how does it work?

A guideline-driven UI review is a process that automatically checks UI files against fetched Web Interface Guidelines. It validates code to identify deviations in accessibility, consistency, and layout correctness, then outputs findings highlighting violations and suggested fixes.

Can I use this for code reviews during a design handoff?

Yes, you can use this for code reviews during design handoffs. It supports audit scenarios like design handoffs and UI refresh cycles by validating provided files against established guidelines and reporting compliance gaps.

What specific accessibility issues does a UI compliance audit check for?

A UI compliance audit checks for accessibility issues including color contrast, keyboard navigation, semantic HTML, and ARIA attributes. It highlights these issues by applying the latest Web Interface Guidelines to your provided files.

How do I get suggested fixes for layout and UX best practice violations?

To get suggested fixes for layout and UX best practice violations, submit your UI files for review. The tool identifies compliance issues and reports findings in a concise file:line format that highlights violations alongside their suggested fixes.

Do I need to provide the Web Interface Guidelines manually for a UI review?

No, you do not need to provide the Web Interface Guidelines manually. The review process automatically fetches the latest guidelines and applies them to your provided files to identify compliance issues.