web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", "check my site against best practices", or "web interface guidelines".
npx skills add CloudAI-X/claude-workflow-v2 --skill web-design-guidelines --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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>` or `aria-label` - Images need `alt` text (decorative images: `alt=""`) ### A11Y-03: Keyboard Navigation - All interactive elements must be reachable via Tab - Custom components need proper `role`, `tabIndex`, and key handlers - Focus must be visible (never `outline: none` without replacement) - Modal/dialog must trap
- When to Load
- Output Format
- 1. Accessibility (A11Y)
- A11Y-01: Semantic HTML
- A11Y-02: ARIA Labels
- A11Y-03: Keyboard Navigation
- A11Y-04: Color & Contrast
- A11Y-05: Screen Readers
- 2. Performance (PERF)
- PERF-01: Image Optimization
- PERF-02: Bundle Size
- PERF-03: Rendering
- PERF-04: Core Web Vitals
- 3. Responsive Design (RD)
What does the web-design-guidelines skill do?
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", "check my site against best practices", or "web interface guidelines".
How do I install it?
Run `npx skills add CloudAI-X/claude-workflow-v2 --skill web-design-guidelines --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From CloudAI-X/claude-workflow-v2, a repository with 1,397 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.