web-design-guidelines

Automate UI guideline conformance checks and report findings in file:line format.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/samixisme/client-dashboard --skill web-design-guidelines-samixisme
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/samixisme/client-dashboard/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/samixisme/client-dashboard --skill web-design-guidelines-samixisme

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for compliance with Web Interface Guidelines and help teams catch accessibility and usability issues early in development.

Core Features & Use Cases

  • Guideline conformance checks: validates UI files against the latest web interface guidelines.
  • Accessibility audits: flags contrast, semantic HTML, ARIA labeling, keyboard navigation, and focus management concerns.
  • Design QA reporting: generates actionable fixes and concise findings reports for designers and developers.

Quick Start

Point this skill at your UI files or patterns to begin an automated guideline review.

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 UI code for web accessibility and design guideline compliance?

To audit UI code for web accessibility and design guideline compliance, point the skill at your target files or patterns. It fetches guidelines, applies all rules to your codebase, and reports findings in a file:line format.

What is a UI guideline conformance check and how does it work?

A UI guideline conformance check validates web interface files against established rules. The skill reads your target files, fetches the specified design guidelines, applies all rules automatically, and generates concise findings reports for designers and developers.

Can I review design system components for ARIA labeling and keyboard navigation issues?

Yes, you can review design system components for ARIA labeling and keyboard navigation issues. The skill flags semantic HTML, contrast, and focus management concerns across your codebase, generating actionable fixes for your UI files.

Does the accessibility audit require any specific dependencies or component libraries?

No dependencies or component libraries are required to run the accessibility audit. The skill operates independently to fetch web interface guidelines, read your target file patterns, and report design QA findings without external packages.

What's the best way to automate design QA reporting for web interfaces?

The best way to automate design QA reporting for web interfaces is applying rule-based conformance checks to your codebase. The skill reads target files, validates them against web interface guidelines, and outputs actionable fixes in file:line format.