Web Design Guidelines

This gives Claude a comprehensive checklist to audit your UI code against modern web standards. It covers accessibility (semantic HTML, ARIA labels, keyboard nav), performance (Core Web Vitals, image optimization), responsive design, and common component patterns like forms and modals. The output format is clean and actionable, pinpointing exact file locations with rule IDs. What I like is the prioritization system at the end, so you know which issues are critical versus nice-to-have. It's opinionated in the right ways, like "never use div onClick" and specific about metrics like 4.5:1 contrast ratios. Good for catching issues before they ship, especially if you're working without a dedicated design system or accessibility expert on the team.

Install to Claude Code

npx -y skills add cloudai-x/claude-workflow-v2 --skill web-design-guidelines --agent claude-code