skills.rest
kadenn
kadennCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Validate UI code against Web Interface Guidelines and report accessibility issues.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamline UI reviews by identifying accessibility gaps, visual inconsistencies, and usability issues in UI code, ensuring alignment with Web Interface Guidelines.

Core Features & Use Cases

  • Automated checks against the latest Web Interface Guidelines to surface actionable issues.
  • Accessibility conformance checks covering color contrast, semantic HTML, focus management, and keyboard navigation.
  • Use Case: audit a landing page or component library during design reviews to tighten UX and accessibility.

Quick Start

Use a UI file or URL to initiate an on-demand guideline check and receive a findings 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 audit UI code for accessibility and UX best practices?▼

Audit UI code for accessibility by validating files against Web Interface Guidelines to identify visual inconsistencies, semantic HTML issues, and usability gaps, outputting a concise findings report.

What is the best way to check color contrast and keyboard navigation in a web component?▼

Check color contrast and keyboard navigation by running an automated guideline audit on the web component, which surfaces conformance issues and actionable recommendations in a review report.

Can I use a URL to initiate an on-demand accessibility check for a landing page?▼

Yes, you can use a URL to initiate an on-demand accessibility check, fetching fresh rules from the guidelines source to evaluate the landing page and receive an actionable findings report.

Does this accessibility audit work with existing design systems across multiple projects?▼

Yes, the accessibility audit applies to design systems and components across multiple projects, enabling on-demand validation checks during design reviews or before releases.

How do I identify visual inconsistencies in a component library before release?▼

Identify visual inconsistencies in a component library by validating the code against Web Interface Guidelines, which surfaces actionable issues and tightens UX before a release.

What accessibility issues are detected during a web page guideline audit?▼

A web page guideline audit detects accessibility issues including color contrast gaps, semantic HTML errors, focus management problems, and keyboard navigation defects.

Related Skills

Explore More Design & Creative Skills→
ClyptAIClyptAI

web-design-guidelines

Audit frontend UI code against Web Interface Guidelines for accessibility and consistency.

Official
Intermediate
PaldomPaldom
11

web-design-guidelines

Audit UI code for Web Interface Guidelines compliance and report findings.

Community
Intermediate
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
ouakarouakar

accessibility-engineer

Audit web and mobile interfaces for WCAG 2.2 AA/AAA conformance.

Community
Advanced