skills.rest
Taek-D
Taek-DCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Audit UI code against Web Interface Guidelines and output findings in file:line format.

Updated Apr 12, 2026
Search Tags:#ui#accessibility#audit#compliance#guidelines#web-design#design-review
One-click install
npx skills add https://github.com/Taek-D/kbo_appintoss --skill web-design-guidelines-taek-d
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Taek-D/kbo_appintoss/tree/main/miniapp/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/Taek-D/kbo_appintoss --skill web-design-guidelines-taek-d

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps teams ensure UI code adheres to Web Interface Guidelines, catching accessibility and design gaps before release.

Core Features & Use Cases

  • Fetch latest guidelines from the source URL and apply them to the target files.
  • Read the specified files or patterns and evaluate them against all rules.
  • Output findings in the terse file:line format to facilitate quick triage and remediation.
  • Use cases include accessibility audits, design consistency checks, and UX improvements across pages and components.

Quick Start

Provide the UI files or patterns to review and run the audit 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 UI code for accessibility and design gaps?▼

To audit UI code for accessibility and design gaps, provide your web project files or patterns for review. The audit checks against Web Interface Guidelines to detect issues like contrast, labeling, and semantics, outputting findings in a file:line format.

What does a web interface guidelines compliance check look for?▼

A web interface guidelines compliance check looks for accessibility and design issues in UI code, including poor contrast, missing labeling, incorrect semantics, and flawed interaction patterns across pages, components, and full apps.

Can I run an accessibility audit on individual components or do I need a full app?▼

You can run an accessibility audit on projects of any size. The review process applies to individual pages, specific UI components, and full web apps to identify design consistency and UX issues.

How are accessibility audit findings formatted for remediation?▼

Accessibility audit findings are outputted in a terse file:line format. This specific structure pinpoints exactly where design gaps occur in your UI code to facilitate quick triage and remediation.

Does the design review fetch the latest web accessibility guidelines automatically?▼

Yes, the design review fetches the latest guidelines directly from the source URL. It reads your specified UI files or patterns and evaluates them against all freshly retrieved rules.

Related Skills

Explore More Design & Creative Skills→
fellipeutakafellipeutaka
5

web-design-guidelines

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

Community
Intermediate
videojsvideojs
888

aria

Audit React UI components for ARIA accessibility and keyboard navigation.

Official
Basic
hopeoverturehopeoverture
6

ui-library-usage-auditor

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

Community
Advanced
ManagedKubeManagedKube

web-design-reviewer

Inspect website DOM structure and modify source code to fix design issues.

Official
Advanced