web-design-guidelines

Name: web-design-guidelines
Availability: InStock
Author: pleaseai

Evaluate UI code against Web Interface Guidelines and report findings in file:line format.

12|2|Updated Oct 13, 2025

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

Ready to run

npx skills add https://github.com/pleaseai/claude-code-plugins --skill web-design-guidelines-pleaseai

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

Core Features & Use Cases

Fetch the latest guidelines from the source URL
Read the target UI files (or prompt user for files/pattern)
Apply all rules in the fetched guidelines and report findings in file:line format

Quick Start

Fetch guidelines, point to your UI files, and run the check to surface accessibility and design issues.

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

To audit UI code for web design and accessibility compliance, the Skill evaluates target UI files against fetched web interface guidelines, applying all design and accessibility rules to output findings in a file:line format.

Can I check a component library against web interface guidelines?▼

Yes, you can check a component library against web interface guidelines. The Skill evaluates single pages, component libraries, and full-site audits across web projects to identify accessibility and design gaps during design reviews.

What is the best way to review my frontend for accessibility gaps?▼

The best way to review frontend accessibility gaps is fetching the latest web interface guidelines, applying all rules to your target UI code, and surfacing accessibility issues in a precise file:line format for quick resolution.

Does the web design audit output specific file and line numbers for issues?▼

Yes, the web design audit outputs specific file and line numbers for issues. It applies all rules from the fetched guidelines and reports findings directly in a file:line format for precise identification and resolution.

When do I need to run an accessibility check on my web project?▼

You need to run an accessibility check on your web project during design reviews and accessibility checks. Use it when asked to review UI, audit design, or check your site against best practices to ensure compliance.

Why are accessibility and design gaps missed without a UI review?▼

Accessibility and design gaps are missed without a UI review because manual checks often overlook established web interface guidelines. Fetching and applying these rules ensures all code is systematically evaluated for compliance.