skills.rest
abeldotam
abeldotamCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Audits HTML, CSS, and JavaScript code for compliance with Web Interface Guidelines.

13|Updated Feb 4, 2026
Search Tags:#accessibility#frontend#audit#ux#web-design#ui-guidelines
One-click install
npx skills add https://github.com/abeldotam/bmad-viewer --skill web-design-guidelines-abeldotam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/abeldotam/bmad-viewer/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/abeldotam/bmad-viewer --skill web-design-guidelines-abeldotam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams verify that web UI code adheres to Web Interface Guidelines, catching accessibility gaps, consistency issues, and UX deviations early in development.

Core Features & Use Cases

  • Guideline-driven reviews: Compare HTML/CSS/JS against the latest Web Interface Guidelines.
  • Guideline-source driven checks: Pull fresh rules from the official source before each run to ensure up-to-date validation.
  • Use Case: When reviewing a new UI component, run a guideline audit to surface contrast ratios, semantic correctness, and interaction consistency.

Quick Start

Inspect the latest UI code against the fetched guidelines to surface accessibility and UX improvements.

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

To audit web UI code for accessibility and UX issues, this skill fetches the latest Web Interface Guidelines and compares your HTML, CSS, and JavaScript assets against them, reporting findings in a file:line format.

What is a guideline-driven UI review for frontend components?▼

A guideline-driven UI review validates frontend components by comparing HTML, CSS, and JS code against established Web Interface Guidelines to surface contrast ratios, semantic correctness, and interaction consistency issues.

Can I check semantic correctness and contrast ratios using automated UI guidelines?▼

Yes, you can check semantic correctness and contrast ratios by running an automated audit that applies fetched Web Interface Guidelines directly to your repository's UI code and design tokens.

How do I ensure my accessibility audit uses the latest UX guidelines?▼

To ensure your accessibility audit uses the latest UX guidelines, this skill pulls fresh rules directly from the official Web Interface Guidelines source before each run to validate your code.

Does the UI accessibility audit work with HTML, CSS, and JavaScript files?▼

Yes, the UI accessibility audit works with HTML, CSS, and JavaScript files across pages and components, and also processes optional design tokens and repository assets to identify issues.

What is the best way to find interaction consistency deviations in frontend code?▼

The best way to find interaction consistency deviations in frontend code is to run a guideline-driven audit that fetches current Web Interface Guidelines and reports exact file and line numbers for each issue.

Related Skills

Explore More Design & Creative Skills→
xinge-jixinge-ji

web-design-guidelines

Compare frontend HTML, CSS, and JavaScript files against Web Interface Guidelines.

Community
Intermediate
do-ob-iodo-ob-io

web-design-guidelines

Analyze HTML, CSS, and JavaScript UI code against Web Interface Guidelines.

Official
Basic
buchananwillbuchananwill
2

mandate-ui-design

Evaluate UI designs for semantic tokens, composability, and theming.

Community
Intermediate
LschulzesLschulzes

web-design-guidelines

Evaluate UI code against Web Interface Guidelines to detect deviations.

Community
Intermediate