skills.rest
t-i-0414
t-i-0414COMMUNITY
Explore all skills by this author →
Website𝕏@taku_fe_eGitHub

web-design-guidelines

Compare UI against Web Interface Guidelines to identify accessibility and UX compliance issues.

Updated Jun 9, 2025
Search Tags:#accessibility#ux#design-guidelines#ui-review#web-standards
One-click install
npx skills add https://github.com/t-i-0414/music-practice-tracker --skill web-design-guidelines-t-i-0414
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/t-i-0414/music-practice-tracker/tree/main/.rulesync/skills/web-design-guidelines
Command: npx skills add https://github.com/t-i-0414/music-practice-tracker --skill web-design-guidelines-t-i-0414

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many UI projects struggle with accessibility and UX gaps that reduce usability and inclusivity. This Skill helps reviewers systematically verify interfaces against established Web Interface Guidelines.

Core Features & Use Cases

  • Automated guideline alignment: compares UI against up-to-date web interface rules to surface violations.
  • Accessibility checks: evaluates color contrast, keyboard navigation, semantic markup, and ARIA usage.
  • Use Case: Designer or QA analyst runs the review on a live site or component library to identify and prioritize fixes.

Quick Start

Provide the UI files or site URL to review and run the guideline checker to identify accessibility and UX gaps.

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 website for accessibility and UX compliance issues?▼

You can audit UI design by providing UI files or a site URL for automated guideline alignment. The review evaluates color contrast, keyboard navigation, semantic markup, and ARIA usage against established Web Interface Guidelines to identify violations.

What is included in a UI accessibility and UX review?▼

A UI accessibility and UX review includes checks for color contrast, keyboard navigation, semantic markup, ARIA usage, responsive layouts, and navigation consistency across pages. It surfaces violations by comparing the interface against up-to-date web standards.

Can I audit a component library for web standards and UX gaps?▼

Yes, you can audit a component library by providing the relevant UI files for review. The checker systematically verifies components against Web Interface Guidelines to identify and prioritize accessibility and UX fixes.

What's the best way to verify responsive layouts for accessibility issues?▼

The best way to verify responsive layouts is running a guideline checker that applies web standards to your UI files. It evaluates responsive design alongside color contrast and semantic HTML to report compliance issues in a concise, structured format.

Do I need any dependencies to run a UI design audit?▼

No dependencies are required to run a UI design audit. You simply provide the UI files or site URL to review, and the checker loads the latest rules from the guidelines source to evaluate accessibility and UX compliance.

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
cc01cccc01cc
4

multi-package-coverage-audit

Consolidate test coverage gaps across multi-package monorepos into prioritized test plans.

Community
Intermediate
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-forced-colors

Detect forced-colors accessibility failures in rendered web pages.

Community
Intermediate