web-design-guidelines

Fetch Web Interface Guidelines and output UI compliance findings in file:line format.

1|1|Updated Apr 21, 2026

Search Tags:#accessibility #guidelines #quality-assurance #web-design #design-consistency #ui-review

Ready to run

npx skills add https://github.com/luizvergennes/template --skill web-design-guidelines-luizvergennes

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This capability helps teams ensure that UI code complies with Web Interface Guidelines by providing a repeatable, automated check that catches accessibility and design issues early.

Core Features & Use Cases

Fetches and applies the latest Web Interface Guidelines to UI assets and code.
Analyzes UI files for accessibility, visual consistency, and best-practice conformance.
Use Case: Before release, run a review on a landing page to verify accessibility and design alignment.

Quick Start

Review my UI files against the latest Web Interface Guidelines.

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

To audit UI code for accessibility and design consistency, fetch the latest Web Interface Guidelines and apply them to your codebase. The review reads target files, compares them against the guidelines, and outputs findings in a file:line format.

Can I run a UI review on a single landing page before release?▼

Yes, you can run a UI review on a single landing page before release. The process applies Web Interface Guidelines to individual pages to verify accessibility conformance and visual consistency, outputting specific findings for quick resolution.

How do I check my design system against web design guidelines?▼

To check your design system, apply Web Interface Guidelines directly to the UI assets and code. The review analyzes the codebase for accessibility and best-practice conformance, providing actionable findings in a file:line format.

What is the best way to automate accessibility checks for UI files?▼

The best way to automate accessibility checks is using a repeatable review process that fetches the latest Web Interface Guidelines and applies them to UI files. This catches accessibility and design issues early by outputting findings in a file:line format.

Does this UI review require any specific dependencies or components?▼

No specific dependencies or components are required to run this UI review. The process fetches the latest Web Interface Guidelines directly and applies them to your existing UI codebase, design system, or single pages without needing additional setup.

How are UI review findings reported for quality assurance?▼

UI review findings are reported in a file:line format for quality assurance. This output structure maps accessibility and visual consistency issues directly to the specific locations in your UI code, making it easy to identify and fix non-compliant sections.