web-design-guidelines

Audit UI code against the latest Web Interface Guidelines.

Updated Mar 28, 2025

Search Tags:#accessibility #UI #audit #guidelines #web #design-review

Ready to run

npx skills add https://github.com/gileck/app-template-ai --skill web-design-guidelines-gileck

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill makes it easy to verify that UI code conforms to Web Interface Guidelines by comparing implementations against the latest published practices. It helps identify accessibility gaps, visual inconsistencies, and usability issues early in the review process.

Core Features & Use Cases

On-demand audit: fetches the latest Web Interface Guidelines from Vercel's repository and scans the provided files.
Comprehensive checks: evaluates accessibility, design consistency, and alignment with industry best practices.
Use Case: Imagine you have a UI component library; run this skill to identify accessibility contrast issues and layout deviations before release.

Quick Start

Provide the files or pattern you want reviewed, e.g., src/components/**/*.tsx. The tool fetches fresh guidelines and reports any non-compliant items with file:line style.

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 accessibility and web design compliance?▼

To audit UI code for web design compliance, provide your file paths or glob patterns. The skill fetches the latest Web Interface Guidelines and reports non-compliant items with specific file and line references.

What web interface guidelines are used for the UI design review?▼

The UI design review uses the Web Interface Guidelines fetched from the Vercel Labs repository. It evaluates accessibility, visual consistency, and adherence to industry best practices.

How do I check my React components for accessibility contrast issues?▼

You can check React components for accessibility contrast issues by providing a path like src/components/**/*.tsx. The tool scans these files against fresh guidelines to identify layout deviations and gaps.

Can I use this design audit tool with any file pattern?▼

Yes, you can use this design audit tool with any file pattern. Simply provide the target files or glob patterns you want reviewed, and it will apply the fetched guidelines to assess them.

Does the web interface audit require any dependencies or setup?▼

No, the web interface audit requires no dependencies or setup. It operates directly on the provided files and retrieves the latest guidelines from a remote source automatically.