web-design-guidelines

Identify UI code compliance issues against the Web Interface Guidelines.

Updated Aug 23, 2026

Search Tags:#ui #accessibility #compliance #review #guidelines #web

Ready to run

npx skills add https://github.com/marvisrego/HACKATHON_LLM_dev --skill web-design-guidelines-marvisrego

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/marvisrego/HACKATHON_LLM_dev/tree/main/.trae/skills/web-design-guidelines
Command: npx skills add https://github.com/marvisrego/HACKATHON_LLM_dev --skill web-design-guidelines-marvisrego

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams verify that their UI code adheres to the Web Interface Guidelines, catching accessibility gaps, visual inconsistencies, and usability issues before release.

Core Features & Use Cases

Guidelines fetch: Pull the latest Web Interface Guidelines to ensure reviews reflect current standards.
File coverage: Inspect HTML, CSS, and JS assets across components and pages for compliance against the guidelines.
Reporting: Output findings in the concise file:line format for easy remediation.
Use Case: When reviewing a new UI module or a site-wide redesign, run this Skill to identify accessibility violations and design inconsistencies early in the process.

Quick Start

Provide the files or patterns to review and the Skill will fetch the latest guidelines and report any violations.

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 code for web accessibility compliance?▼

You can audit UI code for accessibility and design compliance by providing your HTML, CSS, and JS files. The Skill fetches the latest Web Interface Guidelines and reports violations in a precise file:line format.

What is the best way to review a new UI module for design consistency?▼

The best way to review a new UI module for design consistency is to run a targeted audit against the Web Interface Guidelines, which identifies visual inconsistencies and usability issues early before release.

How do I get UI code compliance issues reported by file and line number?▼

To get UI code compliance issues reported by file and line number, this Skill inspects your codebase against fetched web guidelines and outputs all findings in the exact file:line format for direct remediation.

Can I use this to review site-wide web interface redesigns for usability?▼

Yes, you can use this to review site-wide web interface redesigns for usability. It inspects code across components and pages to identify accessibility gaps and usability issues during the redesign process.

Do I need to manually provide web design guidelines for the code audit?▼

No, you do not need to manually provide web design guidelines. The Skill automatically fetches the latest Web Interface Guidelines from the provided URL to ensure reviews reflect current standards.