web-design-guidelines

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

Updated Mar 29, 2026

Search Tags:#accessibility #frontend #ui review #vercel #design review #ux audit #web guidelines

Ready to run

npx skills add https://github.com/zizhenchen47-oss/claude-skills --skill web-design-guidelines-zizhenchen47-oss

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you review user interfaces for Web Interface Guidelines compliance so you can catch accessibility, interaction, and visual design issues before they reach production.

Core Features & Use Cases

Guideline-Based UI Review: Checks your files against the latest published web interface rules rather than a stale local copy.
Actionable Findings: Returns concise file:line feedback so developers can fix issues quickly.
Typical Uses: Review a page, component, or app shell when you want a UX audit, accessibility pass, or frontend best-practices check.

Quick Start

Ask the skill to review the specified UI files or pattern against the latest web interface guidelines and return any issues in terse file and line format.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I run a UX audit on frontend components for web interface guidelines?▼

Perform an accessibility check by having the skill inspect your frontend components against the latest fetched web interface rules. It identifies violations and outputs specific file:line references to address accessibility issues.

Does this UI review tool use a static local ruleset or fetch external updates?▼

This UI review fetches the latest published external web interface rules rather than relying on a stale local copy. This ensures your design review checks against current accessibility and interaction standards.

What format do accessibility check findings return when reviewing web pages?▼

Accessibility check findings return in a concise file:line format. This allows developers to quickly locate and resolve interaction or visual design issues found during the frontend best-practice review.

Can I use this for a Vercel app shell best-practice design review?▼

Yes, you can review a Vercel app shell, page, or component for best-practice design compliance. The skill evaluates the product interface against web guidelines and reports actionable UX audit issues.

What's the best way to catch visual design issues before they reach production?▼

The best way to catch visual design issues is to request a frontend design review before shipping. The skill inspects your code against web guidelines and reports concise file:line violations to fix before production.