skills.rest
AlexDevFlow
AlexDevFlowCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Compare UI code against the latest Web Interface Guidelines and report line-referenced findings.

Updated Aug 27, 2026
Search Tags:#accessibility#audit#guidelines#design-review#web-ui#ui-consistency
One-click install
npx skills add https://github.com/AlexDevFlow/Claude10XD --skill web-design-guidelines-alexdevflow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/AlexDevFlow/Claude10XD/tree/main/skills/ui/web-design-guidelines
Command: npx skills add https://github.com/AlexDevFlow/Claude10XD --skill web-design-guidelines-alexdevflow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps ensure UI code aligns with the latest Web Interface Guidelines, surfacing accessibility gaps and design drift to save time and improve quality.

Core Features & Use Cases

  • Fetch the latest web interface guidelines and compare them against provided UI files or patterns.
  • Analyze accessibility, consistency, and visual design compliance across components and pages.
  • Use Case: Run a review on a React component library to verify accessibility and design alignment before release.

Quick Start

Provide the files or patterns you want reviewed; Claude will fetch the guidelines and evaluate them against your inputs.

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 React components for accessibility and UI consistency issues?▼

To audit React components for accessibility, provide the target files for review. The skill fetches the latest Web Interface Guidelines, reads the files, applies all rules, and returns line-referenced findings.

What is a web interface design review and how does it find UI code anomalies?▼

A web interface design review identifies UI code anomalies by fetching the latest Web Interface Guidelines and comparing them against provided files. It surfaces accessibility gaps and design drift to improve quality.

Can I use this to validate UI conformity on a Next.js static site?▼

Yes, you can validate UI conformity on a Next.js static site. The skill applies design reviews across single pages, components, and full static applications to check accessibility and visual compliance.

How do I check my component library against web design guidelines before release?▼

To check a component library before release, provide the UI files or patterns you want reviewed. The analysis fetches current guidelines and evaluates accessibility, consistency, and visual design compliance.

What's the best way to get line-referenced findings for accessibility gaps in my UI code?▼

To get line-referenced findings for accessibility gaps, provide your UI files for a design review. The skill applies all Web Interface Guidelines rules to the target files and returns line-referenced findings.

Related Skills

Explore More Design & Creative Skills→
raphaelmansraphaelmans

web-design-guidelines

Audit web UI files against official Web Interface Guidelines and report findings in file:line format.

Community
Intermediate
devsepninedevsepnine
1

web-design-guidelines

Review UI code for Web Interface Guidelines compliance and report violations by line.

Community
Intermediate
roderikroderik
2

rams

Analyze UI components for WCAG accessibility and visual design issues.

Community
Basic
NammDevNammDev
2

web-design-guidelines

Audit frontend HTML/CSS/JS code for Web Interface Guidelines compliance and accessibility issues.

Community
Intermediate