web-design-guidelines

Compare HTML, CSS, and JS files against Web Interface Guidelines and report violations.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams verify that their web interfaces comply with up-to-date Web Interface Guidelines, reducing usability and accessibility issues in production.

Core Features & Use Cases

  • Automated guideline checks: Compare project files against the latest guidelines to identify violations.
  • Focused review areas: Accessibility, visual consistency, responsive behavior, and semantic structure.
  • Use Case: A designer uploads a set of HTML/CSS/JS files; the tool reports violations and suggested fixes for navigation, contrast, and keyboard operability.

Quick Start

Provide a file or pattern to review, and the tool will fetch the latest guidelines and return a concise report.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check my HTML and CSS files for accessibility and UI guideline violations?

To check HTML and CSS files for accessibility violations, provide your project files to the tool, which compares them against the latest Web Interface Guidelines and returns a concise report of issues and recommended fixes.

What is the best way to audit a web interface for compliance with visual consistency and semantic structure guidelines?

Auditing a web interface for visual consistency and semantic structure compliance involves comparing your provided patterns or files against current UI guidelines, which generates a focused report detailing violations and actionable recommendations.

Does this automated web design review cover responsive behavior and keyboard operability?

Yes, the automated web design review covers responsive behavior and keyboard operability, evaluating your uploaded files against current interface guidelines to identify usability gaps and output specific recommendations to fix them.

How do I review navigation and contrast issues in my web project files?

Reviewing navigation and contrast issues in web project files requires submitting your code to the guideline checker, which applies the latest rules and formats the results into a concise report of violations to act on.

Can I use this tool to verify semantic structure and compliance without manual inspection?

You can verify semantic structure and compliance without manual inspection by supplying your files to the tool, which fetches the latest web guidelines, applies the rules automatically, and outputs a report of identified gaps.

What format should I provide my web files in to get an accessibility gaps report?

Provide your web files in HTML, CSS, or JS formats to review them; the tool fetches the latest guidelines, applies the rules to your code, and formats the output method as a concise report of violations.