web-design-guidelines

Compare UI source files against the latest Web Interface Guidelines.

1|Updated Nov 27, 2022

Search Tags:#ui #accessibility #a11y #compliance #web-guidelines #design-audit

Ready to run

npx skills add https://github.com/gonzalopozo/gonzalopozo.github.io --skill web-design-guidelines-gonzalopozo

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps identify UI conformance gaps by comparing UI code against the latest Web Interface Guidelines, helping teams improve accessibility and visual consistency across platforms.

Core Features & Use Cases

Guidelines synchronization: Fetches the latest guidelines from the official source and uses them to validate UI files.
Targeted file reviews: Reads the specified files or patterns (e.g., components, pages) to audit only relevant code.
Actionable reporting: Outputs findings in the file:line format for fast remediation, e.g., Header.jsx:14 reveals insufficient color contrast.

Quick Start

Provide the UI files or a pattern to review, and the skill will fetch the latest guidelines and check for compliance.

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

To audit UI code for web accessibility and design compliance, provide your UI files or patterns. The skill fetches the latest Web Interface Guidelines, parses the specified files, and outputs standardized conformance findings in a file:line format for fast remediation.

What is a UI conformance gap analysis and how does it work?▼

A UI conformance gap analysis identifies discrepancies between your source files and the latest Web Interface Guidelines. It works by fetching current guidelines, parsing targeted UI components or pages, and producing deterministic, standardized findings to improve accessibility and visual consistency.

Can I check specific UI components and pages against web guidelines?▼

Yes, you can check specific UI components and pages. The skill performs targeted file reviews by reading the specified files or patterns you provide, ensuring it audits only the relevant code for accessibility and design rule checks.

How do I report web accessibility issues found in my source files?▼

To report web accessibility issues, the skill generates actionable findings using a file:line format, such as Header.jsx:14 for insufficient color contrast. This standardized output directly maps conformance gaps to your source files for fast remediation.

What is the best way to ensure visual consistency across web platforms?▼

The best way to ensure visual consistency across web platforms is to compare your UI code against the latest official Web Interface Guidelines. Fetching current standards and running targeted file reviews identifies conformance gaps for remediation.

Do I need to manually provide web interface guidelines to check my UI?▼

No, you do not need to manually provide web interface guidelines. The skill features guidelines synchronization, automatically fetching the latest official standards to validate your UI files and check for accessibility compliance.