web-design-guidelines

Provide the file or pattern you want reviewed, and the Skill checks it against accessibility rules including ARIA labels, semantic HTML, keyboard handlers, and focus states. Findings are reported in file:line format grouped by file.

The audit covers accessibility, focus states, forms, animation, typography, content handling, images, performance, navigation state, touch interaction, dark mode, i18n, and hydration safety. It also flags anti-patterns like transition: all and icon buttons without aria-label.

No, this Skill focuses on visual design and interaction patterns only. For performance audits use a core-web-vitals skill, for SEO use a dedicated SEO skill, and for comprehensive audits use a web-quality-audit skill.

Findings are grouped by file using a terse file:line format that is clickable in VS Code. Each line states the issue and location, skipping explanations unless the fix is non-obvious, and files with no issues show a pass marker.

It flags user-scalable=no, onPaste with preventDefault, transition: all, outline-none without focus replacement, div elements with click handlers, images without dimensions, unvirtualized large lists, and hardcoded date or number formats.