skills.rest
hotriluan
hotriluanCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Audit UI accessibility and usability gaps against official web-interface-guidelines rules.

2|Updated Dec 24, 2025
Search Tags:#ui#accessibility#a11y#guidelines#ux#web-design#design-review
One-click install
npx skills add https://github.com/hotriluan/alkana-dashboard --skill web-design-guidelines-hotriluan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/hotriluan/alkana-dashboard/tree/main/.opencode/skill/web-design-guidelines
Command: npx skills add https://github.com/hotriluan/alkana-dashboard --skill web-design-guidelines-hotriluan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design reviews identify usability and accessibility gaps in user interfaces, helping teams ship more inclusive products.

Core Features & Use Cases

  • Automated UI guideline checks: Evaluate HTML/CSS/JS for accessibility and UX best practices across components and patterns.
  • Design-system alignment: Verify conformance of components to established tokens and visual guidelines.
  • Use Case: When a UI review is requested, run checks against the latest Web Interface Guidelines and deliver prioritized remediation suggestions.

Quick Start

Provide a concise UI audit by supplying the target UI files or URLs to 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 UI accessibility and UX best practices in a web project?▼

To audit UI accessibility, provide your target HTML/CSS/JS files or live site URLs for evaluation. The system checks against official Web Interface Guidelines to identify contrast, keyboard navigation, and responsive layout gaps.

Can I review my design system for accessibility and visual guideline conformance?▼

Yes, you can verify design-system alignment by checking your components against established tokens and visual guidelines. The audit retrieves current rules to evaluate consistency and flag accessibility issues across your UI patterns.

What is the best way to check keyboard navigation and contrast issues in a live site?▼

The best way to check keyboard navigation and contrast issues is to supply the live site URL for an automated UI review. The system maps identified gaps to current rules and delivers prioritized remediation suggestions.

Does this accessibility review work with raw codebases or do I need a running application?▼

This accessibility review works with raw codebases, design systems, and live sites. You can supply UI files directly to evaluate HTML, CSS, and JS without needing a running application or local testing environment.

How are accessibility and UX inconsistencies reported for quick remediation?▼

Accessibility and UX inconsistencies are reported in a concise, rule-mapped format suitable for quick remediation. The system prioritizes findings so teams can immediately address usability gaps and ship inclusive products.

When do I need to run an automated UI guideline check for web accessibility?▼

You need to run an automated UI guideline check when preparing client-facing interfaces for release. It identifies usability gaps, validates responsive layouts, and ensures your components conform to current a11y standards.

Related Skills

Explore More Design & Creative Skills→
pawan0631pawan0631

figma-implement-design

Convert Figma design specifications into production-ready UI code.

Community
Advanced
IntelliTectIntelliTect

add-accessibility

Audit and remediate accessibility gaps in Vuetify components for WCAG compliance.

Official
Advanced
mauricioacpmauricioacp
1

web-design-guidelines

Fetch Web Interface Guidelines and validate UI code with file:line findings.

Community
Intermediate
HouseofmvpsHouseofmvps
115

a11y

Detect and fix deterministic WCAG 2.2 A/AA accessibility violations in HTML files.

Community
Advanced