web-design-guidelines

Validate UI code against Web Interface Guidelines for accessibility and design issues.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure UI code adheres to the Web Interface Guidelines, catching accessibility issues and design inconsistencies before deployment.

Core Features & Use Cases

  • Guideline compliance checks: automatically verify files against current Web Interface Guidelines.
  • Pattern coverage: identify common accessibility, layout, and UX issues across the UI.
  • Use Case: a designer asks to audit a new page; run this Skill to surface ARIA, contrast, and semantic HTML issues.

Quick Start

Provide the UI files or pattern to audit, and run the 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 my UI code for accessibility issues?

Auditing UI code for accessibility involves validating files against current Web Interface Guidelines to identify ARIA, contrast, semantic HTML, and layout inconsistencies. This process fetches latest rules, reads specified files, and outputs findings in a file:line style.

What is a web interface guideline compliance check?

A web interface guideline compliance check automatically verifies your UI files against current standards to catch accessibility issues and design inconsistencies before deployment. It reviews specified files or patterns across frameworks to surface semantic, contrast, and layout problems.

Can I use this audit tool with any frontend framework?

Yes, this UI audit tool applies to web pages, components, and UI libraries across all frontend frameworks. It reviews specified files or patterns for accessibility, contrast, semantics, and layout consistency regardless of your framework choice.

How do I check color contrast and ARIA attributes in my components?

Checking color contrast and ARIA attributes requires running a guideline compliance review on your UI files. The process applies rules to your specified components and outputs findings in a file:line style to pinpoint exact issues.

What's the best way to find semantic HTML issues in a UI library?

The best way to find semantic HTML issues in a UI library is to run a pattern coverage review against Web Interface Guidelines. This automatically identifies common accessibility, layout, and UX issues across all specified component files.

Why does my UI audit output show file:line findings?

Your UI audit outputs findings in a file:line style to pinpoint exact locations of accessibility and design issues. This format helps developers quickly navigate to and fix specific ARIA, contrast, and semantic HTML problems within their code.