skills.rest
kimny1143
kimny1143COMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Analyze UI files against Web Interface Guidelines for accessibility and design issues.

Updated Aug 23, 2026
Search Tags:#accessibility#a11y#review#ui-design#ux#web-guidelines
One-click install
npx skills add https://github.com/kimny1143/claude-code-template --skill web-design-guidelines-kimny1143
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/kimny1143/claude-code-template/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/kimny1143/claude-code-template --skill web-design-guidelines-kimny1143

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for compliance with Web Interface Guidelines to catch accessibility, usability, and design inconsistencies early in development.

Core Features & Use Cases

  • Guideline Fetching: Retrieve the latest Web Interface Guidelines before review.
  • File Pattern Review: Check specified files or patterns for accessibility, responsive design, and semantic markup.
  • Report & Guidance: Output concise findings with actionable recommendations for fixes.
  • Use Case: A dev audits a new web app's UI for color contrast and keyboard navigation compliance.

Quick Start

Provide the target UI files or patterns and let the AI fetch the latest guidelines before producing a compliance report.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check my UI code for accessibility and web design compliance?▼

You can audit UI code for web design compliance by analyzing files against the latest Web Interface Guidelines to identify accessibility, responsive design, and semantic markup issues. This review targets individual files or entire projects to catch usability problems early.

What is the best way to automate a11y reviews for web apps?▼

The best way to automate a11y reviews is to fetch live web interface guidelines and apply them to your specified file patterns. This generates a concise, line-based report highlighting visual design inconsistencies and keyboard navigation issues for quick remediation.

Can I review an entire web project for color contrast and semantic markup?▼

Yes, you can review an entire web project for color contrast and semantic markup by providing file patterns for the audit. The system reads these patterns to evaluate accessibility and usability across the whole application efficiently.

Does the web design compliance check fetch live accessibility guidelines?▼

Yes, the web design compliance check fetches live accessibility rules directly from the Guidelines Source URL before reviewing your code. This ensures your UI design is always evaluated against the most current web interface standards.

What format does the UI code audit report use for design issues?▼

The UI code audit report outputs findings in a concise, line-based format. This structure provides actionable recommendations for fixing accessibility, usability, and visual design inconsistencies directly within your web app files.

Related Skills

Explore More Design & Creative Skills→
riethmayerriethmayer
2

web-design-guidelines

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

Community
Intermediate
peopleforresterpeopleforrester
3

accessibility-checker

Audit web content for WCAG 2.1 AA accessibility issues and output a prioritized remediation report.

Community
Basic
LincyawLincyaw
2

web-debug

Automate headless Chromium browser tests for web UI regressions.

Community
Intermediate
zinohomezinohome
1

accessibility-auditor

Audit web pages for WCAG 2.1 compliance and implement accessibility fixes.

Community
Advanced