skills.rest
ruchernchong
ruchernchongCOMMUNITY
Explore all skills by this author →
Website𝕏@ruchernchongGitHub

web-design-guidelines

Analyze UI code against Web Interface Guidelines for accessibility and usability issues.

1|Updated Jan 8, 2026
Search Tags:#accessibility#UX#design audit#UI review#web guidelines
One-click install
npx skills add https://github.com/ruchernchong/claude-kit --skill web-design-guidelines-ruchernchong
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/ruchernchong/claude-kit/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/ruchernchong/claude-kit --skill web-design-guidelines-ruchernchong

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps ensure UI code adheres to established Web Interface Guidelines, highlighting accessibility, usability, and consistency gaps to improve the user experience.

Core Features & Use Cases

  • Guideline Compliance: Compare UI code against current Web Interface Guidelines to surface accessibility and UX issues.
  • Design Audit: Run quick audits during code reviews or pre-release checks to ensure components meet brand and usability standards.
  • Use Case: Before launching a new product page, run the skill to detect contrast problems, missing aria attributes, and inconsistent visual patterns across pages.

Quick Start

Provide the UI code or repository path to review. The skill will fetch the latest guidelines from the source URL and evaluate the provided files, returning a structured 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 issues before release?▼

To check UI code for accessibility issues, provide the repository path or code snippets to the skill. It fetches current Web Interface Guidelines and evaluates files to detect contrast problems, missing aria attributes, and usability gaps.

What is a web design audit and when do I need one?▼

A web design audit compares UI code against established Web Interface Guidelines to find consistency and usability gaps. You need one during code reviews or pre-release checks to ensure components meet brand and usability standards.

Can I run a UX review on existing modern web stacks?▼

Yes, you can run a UX review on existing modern web stacks. The skill applies rules to target files across modern web stacks and outputs findings in a concise, standardized format to highlight usability issues.

How do I detect missing aria attributes and contrast problems in my UI?▼

To detect missing aria attributes and contrast problems, run the skill against your UI code. It applies rules to target files and returns a structured report highlighting accessibility and visual pattern inconsistencies.

Does this web guidelines review require any specific dependencies?▼

No specific dependencies are required to run this web guidelines review. The skill fetches the latest guidelines from a source URL and evaluates the provided files without needing external components or frameworks.

Related Skills

Explore More Design & Creative Skills→
beemanbeeman
12

web-design-guidelines

Evaluate web UI components against Web Interface Guidelines for compliance.

Community
Intermediate
Higashi-KotaHigashi-Kota

a11y

Audits UI components for WCAG 2.2 AA and ARIA compliance.

Community
Intermediate
GitnappGitnapp

web-design-guidelines

Reviews web interfaces for design guideline compliance and accessibility issues.

Community
Intermediate
dinoudondinoudon

accessibility-audit

Audit web applications for WCAG 2.2 compliance across seven accessibility categories.

Community
Advanced