skills.rest
yutanpo1227
yutanpo1227COMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

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

Updated Jan 22, 2026
Search Tags:#design#ui#accessibility#frontend#guidelines#code-review
One-click install
npx skills add https://github.com/yutanpo1227/dotfiles --skill web-design-guidelines-yutanpo1227
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/yutanpo1227/dotfiles/tree/main/dot_codex/skills/web-design-guidelines
Command: npx skills add https://github.com/yutanpo1227/dotfiles --skill web-design-guidelines-yutanpo1227

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps ensure Web Interface Guidelines compliance by scanning UI code, identifying accessibility gaps, and flagging design inconsistencies across components.

Core Features & Use Cases

  • Fetches the latest Web Interface Guidelines for reference.
  • Scans provided frontend files or patterns to check accessibility, color contrast, semantics, and responsive behavior.
  • Use Case: When reviewing a UI, run this to validate accessibility and design conformance across pages or components.

Quick Start

Review the attached UI files against the latest Web Interface Guidelines.

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 codebase for Web Interface Guidelines compliance?▼

To audit a frontend codebase for Web Interface Guidelines compliance, provide your UI files to the Skill, which fetches the latest guidelines via WebFetch and reports accessibility, contrast, and semantics violations in a file:line format.

What is UI accessibility auditing and how does it detect design inconsistencies?▼

UI accessibility auditing detects design inconsistencies by scanning frontend code patterns against established Web Interface Guidelines, identifying gaps in accessibility, color contrast, semantic HTML, and responsive behavior across components.

Can I check color contrast and responsive behavior in a component library?▼

Yes, you can check color contrast and responsive behavior in a component library by applying this Skill to evaluate provided frontend files against fetched Web Interface Guidelines, flagging any deviations.

Does accessibility auditing work without installing external dependencies?▼

Yes, accessibility auditing works without installing external dependencies because the Skill operates by fetching guidelines directly from a remote source URL using WebFetch to evaluate your provided frontend code.

How are accessibility violations reported when reviewing UI code?▼

Accessibility violations are reported in a precise file:line format, detailing exactly where the provided UI code deviates from the fetched Web Interface Guidelines regarding semantics, contrast, and responsiveness.

Related Skills

Explore More Design & Creative Skills→
victor-telesvictor-teles
1

web-design-guidelines

Fetch web interface guidelines and report UI compliance issues in file:line format.

Community
Intermediate
hopeoverturehopeoverture
6

ui-library-usage-auditor

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

Community
Advanced
saschadudkin-sketchsaschadudkin-sketch

storybook-design-system

Automate creation and validation of Storybook stories and design-system components.

Community
Intermediate
JLSedJLSed

web-design-reviewer

Inspect website design quality and fix layout, responsiveness, and accessibility issues in source code.

Community
Advanced