Web Design Guidelines

A comprehensive reference for building accessible web interfaces that actually covers the important stuff: semantic HTML patterns, ARIA usage, keyboard navigation, focus management, and WCAG 2.2 contrast requirements. The tables are genuinely useful, especially the semantic element guide and the contrast ratio chart. It includes code examples for common patterns like focus traps and skip links, and calls out anti-patterns like div soup and placeholder-only labels. Invoke this when you're building or auditing anything that renders in a browser and need to avoid the accessibility mistakes that ship in 90% of web apps. The guidelines are framework-agnostic, so they apply whether you're writing vanilla HTML or working in React, Vue, or whatever.

skills.sh installs: 1.6K
GitHub stars: 639
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add ehmo/platform-design-skills --skill web-design-guidelines --agent claude-code

Installs into .claude/skills of the current project.

Files

Web Platform Design Guidelines

Framework-agnostic rules for accessible, performant, responsive web interfaces. Based on WCAG 2.2, MDN Web Docs, and modern web platform APIs.

1. Accessibility / WCAG [CRITICAL]

Accessibility is not optional. Most rules in this section map to WCAG 2.2 success criteria at Level A or AA. A small number of best-practice rules (noted inline) target Level AAA or go beyond WCAG.