skills.rest
raccioly
racciolyCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Audit UI code against Web Interface Guidelines for accessibility and design consistency.

Updated Mar 18, 2026
Search Tags:#ui#accessibility#frontend#audit#guidelines#web-design
One-click install
npx skills add https://github.com/raccioly/coach-gravity --skill web-design-guidelines-raccioly
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/raccioly/coach-gravity/tree/main/content/starter-kit/skills/web-design-guidelines
Command: npx skills add https://github.com/raccioly/coach-gravity --skill web-design-guidelines-raccioly

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps ensure UI code adheres to Web Interface Guidelines, catching common accessibility gaps, color contrast issues, and usability flaws early in the development process for faster, safer releases.

Core Features & Use Cases

  • Fetch the latest guidelines from a remote source before auditing any files
  • Read one or more UI-related files or patterns and evaluate them against all guidelines
  • Output findings in a concise, structured format suitable for remediation and design review

Quick Start

Provide one or more UI files or patterns; the skill will fetch the latest guidelines and audit them for accessibility and best practices.

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 frontend code for accessibility and UI best practices?▼

To audit UI code, provide your frontend files or patterns for evaluation against fetched web interface guidelines. The skill checks for accessibility gaps, color contrast issues, and usability flaws, reporting findings in a structured format for remediation.

Can I check my static UI assets for color contrast issues and usability flaws?▼

Yes, you can check static UI assets by applying this skill to your codebase. It evaluates static UI patterns against web interface guidelines to catch color contrast issues and usability flaws early in the development process.

Does this accessibility audit tool work with existing design systems?▼

Yes, this accessibility audit tool works with existing design systems. You can apply it across projects to evaluate your design system components against fetched guidelines for performance, accessibility, and design consistency.

What is the best way to review my UI for web design consistency?▼

The best way to review UI for web design consistency is to prompt the skill with a request like "review my UI". It fetches the latest guidelines, reads your targeted files, applies all rules, and reports concise findings suitable for design review.

Do I need to manually update the guidelines database to check accessibility?▼

No, you do not need to manually update guidelines to check accessibility. The skill automatically fetches the latest web interface guidelines from a remote source before auditing your targeted frontend files or patterns.

Related Skills

Explore More Design & Creative Skills→
haomingzhaomingz
12

ui-blueprint

Extract color, typography, components, and spacing from UI screenshots into design documents.

Community
Advanced
roderikroderik
2

rams

Analyze UI components for WCAG accessibility and visual design issues.

Community
Basic
dappvibedappvibe
1

web-design-guidelines

Analyze UI code for compliance with Web Interface Guidelines.

Community
Intermediate
oren-arguoren-argu

web-design-guidelines

Compare UI code against Web Interface Guidelines and report violations.

Community
Intermediate