web-design-guidelines

Audit HTML, CSS, and JS files for Web Interface Guidelines compliance.

Updated Dec 8, 2025
One-click install
npx skills add https://github.com/Yahia89/meditrans --skill web-design-guidelines-yahia89
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Yahia89/meditrans/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/Yahia89/meditrans --skill web-design-guidelines-yahia89

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for Web Interface Guidelines compliance, helping teams ensure accessibility, consistency, and adherence to best practices across web projects.

Core Features & Use Cases

  • Guideline-driven review: Fetch the latest Web Interface Guidelines and apply them to your codebase.
  • File-level audits: Evaluate HTML/CSS/JS files for accessibility, semantic correctness, and visual consistency.
  • Use Case: When asked to review your UI, audit accessibility, or check a site against best practices, run this Skill to identify violations and suggested fixes.

Quick Start

Start by requesting a review on your web UI and providing the target files or patterns for assessment.

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 web UI code for accessibility and design consistency violations?

To audit web UI code, this Skill fetches Web Interface Guidelines and applies them to your HTML, CSS, and JS files to automatically identify accessibility issues, semantic errors, and visual design-token inconsistencies. It outputs structured findings in a file:line format.

What is a guideline-driven UI code review for web projects?

A guideline-driven UI code review fetches established Web Interface Guidelines and applies them directly to your codebase. This process evaluates HTML, CSS, and JS files to detect accessibility problems, semantic correctness, and visual consistency deviations across pages and components.

Can I check my HTML and CSS files for design-token usage automatically?

Yes, you can check HTML and CSS files for design-token usage automatically. This Skill evaluates specified file collections against fetched rules to audit accessibility, visual consistency, and proper design-token implementation across your web interface components.

How do I get structured findings for accessibility violations in my web interface?

To get structured findings for accessibility violations, this Skill reads your specified files, applies fetched Web Interface Guidelines rules, and outputs structured findings in a precise file:line format. This helps you quickly locate and fix accessibility and consistency issues.

Does this UI review tool work with plain HTML, CSS, and JS file collections?

Yes, this UI review tool works directly with plain HTML, CSS, and JS file collections. It applies to web projects by reading specified files and evaluating them for accessibility, semantic correctness, and visual consistency without requiring complex dependencies.

What is the best way to ensure web interface guidelines compliance across components?

The best way to ensure web interface guidelines compliance is to run an automated UI code review. This Skill fetches the latest guidelines and evaluates your web project files to identify accessibility violations and visual inconsistencies, providing structured findings for suggested fixes.