skills.rest
heyAyushh
heyAyushhCOMMUNITY
Explore all skills by this author →
Website𝕏@yoayushGitHub

web-design-guidelines

Identify UI accessibility, performance, and usability gaps using Web Interface Guidelines.

3|1|Updated Jan 14, 2026
Search Tags:#accessibility#a11y#frontend#keyboard-navigation#ui-review#web-design-guidelines
One-click install
npx skills add https://github.com/heyAyushh/stacc --skill web-design-guidelines-heyayushh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/heyAyushh/stacc/tree/main/configs/stacks/nextjs/web-interface-guidelines
Command: npx skills add https://github.com/heyAyushh/stacc --skill web-design-guidelines-heyayushh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams verify that UI code complies with Web Interface Guidelines, catching accessibility, interaction, and design-consistency gaps early in the development cycle.

Core Features & Use Cases

  • Accessibility checks: keyboard navigation, ARIA usage, visible focus, and semantic HTML.
  • Design consistency: typography, contrast, and responsive behavior checks across components.
  • Use Case: Run this on a frontend project to audit a dashboard or form UI before release to ensure compliance with best practices.

Quick Start

Provide the path or pattern to review, for example: audit-ui/ or src/

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 frontend components for accessibility and usability gaps?▼

UI accessibility audits check keyboard navigation, ARIA usage, visible focus, and semantic HTML. They catch interaction, typography, and performance issues early in development by applying Web Interface Guidelines to frontend components and pages.

What is the best way to check web design consistency and ARIA usage before release?▼

Auditing UI code for accessibility requires fetching the latest Web Interface Guidelines rules and reading target frontend files. It applies these rules to catch interaction, typography, and performance issues, outputting results in a terse file:line format.

Can I use this UI review tool to check keyboard navigation and semantic HTML in my project?▼

Running an accessibility audit on a dashboard or form UI before release catches keyboard navigation, ARIA, and contrast gaps. Provide a path like audit-ui/ or src/ to verify UI code complies with Web Interface Guidelines and design-consistency standards.

Does this web interface guidelines audit tool require any special dependencies?▼

UI accessibility audits should not be used as the sole testing method for complex interaction patterns. They report findings in a terse file:line format but may not capture dynamic state changes or advanced keyboard navigation logic fully.

Related Skills

Explore More Design & Creative Skills→
FlukeSupakornFlukeSupakorn
1

web-design-guidelines

Apply Web Interface Guidelines to UI code and report accessibility gaps in file:line format.

Community
Intermediate
chipermanchiperman

fixing-accessibility

Fix accessibility issues in web UI components with ARIA and keyboard navigation.

Community
Basic
tan-yong-shengtan-yong-sheng
1

web-design-guidelines

Identify UI accessibility and design guideline violations in web projects.

Community
Intermediate
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-forced-colors

Detect forced-colors accessibility failures in rendered web pages.

Community
Intermediate