web-design-guidelines

Scan HTML, CSS, and JavaScript/TypeScript files for Web Interface Guidelines compliance.

Updated Apr 2, 2026
One-click install
npx skills add https://github.com/abereghici/skills --skill web-design-guidelines-abereghici
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/abereghici/skills/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/abereghici/skills --skill web-design-guidelines-abereghici

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams verify that UI code adheres to Web Interface Guidelines, surfacing accessibility, semantics, and design issues early.

Core Features & Use Cases

  • Automated guideline checks: Fetch latest guidelines and validate code against the rules.
  • Accessibility validation: Check ARIA usage, color contrast, keyboard navigation, and landmarks.
  • Audit reporting: Output findings in a terse file:line format and actionable recommendations.
  • Use Case: Review a UI library to ensure accessibility and design consistency across components.

Quick Start

Provide the files or patterns to review and run the check to obtain guideline conformance results.

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 HTML and CSS for accessibility compliance?

To audit HTML and CSS for accessibility compliance, provide your UI files to scan them against Web Interface Guidelines. The tool identifies ARIA usage, color contrast, keyboard navigation, and semantic issues.

What is the best way to check UI code against web design guidelines?

The best way to check UI code against web design guidelines is to run an automated scan on HTML, CSS, and JavaScript files. This fetches the latest rules and validates your assets for visual and layout issues.

Can I integrate design guideline audits into my code review workflow?

Yes, you can integrate design guideline audits into a code review workflow. The audit produces structured findings in a file:line format, making it straightforward to pinpoint and resolve accessibility issues during reviews.

Does the accessibility audit check JavaScript and TypeScript files?

Yes, the accessibility audit checks JavaScript and TypeScript files. It operates on these assets alongside HTML and CSS to identify semantics, accessibility, and visual layout issues across your entire UI library.

How do I get actionable recommendations for ARIA and color contrast issues?

To get actionable recommendations for ARIA and color contrast issues, scan your target UI files for guideline validation. The output provides terse file:line findings and recommendations to fix the identified problems.