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.
- skills.sh installs
- 179
- GitHub stars
- 1.4K
- last updated
- Jun 9, 2026
Install
$ npx -y skills add cloudai-x/claude-workflow-v2 --skill web-design-guidelines --agent claude-codeInstalls into .claude/skills of the current project.
Files
Web Interface Guidelines
When to Load
- Trigger: UI audit, accessibility checks, responsive design review, UX best practices evaluation
- Skip: Backend-only work with no UI components
Self-contained guidelines for reviewing web interfaces. Apply these rules when auditing UI code.
Output Format
Report findings as: file:line — [RULE_ID] description
Example: src/Button.tsx:12 — [A11Y-01] Missing aria-label on icon button
1. Accessibility (A11Y)
A11Y-01: Semantic HTML
- Use
<button>for actions,<a>for navigation,<input>for data entry - Never use
<div onClick>or<span onClick>for interactive elements - Use
<nav>,<main>,<aside>,<header>,<footer>for landmarks
A11Y-02: ARIA Labels
- All interactive elements need accessible names
- Icon-only buttons MUST have
aria-label - Form inputs MUST have associated
<label>oraria-label - Images need
alttext (decorative images:alt="")
A11Y-03: Keyboard Navigation
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/cloudai-x/claude-workflow-v2
- Categories
- Git & Pull Requests, Code Review & Quality, Automation & Workflows, Design & UI/UX
- License
- MIT
- First seen
- Jun 11, 2026
More from cloudai-x/claude-workflow-v2
All 14Recommended
More Git & Pull Requests
schedule-managerniracler/skill(macOS only) Use this skill for ALL Apple Calendar and Reminders management tasks using osascript and reminders-cli, following GTD methodology. Invoke immediate179skills.sh installs
pdfshareai-lab/learn-claude-codeProcess PDF files - extract text, create PDFs, merge documents. Use when user asks to read PDF, create PDF, or work with PDF files.179skills.sh installs
business-devaibtcdev/skillsFull-cycle revenue engine — prospecting, CRM pipeline management, closing deals, partnerships, and engineering-as-marketing. External sales via GitHub and web.176skills.sh installs
openrouter-trending-modelsmadappgang/claude-codeFetch trending programming models from OpenRouter rankings. Use when selecting models for multi-model review, updating model recommendations, or researching cur173skills.sh installs
winui-packagingmicrosoft/win-dev-skillsMSIX packaging, code signing, and distribution for WinUI 3 apps — build for release, certificate generation (winapp cert generate), certificate trust, code sign170skills.sh installs
pp-dubmvanhorn/printing-press-libraryEvery Dub feature, plus offline search, agent-native output, and a local SQLite store no other Dub tool has. Trigger phrases: `shorten a link with Dub`, `audit 170skills.sh installs