skills.rest
durancristhian
durancristhianCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Assess UI code against Web Interface Guidelines for accessibility and consistency.

Updated Feb 16, 2026
Search Tags:#accessibility#ui-review#ux-audit#web-design-guidelines#design-quality#css-best-practices
One-click install
npx skills add https://github.com/durancristhian/colore.ar --skill web-design-guidelines-durancristhian
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/durancristhian/colore.ar/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/durancristhian/colore.ar --skill web-design-guidelines-durancristhian

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and developers often struggle to ensure UI code complies with updated Web Interface Guidelines, leading to accessibility gaps and inconsistent design.

Core Features & Use Cases

  • Guideline-aware review: Automatically checks HTML/CSS/ARIA against the latest guidelines.
  • Accessible and responsive check: Flags contrast, focus order, and responsive behavior issues.
  • Use Case: Run a design audit on a product homepage to surface accessibility and UX inconsistencies before release.

Quick Start

Provide the UI files you want reviewed, and the checker will assess them against 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 UI code against web interface guidelines?▼

To audit UI code against web interface guidelines, provide your UI files to the checker. It analyzes HTML, CSS, and ARIA against the latest rules, emitting concise findings on accessibility, visual, and UX issues.

What is a UI review for accessibility and design quality?▼

A UI review for accessibility and design quality is an automated assessment of HTML, CSS, and ARIA against web interface guidelines. It identifies contrast, focus order, and responsive behavior issues to ensure consistency.

Can I use this to check responsive behavior and focus order in my design system?▼

Yes, you can use this to check responsive behavior and focus order in your design system. It applies rule-based findings to websites, apps, and design systems to flag accessibility and UX inconsistencies.

How do I find accessibility and UX inconsistencies before release?▼

You find accessibility and UX inconsistencies before release by running a design audit on your UI files. The checker fetches the latest guidelines and surfaces contrast, focus, and visual issues automatically.

Does the checker work with raw HTML and CSS files?▼

Yes, the checker works with raw HTML and CSS files. It reviews your provided UI code against current web interface guidelines to detect ARIA misuse, CSS best practice violations, and accessibility gaps.

Related Skills

Explore More Design & Creative Skills→
gonzalopozogonzalopozo
1

web-design-guidelines

Compare UI source files against the latest Web Interface Guidelines.

Community
Intermediate
FindMalekFindMalek
9

web-design-guidelines

Audits frontend components for compliance with Web Interface Guidelines.

Community
Intermediate
dthompsonfldthompsonfl

web-design-guidelines

Audit HTML, CSS, and ARIA against Web Interface Guidelines and report violations.

Community
Intermediate
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced