skills.rest
devsepnine
devsepnineCOMMUNITY
Explore all skills by this author →
Website𝕏@devsepnineGitHub

web-design-guidelines

Review UI code for Web Interface Guidelines compliance and report violations by line.

1|Updated Feb 24, 2026
Search Tags:#ui#accessibility#a11y#review#guidelines#ux#web-design
One-click install
npx skills add https://github.com/devsepnine/hibi_ai --skill web-design-guidelines-devsepnine
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/devsepnine/hibi_ai/tree/main/src/skills/web-design-guidelines
Command: npx skills add https://github.com/devsepnine/hibi_ai --skill web-design-guidelines-devsepnine

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams verify that web UI code adheres to Web Interface Guidelines, ensuring accessible, usable, and consistent interfaces across platforms.

Core Features & Use Cases

  • Guideline-driven reviews: Automatically checks frontend UI elements, structure, and semantics against a living guideline source.
  • Accessibility & UX checks: Flags contrast, keyboard navigation, focus order, ARIA usage, and responsive behavior.
  • Use Case: When you review a UI component library, run this skill to identify violations and generate a prioritized remediation list.

Quick Start

Tell the AI to review the provided UI files against the latest Web Interface Guidelines and report violations.

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 code for UI accessibility and UX conformance?▼

To audit UI accessibility and UX conformance, review frontend code against established Web Interface Guidelines. This process checks UI patterns, components, and interaction flows to verify elements like contrast, keyboard navigation, and ARIA usage.

How do I check my design system for accessibility violations?▼

Check your design system for accessibility violations by running a guideline-driven review on the frontend codebase. This flags non-compliant UI patterns, semantic issues, and responsive behavior problems, generating a prioritized remediation list.

What is checked during a web interface accessibility review?▼

A web interface accessibility review checks frontend UI elements, structure, and semantics against a living guideline source. It specifically flags issues with contrast, keyboard navigation, focus order, ARIA usage, and responsive behavior.

Can I use this to review UI components for keyboard navigation and focus order?▼

Yes, you can review UI components for keyboard navigation and focus order. The review process applies Web Interface Guidelines rules to your files and reports findings in a concise, line-based format for quick remediation.

Does the UI review process require specific dependencies or components?▼

No specific dependencies or components are required to perform the UI review. The process fetches the latest guidelines from the official source directly and applies all rules to the provided frontend files.

Related Skills

Explore More Design & Creative Skills→
EdwinFerminEdwinFermin

web-design-guidelines

Identify UI guideline violations in web codebases and report them in file:line format.

Community
Intermediate
Choco-emmmChoco-emmm
7

web-design-guidelines

Scan UI code for Web Interface Guidelines compliance and report prioritized violations.

Community
Intermediate
d0d012d0d012
9

frontend-design

Creates frontend interfaces with consistent design systems and responsive behavior.

Community
Intermediate
MatheusrlrMatheusrlr
1

accessibility

Audit web pages against WCAG 2.1 AA accessibility guidelines.

Community
Intermediate