skills.rest
YavlPro
YavlProCOMMUNITY
Explore all skills by this author →
Website𝕏@YavlcapitanGitHub

web-design-guidelines

Audit UI codebases against Web Interface Guidelines and report findings in file:line format.

1|Updated Sep 24, 2025
Search Tags:#design#ui#accessibility#audit#guidelines#web
One-click install
npx skills add https://github.com/YavlPro/YavlGold --skill web-design-guidelines-yavlpro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/YavlPro/YavlGold/tree/main/.kilocode/skills/web-design-guidelines
Command: npx skills add https://github.com/YavlPro/YavlGold --skill web-design-guidelines-yavlpro

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams ensure UI code aligns with the latest Web Interface Guidelines, reducing accessibility and consistency gaps across interfaces.

Core Features & Use Cases

  • Guideline-based review: scans UI code for alignment with fetched Web Interface Guidelines.
  • Automated checks: validates file patterns and design rules on demand.
  • Use Case: when asked to review a UI or audit a site for accessibility and UX consistency.

Quick Start

Execute a UI guideline audit on your project to fetch the latest rules and validate the target files.

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 codebase for accessibility and visual consistency?▼

You can audit UI code by scanning frontend project files against fetched Web Interface Guidelines, which validates design rules and reports accessibility and visual consistency findings in a terse file:line format.

Can I run web design guideline audits on a Vue or Svelte project?▼

Yes, web design guideline audits can be executed on Vue and Svelte projects, alongside React, Angular, and vanilla setups, to validate file patterns and design rules for usability and accessibility compliance.

What is a UI guideline compliance audit?▼

A UI guideline compliance audit is a validation process that fetches the latest Web Interface Guidelines to check frontend code, ensuring interfaces align with required accessibility, usability, and visual consistency standards.

Does this web design audit tool require external dependencies?▼

No, this web design audit tool operates without external dependencies, directly fetching guidelines from the source and reading specified frontend project files to validate against design rules and report findings.

How do I check my React frontend for web interface guideline compliance?▼

To check a React frontend for compliance, execute a UI guideline audit on the project, which fetches the latest rules, reads the specified React files, validates them against design rules, and reports any accessibility gaps.

How are accessibility and UX consistency findings reported after an audit?▼

Accessibility and UX consistency findings are reported in a terse file:line format, directly pointing to the exact locations in the UI codebase where fetched Web Interface Guidelines validation rules were not met.

Related Skills

Explore More Design & Creative Skills→
nakafaainakafaai
78

web-design-guidelines

Analyze UI files against Web Interface Guidelines and report issues in file:line format.

Official
Basic
hopeoverturehopeoverture
6

ui-library-usage-auditor

Audit shadcn/ui component usage for accessibility and design-system conformance.

Community
Advanced
vh2224vh2224
1

web-design-guidelines

Review UI code against web interface guidelines and report issues in file-line format.

Community
Basic
ClyptAIClyptAI

web-design-guidelines

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

Official
Intermediate