web-design-guidelineslisted

# Web Design Guidelines Skill ## Purpose Audit interface code against a concise MUST/SHOULD/NEVER rule set covering interaction, animation, layout, accessibility, performance, and theming. ## When to use Use this skill as a pre-merge gate on user-facing UI. Use `impeccable-ui.md` for design direction and craft; use this for conformance. ## Inputs - the pages or components under review - target breakpoints and browsers - framework and whether the app hydrates - any product-specific interaction requirements ## Output Return: - findings grouped as interactions, animation, layout, content and accessibility, performance, theming, hydration - each finding labelled MUST / SHOULD / NEVER, with the element and the corrected code - an explicit statement of what was not checked ## Constraints - **Keyboard** — full support per WAI-ARIA APG; visible `:focus-visible` rings; managed focus (trap, move, return); never `outline: none` without a replacement - **Targets** — hit target ≥24px, ≥44px on mobile; mobile `<input>` font-size ≥16px to prevent iOS zoom; never disable browser zoom; `touch-action: manipulation` - **Forms** — never block paste; keep submit enabled until the request starts, then spinner with the original label; accept free text and validate after; allow incomplete submission to surface validation; errors inline with focus moved to the first one; `autocomplete` plus correct `type` and `inputmode`; warn on unsaved changes; label and control share one hit targe