web-design-guidelines

Review UI code against Web Interface Guidelines for accessibility and design quality.

Updated Jun 15, 2025
One-click install
npx skills add https://github.com/patrickhaahr/dotfiles --skill web-design-guidelines-patrickhaahr
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/patrickhaahr/dotfiles/tree/main/opencode/.config/opencode/skills/web-design-guidelines
Command: npx skills add https://github.com/patrickhaahr/dotfiles --skill web-design-guidelines-patrickhaahr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps reviewers ensure UI code adheres to Web Interface Guidelines, improving accessibility, usability, and consistency across projects.

Core Features & Use Cases

  • Fetch the latest guidelines from the source to guarantee up-to-date checks
  • Read target files or patterns and evaluate them against all rules
  • Use Case: When asked to review a UI, check accessibility, audit visual/design consistency, or compare against best practices

Quick Start

Use the web-design-guidelines skill to review your UI files by providing a path or pattern (e.g., src/**/*.tsx).

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

To audit UI code for accessibility and UX compliance, provide a file path or pattern like src/**/*.tsx. The review reads target files, fetches up-to-date Web Interface Guidelines, and reports concise findings against design rules.

What is a UI accessibility audit and when do I need one?

A UI accessibility audit evaluates your code against established Web Interface Guidelines to ensure usability and design quality. You need one when checking visual consistency, accessibility standards, or UX alignment across web projects.

Can I review specific file patterns for design guideline adherence?

Yes, you can review specific file patterns for design guideline adherence by providing a path or glob pattern like src/**/*.tsx. The review evaluates matched files against all fetched rules and reports concise findings.

How do I check if my web design follows current UX best practices?

To check if your web design follows current UX best practices, the review fetches the latest guidelines from the source to guarantee up-to-date checks. It evaluates your UI code against all rules and reports concise findings.

What's the best way to ensure visual design consistency across web projects?

The best way to ensure visual design consistency across web projects is reviewing UI code against Web Interface Guidelines. This process fetches up-to-date rules, reads target files, and reports concise findings for accessibility and usability alignment.

Does this UI review work without external dependencies?

Yes, this UI review works without external dependencies. It independently fetches up-to-date guidelines from the source, reads your target files, and evaluates them against all rules to report concise accessibility and UX findings.