What should I provide to use it?

A file or pattern to review; you may specify files or directories.

What should I not use it for?

Performance audits (use core-web-vitals), SEO (use seo), or comprehensive site audits (use web-quality-audit).

web-design-guidelines

Scanned

npx machina-cli add skill tech-leads-club/agent-skills/web-design-guidelines --openclaw

Files (1)

SKILL.md

2.0 KB

Web Interface Guidelines

Review files for compliance with Web Interface Guidelines.

How It Works

Read the guidelines from #[[file:references/guideline.md]]
Read the specified files (or prompt user for files/pattern)
Check against all rules in the guidelines
Output findings in the terse file:line format

Guidelines Reference

All rules and output format instructions are in:

#[[file:references/guideline.md]]

The guidelines cover:

Accessibility (ARIA, semantic HTML, keyboard navigation)
Focus states and keyboard interaction
Forms (autocomplete, validation, labels)
Animation (reduced motion, performance)
Typography (proper characters, number formatting)
Content handling (overflow, empty states)
Images (dimensions, lazy loading)
Performance (virtualization, DOM reads)
Navigation & state (URL sync, deep linking)
Touch & interaction (tap delays, safe areas)
Dark mode & theming
Locale & i18n
Hydration safety
Common anti-patterns to flag

Usage

When a user provides a file or pattern argument:

Read the guidelines from references/guideline.md
Read the specified files
Apply all rules from the guidelines
Output findings using the format specified in the guidelines

If no files specified, ask the user which files to review.

Output Format

Follow the format in the guidelines:

Group findings by file
Use file:line format (VS Code clickable)
Terse, high signal-to-noise
State issue + location
Skip explanation unless fix is non-obvious

Source

git clone https://github.com/tech-leads-club/agent-skills/blob/main/packages/skills-catalog/skills/(design)/web-design-guidelines/SKILL.md

View on GitHub

Overview

This skill audits UI code for compliance with Web Interface Guidelines, focusing on visual design and interaction patterns. It helps ensure accessibility, clear focus management, and consistent UX by producing terse, actionable findings. Use it when you want to review UI, check accessibility, audit design, review UX, or compare against best practices.

How This Skill Works

It reads guidelines from references/guideline.md, then reads the specified files or prompts for files, checks against all rules, and outputs findings in the terse file:line format. The process emphasizes accessibility, keyboard navigation, typography, and interaction patterns, not performance or SEO.

When to Use It

Review my UI for Web Interface Guidelines compliance
Check accessibility and keyboard navigation
Audit design consistency across components
Review UX and interaction patterns
Compare UI against best-practice guidelines

Quick Start

Step 1: Provide the file or pattern to review
Step 2: The tool reads guidelines and your files
Step 3: Review the terse findings in file:line format

Best Practices

Prioritize accessibility: ARIA, semantic HTML, and keyboard support
Validate focus states and visible focus indicators across components
Audit forms: labels, autocomplete, validation messages, and error handling
Assess typography, contrast, and content handling for readability
Flag anti-patterns and ensure safe animations and use of reduced motion

Example Use Cases

file:src/components/header.html:8 missing aria-label on menu button
file:src/forms/login.html:14 label missing for password field
file:src/ui/tabs.js:210 focus management not visible in Safari
file:src/pages/home.html:95 color contrast below accessibility threshold
file:src/components/carousel.js:12 animation not reduced-motion friendly

Frequently Asked Questions

Add this skill to your agents