skills.rest
pleaseai
pleaseaiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

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

Related Skills

Explore More Design & Creative Skills→
p-potvinp-potvin
1

web-design-guidelines

Assess frontend HTML, CSS, and JavaScript against Web Interface Guidelines and accessibility rules.

Community
Intermediate
JaimeJunrJaimeJunr
2

web-design-guidelines

Audit UI code against official Web Interface Guidelines and report violations in file:line format.

Community
Intermediate
alissonmds00alissonmds00

web-design-guidelines

Audit web interface code for design and accessibility guideline compliance.

Community
Basic
dappvibedappvibe
1

web-design-guidelines

Analyze UI code for compliance with Web Interface Guidelines.

Community
Intermediate