web-design-guidelines

Check HTML, CSS, and JavaScript/TypeScript files against Web Interface Guidelines.

3|Updated Dec 31, 2025
One-click install
npx skills add https://github.com/Overdrive-Consulting/overdrive-ai-devkit --skill web-design-guidelines-overdrive-consulting
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Overdrive-Consulting/overdrive-ai-devkit/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/Overdrive-Consulting/overdrive-ai-devkit --skill web-design-guidelines-overdrive-consulting

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure UI code aligns with the latest Web Interface Guidelines, catching accessibility and UX issues early so teams can ship compliant interfaces faster.

Core Features & Use Cases

  • Guideline checks: automatically compare UI files against the latest guidelines sourced from the Guidelines Source URL.
  • Comprehensive review: supports checking HTML, CSS, and JavaScript/TypeScript files for accessibility conformance and visual consistency.
  • Use Case: Imagine a redesign of a web app; run this Skill to validate accessibility, color contrast, keyboard navigation, and semantic structure against the guidelines.

Quick Start

Run the web-design-guidelines skill against your target UI files by providing a path or pattern, for example: index.html or src/**/*.tsx, to begin a 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 frontend code for accessibility and web interface guideline compliance?

To audit frontend code for accessibility compliance, target your HTML, CSS, or JavaScript/TypeScript files. The skill reads these files and reports accessibility and visual consistency findings in a concise file:line format.

What is the best way to check UI components for accessibility conformance during a web app redesign?

Checking UI components for accessibility conformance involves comparing them against the latest Web Interface Guidelines. Running a site-wide audit validates color contrast, keyboard navigation, and semantic structure to catch issues early.

Can I review specific TypeScript and HTML files for visual consistency issues?

Yes, you can review specific TypeScript and HTML files for visual consistency issues. Provide a file path or pattern, such as src/**/*.tsx, to initiate a file-level review that checks for guideline alignment.

How does an automated UI guideline check work for web projects?

An automated UI guideline check works by fetching the latest Web Interface Guidelines from a source URL, reading the target frontend files, and generating a report. This process identifies accessibility and UX issues early in the development cycle.

Does this web design audit work with both HTML and JavaScript codebases?

Yes, this web design audit works with both HTML and JavaScript codebases. It supports comprehensive reviews across HTML, CSS, and JavaScript/TypeScript projects to ensure UI code aligns with established guidelines.

What format are web interface guideline violations reported in?

Web interface guideline violations are reported in a concise file:line format. This output method pinpoints exact locations within your frontend codebase, allowing you to quickly locate and resolve accessibility findings.