skills.rest
suhwan
suhwanCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Analyze UI source code for accessibility, semantic HTML, and keyboard navigation issues.

Updated Feb 1, 2026
Search Tags:#design#ui#accessibility#code-review#semantic-html#keyboard-navigation
One-click install
npx skills add https://github.com/suhwan/claude-registry --skill web-design-guidelines-suhwan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/suhwan/claude-registry/tree/main/skills/design-ui/web-design-guidelines
Command: npx skills add https://github.com/suhwan/claude-registry --skill web-design-guidelines-suhwan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Code-level UI compliance checking for accessibility, semantic HTML, and keyboard navigation using a curated rule set (Vercel's 100+ rules).

Core Features & Use Cases

  • Fetch latest guidelines from the official source.
  • Analyze target UI files to identify accessibility, semantic HTML, and keyboard navigation issues.
  • Output findings in a concise, file:line-oriented format suitable for code reviews and audits.

Quick Start

Provide the files you want reviewed and run the web-design-guidelines skill to generate a concise guideline 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 source code for accessibility and semantic HTML issues?▼

To enforce accessibility and semantic HTML compliance, run an automated analyzer that fetches current guidelines and scans your specified web interface files. It produces a concise, file:line-oriented report highlighting markup and interactive element issues with severity indicators for code reviews.

What is semantic HTML and why does it matter for keyboard navigation?▼

Semantic HTML uses appropriate markup tags to convey content meaning and structure, which is essential for enabling proper keyboard navigation across web interfaces. Auditing your code ensures interactive elements are accessible via keyboard and screen readers.

Can I use automated code review to audit page-level accessibility guidelines?▼

Yes, automated code review supports page-level accessibility audits by scanning specified UI files against a fixed rule set. The analysis covers semantic HTML, keyboard navigation, and markup issues across full web interfaces and components.

How do I generate an accessibility compliance report for my web components?▼

Generate an accessibility compliance report by running an analysis on your target UI files. The tool fetches latest rules, scans components for semantic HTML and keyboard navigation violations, and outputs structured findings with file:line style and severity indicators.

What are the limitations of automated semantic HTML and accessibility checking?▼

Automated accessibility checking is limited to static code analysis of markup and interactive elements, focusing on semantic HTML and keyboard navigation rules. It may not detect dynamic runtime issues or visual design flaws requiring manual testing.

Related Skills

Explore More Design & Creative Skills→
videojsvideojs
888

aria

Audit React UI components for ARIA accessibility and keyboard navigation.

Official
Basic
PP-NamiasPP-Namias
2

accessibility-audit

Validate web accessibility compliance with WCAG 2.1 AA standards.

Community
Intermediate
Jackliu-miaoziJackliu-miaozi

web-design-guidelines

Enforce Vercel web UI guideline compliance across HTML/CSS/JS codebases.

Community
Basic
logo-solutionslogo-solutions

browser-testing-with-devtools

Inspect live DOM, console, network, and performance state in Chromium-based browsers.

Official
Advanced