skills.rest
collat-labs
collat-labsOFFICIAL
Explore all skills by this author →
GitHub

web-design-guidelines

Reviews web interface source files for accessibility and UX compliance problems.

1|Updated Apr 25, 2026
Search Tags:#code review#best practices#accessibility#ui audit#ux review#guidelines compliance#frontend code
One-click install
npx skills add https://github.com/collat-labs/collat --skill web-design-guidelines-collat-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/collat-labs/collat/tree/main/.agent/skills/web-design-guidelines%20copy
Command: npx skills add https://github.com/collat-labs/collat --skill web-design-guidelines-collat-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you identify accessibility, usability, and interface issues in your web UI by checking your code against the latest Web Interface Guidelines.

Core Features & Use Cases

  • Guideline-driven UI review: Fetches the newest guideline ruleset from the official source before each audit to ensure recommendations stay current.
  • Targeted file/pattern inspection: Reviews user-specified files or prompts you for what to check when nothing is provided.
  • Actionable, terse reporting: Produces findings in the file:line format to make fixes fast and traceable.

Use case: You changed the layout and want to confirm your site still meets accessibility and design best practices before shipping.

Quick Start

Ask the AI to review the files under the folder pattern "src/**/*.{tsx,ts,jsx,js,css}" for compliance with the latest Web Interface Guidelines.

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 frontend code for accessibility and UX compliance?▼

You audit frontend code for accessibility and UX compliance by fetching the latest Web Interface Guidelines and reviewing your source files to report issues in a terse file-and-line format for fast fixes.

What is a UI review against web interface guidelines?▼

A UI review against web interface guidelines is an audit that fetches the newest official ruleset and checks your web UI source files to find accessibility and usability issues.

Can I run a repository-wide UX review on specific file patterns?▼

Yes, you can run a repository-wide UX review by specifying folder patterns like src/**/*.{tsx,ts,jsx,js,css} to inspect frontend codebase patterns for design compliance.

Does this UI audit work with React and TypeScript files?▼

Yes, this UI audit works with React and TypeScript files by reviewing source files under patterns like tsx and ts to find accessibility and UX compliance problems in your frontend codebase.

How are accessibility issues reported during a UI audit?▼

Accessibility issues are reported in a terse file-and-line format during a UI audit, making fixes fast and traceable directly within your frontend codebase.

What is the best way to check my site for design best practices before shipping?▼

The best way to check your site for design best practices before shipping is to run a guideline-driven UI review on changed layouts to confirm accessibility and UX compliance.

Related Skills

Explore More Design & Creative Skills→
JaylaelikeJaylaelike

web-design-guidelines

Analyze HTML, CSS, and JavaScript files against Web Interface Guidelines.

Community
Intermediate
jrmatherlyjrmatherly

web-design-guidelines

Analyze HTML/CSS/JS files for accessibility and design guideline compliance.

Community
Basic
video-production-buddyvideo-production-buddy
602

web-design-guidelines

Review UI code against Vercel web interface guidelines and accessibility standards.

Official
Intermediate
InnerScopeHearingInnerScopeHearing

wcag-audit-patterns

Audit web content for WCAG 2.2 compliance with automated testing and remediation guidance.

Official
Intermediate