skills.rest
iadr-dev
iadr-devCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Review UI code against Web Interface Guidelines and output file:line findings.

2|Updated Apr 26, 2026
Search Tags:#code review#accessibility#pattern matching#ui audit#ux review#design compliance#web interface guidelines
One-click install
npx skills add https://github.com/iadr-dev/colab --skill web-design-guidelines-iadr-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/iadr-dev/colab/tree/main/skills/coding/web-design-guidelines
Command: npx skills add https://github.com/iadr-dev/colab --skill web-design-guidelines-iadr-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you verify that your web UI aligns with Web Interface Guidelines, catching accessibility and design compliance issues before users do.

Core Features & Use Cases

  • Guideline-based UI review: Fetches the latest Web Interface Guidelines rules and applies them to your UI code.
  • File and pattern auditing: Reviews specific files you provide or a pattern to discover targets; if nothing is provided, it prompts you for what to check.
  • Actionable findings output: Reports issues in the terse file:line format expected by the fetched guidelines.

Quick Start

Ask the AI to review your front-end codebase for accessibility and design guideline compliance by running a web-design-guidelines audit on the files you specify.

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 UI code for accessibility and design compliance?▼

You can audit UI code for accessibility and design compliance by providing specific files or file patterns for review. The tool fetches the latest Web Interface Guidelines rules, checks every rule, and outputs findings in a file:line format.

What is the best way to check front-end files against Web Interface Guidelines?▼

The best way to check front-end files against Web Interface Guidelines is to run an automated UX review that fetches the latest rules and applies them to your specified files or file patterns to catch accessibility and design issues.

Do I need to specify files to run a UX review?▼

You do not need to specify files to run a UX review. If no files or patterns are provided, the review process will prompt you for what to check before fetching and applying the guideline rules.

How does pattern matching work for UI audits?▼

Pattern matching for UI audits works by allowing you to provide a file pattern to discover target files. The tool then reads these discovered files and checks every Web Interface Guidelines rule against them.

What format are accessibility check findings reported in?▼

Accessibility check findings are reported in a terse file:line format. This output structure aligns with the fetched Web Interface Guidelines rules to help you quickly locate design compliance issues.

Related Skills

Explore More Design & Creative Skills→
ethanranxuethanranxu

web-design-guidelines

Evaluate UI code against Web Interface Guidelines and report compliance gaps.

Community
Intermediate
boazcstrikeboazcstrike
3

web-design-guidelines

Review UI code against Web Interface Guidelines for accessibility compliance.

Community
Basic
alexzhang1030alexzhang1030

web-design-guidelines

Review UI code for web interface guideline compliance and accessibility issues.

Community
Intermediate
martinholovskymartinholovsky
12

sota-frontend-design

Audit and build user interfaces against web design and UI/UX standards.

Community
Advanced