skills.rest
marvisrego
marvisregoCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/marvisrego/HACKATHON_LLM_dev --skill web-design-guidelines-marvisrego
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
dongitrandongitran
3

web-design-guidelines

Audit UI code against Web Interface Guidelines and output file:line findings.

Community
Basic
kimmyxpowkimmyxpow

web-design-guidelines

Audit UI code against Web Interface Guidelines and report violations in file:line format.

Community
Intermediate
TeiNamTeiNam
12

laravel-verification

Automate Laravel project verification for CI/CD pipelines.

Community
Advanced
tom-xstom-xs

accessibility-selenium-testing

Automate WCAG 2.1/2.2 accessibility audits with Selenium WebDriver and axe-core.

Community
Advanced