skills.rest
gileck
gileckCOMMUNITY
Explore all skills by this author →
GitHub

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

Related Skills

Explore More Design & Creative Skills→
claude4062024-afkclaude4062024-afk

web-design-guidelines

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

Community
Intermediate
hopeoverturehopeoverture
6

ui-library-usage-auditor

Audit shadcn/ui component usage for accessibility and design-system conformance.

Community
Advanced
vuminhieuvuminhieu

ui-styling

Build accessible React interfaces with shadcn/ui, Tailwind CSS, and canvas visuals.

Community
Intermediate
giosuetedeschi-specgiosuetedeschi-spec

web-design-guidelines

Evaluate web interface code for compliance with design and accessibility standards.

Community
Intermediate