← ClaudeAtlas

htmx-guidelineslisted

htmx 4.0 development guidelines for attributes, explicit inheritance, triggers, targets, swap modes (incl. morph), hx-status error handling, forms, SSE/WebSocket streaming, extensions, security/CSP, response headers, and 2.x migration. Use when writing or reviewing hypermedia-driven UI built with htmx.
NomadicDaddy/aidd · ★ 1 · Code & Development · score 60
Install: claude install-skill NomadicDaddy/aidd
# htmx Guidelines > **Version Requirements**: htmx **4.0.0-beta6** or higher (the fetch()-based v4 line is the adopted > target; the 2.x line is legacy/maintenance) > **CDN (minified, default)**: `https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-beta6` > **CDN (unminified)**: `https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-beta6/dist/htmx.js` > **bun**: `bun add htmx.org@4.0.0-beta6` > > _Target htmx **4** and pin the **exact** version (no `^` ranges) — v4 is in beta and betas have > renamed events between releases. Prefer vendoring the file (self-hosted) over CDN so CSP can stay > `script-src 'self'` and upgrades are deliberate. For existing 2.x codebases, see > [Migrating from htmx 2.x](#migrating-from-htmx-2x)._ ## Core Principles 1. Keep markup minimal and semantic 2. Use built-in HTTP methods (GET, POST, PUT, PATCH, DELETE) appropriately 3. Prefer server-side state management over client-side state 4. Target specific elements for updates instead of full page refreshes 5. Follow progressive enhancement patterns 6. Implement proper security measures 7. Use HATEOAS and the hypermedia-driven application paradigm 8. Be explicit: put `hx-target`/`hx-swap` on the triggering element; opt into inheritance deliberately with `:inherited` ## What Changed in 4.0 | Area | htmx 4 behavior | | ----------- | ----------------------------------------------------------------------------------------