skills.rest
chuan-khuna
chuan-khunaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Compare UI code against Web Interface Guidelines and report accessibility issues in file:line format.

3|1|Updated Mar 5, 2024
Search Tags:#design#accessibility#a11y#audit#compliance#web-design#ui-guidelines
One-click install
npx skills add https://github.com/chuan-khuna/digital-garden-2024 --skill web-design-guidelines-chuan-khuna
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/chuan-khuna/digital-garden-2024/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/chuan-khuna/digital-garden-2024 --skill web-design-guidelines-chuan-khuna

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI code often diverges from established Web Interface Guidelines, causing inconsistent accessibility, usability gaps, and design debt across projects.

Core Features & Use Cases

  • Guideline compliance checks: automatically validate UI files against the latest interface guidelines.
  • Accessibility auditing: identify color contrast, aria-labels, and keyboard navigation issues.
  • Usage scenarios: check a project for site-wide consistency before launch.

Quick Start

Provide a file path or pattern to review, and I will fetch the latest guidelines and return compliance findings.

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

To audit UI code for compliance, provide a file path or pattern to review. The tool fetches the latest Web Interface Guidelines, reads the target frontend files, and outputs accessibility and usability findings in a file:line format.

What is the best way to check a project for site-wide design consistency before launch?▼

Checking a project for site-wide design consistency before launch involves validating UI files against the latest interface guidelines. This process surfaces accessibility issues, usability gaps, and design debt across frontend components and pages.

Can I use this to identify color contrast and keyboard navigation issues in my components?▼

Yes, you can identify color contrast, aria-labels, and keyboard navigation issues. The accessibility auditing feature compares your frontend components and design tokens against authoritative rules to surface these specific usability problems.

Does this accessibility audit require any specific dependencies or components to run?▼

No specific dependencies or components are required to run the accessibility audit. You simply need to provide the target file path or pattern for review, and the tool will fetch the necessary rules and output the compliance findings.

Why does my UI code diverge from established Web Interface Guidelines and how is it detected?▼

UI code diverges from established Web Interface Guidelines due to inconsistent accessibility practices and design debt. This is detected by reading target files, applying the latest guidelines to design tokens and components, and outputting findings in a file:line format.

Related Skills

Explore More Design & Creative Skills→
tulioftuliof

web-design-guidelines

Audit web interface code against standardized design and accessibility guidelines.

Community
Intermediate
rafazafarrafazafar

web-design-guidelines

Review UI code against Web Interface Guidelines for accessibility and usability gaps.

Community
Intermediate
murphytruemanmurphytrueman
155

cicd-integration

Generate CI/CD pipeline configurations for design system quality checks.

Community
Advanced
ksciuskscius
2

accessibility-auditing

Audit web page accessibility by analyzing Cursor's ARIA tree snapshots.

Community
Advanced