web-design-guidelines

Compare UI files against Web Interface Guidelines and report violations.

1|Updated Apr 4, 2026
One-click install
npx skills add https://github.com/shiro123444/FAST-P2P --skill web-design-guidelines-shiro123444
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/shiro123444/FAST-P2P/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/shiro123444/FAST-P2P --skill web-design-guidelines-shiro123444

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Quickly identifies UI design and accessibility gaps by comparing your files against the latest Web Interface Guidelines, helping teams ship compliant interfaces faster.

Core Features & Use Cases

  • Fetches the latest Web Interface Guidelines source and applies rules to your UI files.
  • Checks for accessibility, layout, color contrast, and interaction guidelines across codebases.
  • Use Case: You want to verify a new web page component against accessibility and usability best practices before review.

Quick Start

Provide the files or patterns you want to review to the assistant and it will fetch guidelines, compare against rules, and return violations in a concise 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 audit UI files for accessibility and design compliance?

To audit UI files for accessibility and design compliance, provide your web page components or design system files to the assistant. It fetches the latest Web Interface Guidelines, compares your UI against the rules, and returns a concise report of violations.

What is the best way to check web page components for accessibility gaps before a review?

Checking web page components for accessibility gaps involves applying the latest Web Interface Guidelines to your codebase. This process identifies layout, color contrast, and interaction issues, returning a concise report of compliance violations to fix before review.

Can I review an entire design system for usability and compliance rules?

Yes, you can review an entire design system for usability and compliance rules. The tool applies fetched Web Interface Guidelines across your provided files to detect accessibility and interaction gaps, ensuring your design system meets required standards.

Does the UI accessibility review work with any web codebase?

The UI accessibility review works with any web codebase or design files you provide. It evaluates the supplied UI patterns against standard Web Interface Guidelines to check for color contrast, layout, and interaction compliance, regardless of the specific framework.

What specific design and accessibility violations does the UI review report return?

The UI review report returns concise violations related to accessibility, layout, color contrast, and interaction guidelines. It compares your provided UI files against all fetched Web Interface Guidelines rules to highlight exact gaps needing correction.

When do I need to run a web interface compliance check on my UI files?

You need to run a web interface compliance check on your UI files when you want to verify new web page components against accessibility and usability best practices. This ensures your interfaces meet standards before a formal review or deployment.