web-design-guidelines_skill

Overview

This skill reviews UI code for compliance with Web Interface Guidelines and returns actionable, line-referenced findings. It is designed to run automated audits against the canonical guideline document and report violations in a terse file:line format. Use it to quickly identify accessibility, layout, and interaction issues directly in source files.

How this skill works

Before each review it fetches the latest guideline text from the official source URL. It then reads the files or file patterns you provide, applies every rule found in the fetched guidelines, and collects violations. Results are emitted in the concise file:line output format specified by the guidelines so they are easy to parse and act on.

When to use it

• When you ask "review my UI" for a quick code audit against the guidelines
• When you need an accessibility check across HTML, CSS, or JS
• When performing a UX or design system compliance audit
• When preparing a release and you need automated guideline verification
• When integrating guideline checks into CI or pre-commit hooks

Best practices

• Always allow the skill to fetch the latest guidelines before a review to avoid stale rules
• Provide explicit file paths or glob patterns; if omitted, the skill will prompt for files
• Run reviews early and often to catch issues before they accumulate
• Treat file:line findings as inputs for fixes and re-run until the report is clean
• Combine these reports with manual UX review for context-sensitive decisions

Example use cases

• Run a one-off audit: review a new page for accessibility regressions
• Pre-release check: verify that recent UI changes follow layout and spacing rules
• CI integration: fail builds when the guideline check reports critical violations
• Designer handoff: confirm code matches interaction and naming conventions
• Legacy cleanup: scan older files to prioritize accessibility and UX fixes