Agent skill · design visual · ehmo
web-design-guidelines
Web platform design and accessibility guidelines. Use when building web interfaces, auditing accessibility, implementing responsive layouts, or reviewing web UI code. Triggers on tasks involving HTML, CSS, web components, WCAG compliance, responsive design, or web performance.
Why this skill is useful
Provides specific guidelines for accessible web design that the AI wouldn't reliably generate on its own.
What it needs
About 11k tokens when loaded. Last updated 2026-03-19. 481 stars on the source repository.
What this skill does
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. 1.1 Use Semantic HTML Elements Use elements for their intended purpose. Semantic structure provides free accessibility, SEO, and reader-mode support. Element Purpose --------- --------- <main> Primary page content (one per page) <nav> Navigation blocks <header> Introductory content or navigational aids <footer> Footer for nearest sectioning content <article> Self-contained, independently distributable content <section> Thematic grouping with a heading <aside> Tangentially related content (sidebars, callouts) <figure> / <figcaption> Illustrations, diagrams, code listings <details> / <summary> Expandable/collapsible disclosure widget <dialog> Modal or non-modal dialog boxes <time> Machine-readable dates/times <mark> Highlighted/referenced text <address> Contact information for nearest article/body Anti-pattern: Using <div> or <span> for interactive elements. Never write <div onclick> when <button> exists. 1.2 ARIA Labels on Interactive Elements Every interactive element must have an accessible name. Prefer visible text; use aria-label or aria-labelledby only when visible text is insufficient (SC 4.1.2). 1.3 Keyboard Navigation All interactive elements must be reachable and operable via keyboard (SC 2.1.1). Use native interactive elements (<button>, <a href>, <input>, <select>) which are keyboard-accessible by default. Custom widgets need tabindex="0" to enter tab order and keydown handlers for activation. Never use tabindex values greater than 0. Trap focus inside modals; return focus on close. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills ehmo/web