skills.rest
natelandau
natelandauCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

htmx-expert

Guides writing, debugging, and reviewing htmx 2.x attributes and hypermedia-driven patterns.

Updated May 9, 2026
Search Tags:#web development#ajax#hypermedia#htmx#server-side rendering#html fragments#hx-swap
One-click install
npx skills add https://github.com/natelandau/cc-plugin --skill htmx-expert-natelandau
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: htmx-expert
Source: https://github.com/natelandau/cc-plugin/tree/main/plugins/natelandau-toolkit/skills/htmx-expert
Command: npx skills add https://github.com/natelandau/cc-plugin --skill htmx-expert-natelandau

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building interactive web interfaces with htmx requires knowing dozens of attributes, swap strategies, event lifecycles, and server response conventions, and mistakes like wrong trigger syntax or missing out-of-band swap handling cause subtle bugs that are hard to diagnose. ## Core Features & Use Cases - Attribute Reference: Covers hx-get, hx-post, hx-swap, hx-target, hx-trigger, hx-boost, hx-sync, and request/response control attributes with working HTML examples. - Implementation Patterns: Provides ready patterns for active search, infinite scroll, polling, form submission, out-of-band swaps, loading indicators, and view transitions. - Server-Side Guidance: Documents HX-Request header detection, partial template conventions, response headers like HX-Trigger and HX-Redirect, and CSRF/security configuration. - Use Case: When a form submission should update only part of a page with a loading spinner and error targeting, the skill supplies the correct combination of hx-post, hx-indicator, hx-disabled-elt, and the response-targets extension. ## Quick Start Ask the assistant to add htmx-powered active search with debounced input and a loading indicator to your page.

Frequently Asked Questions about htmx-expert

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add AJAX requests to HTML with htmx?▼

Add attributes like hx-get or hx-post to any element, point hx-target at the element to update, and set hx-swap for how content is inserted. The server responds with an HTML fragment instead of JSON, and htmx swaps it into the page.

How do I build active search with htmx?▼

Use hx-get on an input with hx-trigger="input changed delay:300ms, search" to debounce keystrokes, hx-target pointing at a results container, and hx-sync="this:abort" to cancel stale in-flight requests. The server returns result rows as an HTML fragment.

What changed in htmx 2.x from 1.x?▼

Extensions like SSE and WebSockets moved to separate packages loaded via script tags, hx-on uses the hx-on: prefix syntax with double colons for htmx events, selfRequestsOnly defaults to true, and IE support was dropped. A compatibility extension exists for migration.

How do htmx out-of-band swaps work?▼

Add hx-swap-oob="true" to elements in the server response, and htmx swaps them by matching id regardless of the main hx-target. This lets one response update multiple page regions like notifications and counters alongside the primary content.

Why is my htmx request not firing or swapping content?▼

Common causes include serving over file:// instead of HTTP, missing name attributes on inputs, unstable element IDs breaking targets, or wrong hx-on syntax in 2.x. Run htmx.logAll() and inspect HX-Request and HX-Target headers in the Network tab.

Does htmx work with CSRF protection and security headers?▼

Yes, include CSRF tokens via hx-headers on the body element, set htmx.config.selfRequestsOnly to true to restrict request origins, and disable allowScriptTags. Server-side template escaping remains required to prevent XSS in swapped fragments.

Related Skills

Explore More Software Engineering Skills→
organvm-i-theoriaorganvm-i-theoria

htmx-interaction-patterns

Build dynamic web interfaces with htmx using server-rendered HTML fragments and attribute-driven requests.

Official
Intermediate
oornneryoornnery

htmx

Automate hypermedia-driven UI updates in server-rendered applications using htmx.

Community
Intermediate
asarchamiasarchami
1

htmx-spa-conventions

Enforces server-driven HTMX and Alpine.js conventions for HTML-over-the-wire web interfaces.

Community
Intermediate
syntropic137syntropic137

playwright-debug

Capture runtime errors, network failures, and DOM state from web UIs with Playwright.

Official
Intermediate