← ClaudeAtlas

html5-native-fallbacklisted

Build accordions, disclosures, modals, popovers, dropdowns, toggles, progress bars, and page structure from native HTML5 elements — <details>/<summary>, <dialog>, the popover attribute, <button>, <main>/<nav>/<aside>/<article> — instead of div-and-span components driven by JavaScript state machines and hand-written ARIA. Use this whenever generating or reviewing HTML/JSX for any interactive component or page scaffold, and especially when the user asks for an accordion, FAQ, collapsible, expandable section, modal, dialog, drawer, dropdown, menu, tooltip, tabs, toggle, or "make it accessible / keyboard-friendly / work without JS" — even if they don't mention semantics. Also use when reviewing markup that has onclick on divs, href="#" links, or role="button" on non- buttons.
fernandokylas/editorial-web-craft · ★ 2 · Web & Frontend · score 73
Install: claude install-skill fernandokylas/editorial-web-craft
# HTML5 Native Fallback The browser already ships an accessible accordion, an accessible modal with focus trapping and `Esc`, an accessible popover with light-dismiss, and a button that works with keyboard, screen reader, and voice control. A `<div onclick>` with a hand-rolled `aria-expanded` toggle re-implements a fraction of that, badly, and stops working the moment the script is slow, blocked, or throws. Native elements get keyboard handling, focus management, ARIA roles, and the accessibility tree for free — and they keep working when JavaScript doesn't. So the first question for any interactive component is not "how do I build this" but "which element already is this". `references/native-patterns.md` is the lookup table — accordion, exclusive accordion, modal, drawer, popover, dropdown, switch, segmented control, progress, date input, carousel, and the one common component (tabs) that has no native element and needs a small, correct ARIA implementation. ## Three rules that carry most of the weight **1. Disclosures are `<details>`/`<summary>`.** No click listeners, no `hidden` toggling, no `aria-expanded` — the browser manages all of it. `open` sets the initial state; `name="group"` makes a set exclusive (one open at a time) with no JS. Style `summary` like any button; strip the marker with `list-style: none` and `::-webkit-details-marker { display: none }`. ```html <div class="semantic-accordion-group"> <details class="accordion-node" name="method" open> <summ