skills.rest
AloisH
AloisHCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Analyze UI code against Web Interface Guidelines and report violations in file:line format.

Updated Nov 24, 2025
Search Tags:#accessibility#a11y#guidelines#web-design#design-review#ui-review#ux-audit
One-click install
npx skills add https://github.com/AloisH/bistro --skill web-design-guidelines-aloish
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/AloisH/bistro/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/AloisH/bistro --skill web-design-guidelines-aloish

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure their UI conforms to Web Interface Guidelines, reducing accessibility gaps and UX inconsistencies during code reviews.

Core Features & Use Cases

  • Guideline-aware review: Scans UI files to check against the latest Web Interface Guidelines.
  • Automated checks: Flag common accessibility, contrast, keyboard navigation, and responsive design issues.
  • Use Case: When a designer asks to “review my UI” or “audit design” across a codebase, run this Skill to surface non-compliant patterns and suggested fixes.

Quick Start

To start, provide the path to the UI code and optional file pattern, then run the review tool, for example: review-ui --path apps/web --pattern '**/*.vue' and review results.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run an accessibility audit on my UI code?▼

To run an accessibility audit, provide the path to your UI code and optional file patterns, then execute the review tool to surface non-compliant patterns and suggested fixes in a file:line format.

What UI issues does a UX audit check for during a code review?▼

A UX audit checks for common accessibility gaps, contrast issues, keyboard navigation problems, and responsive design inconsistencies to ensure compliance with Web Interface Guidelines.

Can I scan specific file types like Vue files for design compliance?▼

Yes, you can scan specific file types by providing an optional file pattern argument, such as '**/*.vue', alongside the target directory path to review results for design compliance.

Does this automated design review fetch the latest Web Interface Guidelines?▼

Yes, the automated design review fetches the latest Web Interface Guidelines rules before reading target files, ensuring your UI components are evaluated against current accessibility and UX standards.

How are accessibility violations reported in the UI review results?▼

Accessibility violations are reported in a prescribed file:line format, directly linking the non-compliant UI patterns and suggested fixes to their exact locations within the target files.

Related Skills

Explore More Design & Creative Skills→
AbhiShake1AbhiShake1
1

web-design-guidelines

Audit UI code against Web Interface Guidelines and report non-conformities in file:line format.

Community
Intermediate
ahiendzahiendz
3

web-design-guidelines

Fetch Web Interface Guidelines and report UI compliance issues in file:line format.

Community
Intermediate
tnunamaktnunamak

web-design-guidelines

Review web UI code against Web Interface Guidelines and report violations in file:line format.

Community
Intermediate
gavin100305gavin100305
1

web-design-guidelines

Audit web UI code against Web Interface Guidelines for compliance issues.

Community
Intermediate