skills.rest
hiddink-ai
hiddink-aiOFFICIAL
Explore all skills by this author →
GitHub

web-design-guidelines

Evaluate web interfaces against accessibility, performance, and UX design standards.

1|Updated May 21, 2026
Search Tags:#ui#accessibility#frontend#audit#ux#web-design
One-click install
npx skills add https://github.com/hiddink-ai/hiddink-harness --skill web-design-guidelines-hiddink-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/hiddink-ai/hiddink-harness/tree/main/templates/skills/web-design-guidelines
Command: npx skills add https://github.com/hiddink-ai/hiddink-harness --skill web-design-guidelines-hiddink-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the inconsistency and accessibility gaps often found in UI development by providing a comprehensive, rule-based audit framework for web interfaces.

Core Features & Use Cases

  • Accessibility Auditing: Validates ARIA labels, focus management, and keyboard navigation to ensure WCAG compliance.
  • Performance & UX Optimization: Checks for layout shifts, touch target sizing, and motion sensitivity to improve user retention.
  • Use Case: Before deploying a new dashboard component, use this Skill to verify that all interactive elements are keyboard-accessible and that the design respects system-level dark mode and motion preferences.

Quick Start

Invoke the web-design-guidelines skill to perform a full accessibility and performance audit on the current UI component.

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 web UI for accessibility and WCAG compliance?▼

UI accessibility auditing verifies ARIA labels, focus management, and keyboard navigation to ensure WCAG compliance across frontend components. It targets interactive elements to identify violations in ARIA implementation through systematic rule-based verification.

What is the best way to check frontend components for UX and performance issues?▼

Evaluating frontend components for UX and performance checks layout shifts, touch target sizing, and motion sensitivity. This rule-based verification identifies violations in responsive typography and touch interaction to improve user retention.

Can I verify keyboard navigation and focus states in my web interface?▼

Yes, you can verify keyboard navigation and focus states by evaluating web interfaces against comprehensive accessibility standards. This validates ARIA implementation, focus management, and keyboard navigation to ensure all interactive elements are keyboard-accessible.

Does this accessibility audit check for responsive typography and touch interaction?▼

Yes, the audit checks responsive typography and touch interaction by targeting frontend components. It identifies violations in touch target sizing and responsive typography through systematic rule-based verification against web best practices.

When do I need to run a UI accessibility and performance audit?▼

You need to run a UI accessibility and performance audit before deploying new dashboard components or web interfaces. This verifies interactive elements are keyboard-accessible and the design respects system-level dark mode and motion preferences.

Related Skills

Explore More Design & Creative Skills→
skeletorfletskeletorflet
7

web-design-guidelines

Audit UI files against the latest Web Interface Guidelines.

Community
Intermediate
lord-vinayaklord-vinayak

accessibility-code

Audits frontend code for WCAG 2.2 AAA, Section 508, and ARIA correctness.

Community
Advanced
khaliqgantkhaliqgant
790

frontend-design

Generate accessible, responsive frontend interfaces with cohesive design systems.

Community
Advanced
takemo101takemo101

frontend-reviewer

Review React, Vue, and Next.js frontend code for UI/UX, accessibility, and performance.

Community
Intermediate