HTML
Installation
SKILL.md
Layout Shift Prevention
widthandheighton<img>even with CSS sizing — browser reserves space before loadaspect-ratioin CSS as fallback — for responsive images without dimensions
Form Gotchas
autocompleteattribute is specific —autocomplete="email",autocomplete="new-password", not juston/off<fieldset>+<legend>required for radio/checkbox groups — screen readers announce the group labelinputmodefor virtual keyboard —inputmode="numeric"shows number pad without validation constraintsenterkeyhintchanges mobile keyboard button —enterkeyhint="search",enterkeyhint="send"
Accessibility Gaps
- Skip link must be first focusable —
<a href="#main" class="skip">Skip to content</a>before nav <th scope="col">orscope="row"— without scope, screen readers can't associate headersaria-hidden="true"hides from screen readers — use for decorative icons, not interactive elementsrole="presentation"on layout tables — if you must use tables for layout (you shouldn't)
Link Security
target="_blank"needsrel="noopener noreferrer"—noopenerprevents window.opener access,noreferrerhides referrer- User-generated links need
rel="nofollow ugc"—ugctells search engines it's user content