Web & UI pack
Claude Skill
Web Interface Guidelines Reviewer
Reviews your UI code against accessibility + web interface guidelines and reports issues as terse file:line findings.
What it does
Audits components against established web interface guidelines — accessibility (focus, contrast, semantics, labels, keyboard), interaction, layout, and UX convention — and returns fixable file:line findings. Built to catch what fails real users and real audits, not subjective style nits.
When to use
- ✓Shipping a UI and you want an accessibility + UX pass before launch
- ✓Reviewing a component PR for guideline compliance
- ✓Auditing an existing page against current best practices
When not to use
- ✗You want a visual redesign — that's a design project, not a compliance review
- ✗The surface isn't a web UI
Install
Download the .zip, then unzip into your Claude skills folder.
mkdir -p ~/.claude/skills
unzip ~/Downloads/web-interface-guidelines-reviewer.zip -d ~/.claude/skills/
# Restart Claude Code session.
# Skill is now available — Claude will use it when relevant.SKILL.md
SKILL.md
---
name: web-interface-guidelines-reviewer
description: Use when reviewing UI code for accessibility and web interface guideline compliance. Triggers on "review my UI", "check accessibility", "audit design", "review UX", "a11y review".
---
# Web Interface Guidelines Reviewer
Review the UI against the guidelines that affect real users and pass real audits — not taste. Output is terse and actionable: `file:line` + the rule + the fix. Don't editorialize about aesthetics; flag what's broken or non-compliant.
## Pull the latest rules first
Interface guidelines evolve. If you can fetch the current Web Interface Guidelines (Vercel maintains a public, frequently-updated set), do that before reviewing so the rules aren't stale. If you can't, review against the categories below.
## What to check
**Accessibility (highest priority)**
- Every interactive element is keyboard-reachable and has a visible focus state
- Color contrast meets WCAG AA for text and UI controls
- Semantic HTML (`button` for actions, `a` for navigation, real headings) — not `div` soup
- Form inputs have associated labels; errors are announced, not just colored red
- Images have alt text; decorative images are marked as such
- Motion respects `prefers-reduced-motion`
**Interaction**
- Touch targets are large enough; hit areas aren't cramped
- Loading and disabled states exist and are communicated
- Destructive actions have a confirmation or undo
- No action depends on hover alone (fails touch + keyboard)
**Layout & content**
- Content reflows without horizontal scroll down to small viewports
- Text remains legible when zoomed to 200%
- Nothing critical is conveyed by color alone
## Output
For each finding: `file:line` — the rule it violates — the one-line fix. Group by severity (a11y blockers first). End with a short count: N blockers, N warnings.
## Anti-patterns (in the review)
- Flagging subjective style ("I'd use more padding") as a compliance issue
- Reporting "no schema/ARIA" from a static read when it may be injected at runtime — verify
- A wall of nitpicks that buries the actual accessibility blocker
Example prompts
Once installed, try these prompts in Claude:
- Review these form components for accessibility and interface-guideline issues — give me file:line findings.
- Audit our checkout page against UI/UX best practices before launch.