htmx-expert

Enforce server-driven HTMX architecture returning HTML fragments instead of JSON.

16|2|Updated Feb 17, 2026
One-click install
npx skills add https://github.com/ercan-er/htmx-claude-skill --skill htmx-expert-ercan-er
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: htmx-expert
Source: https://github.com/ercan-er/htmx-claude-skill/tree/main
Command: npx skills add https://github.com/ercan-er/htmx-claude-skill --skill htmx-expert-ercan-er

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Modern AI agents often default to JSON APIs or rebuild DOM client-side, so this Skill forces them into server-driven HTMX workflows with HTML-over-the-wire fragments, fragment naming discipline, swap strategy rigor, and a security-first mindset.

Core Features & Use Cases

  • HTML-over-the-wire enforcement: Requires every HX request to return focused fragments, detect HX-Request, preserve hx-swap semantics, and avoid SPA-style DOM hacks.
  • Guided server-driven UI reference: Aggregates activation rules plus deep docs on attributes, triggers, swaps, events, headers, server response patterns, validation, security, performance, and anti-patterns so agents stay in their lane.
  • Production readiness playbook: Includes enterprise principles, Express demo patterns, and checklists for CSRF, history management, accessibility, caching, and monitoring to migrate React/Vue CRUD apps to progressive HTMX fragments.

Quick Start

Ask the skill to audit your /todos endpoint and ensure every HTMX request returns a fragment with HX-Request detection, proper hx-swap, and CSRF plus history guidance.

Frequently Asked Questions about htmx-expert

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

FAQPage Schema
How do I make HTMX CRUD endpoints return HTML fragments instead of JSON?

HTMX endpoints should return server-rendered HTML fragments instead of JSON to maintain a server-driven architecture. This requires detecting the HX-Request header and returning focused HTML fragments for browser swaps.

What is the best way to handle CSRF protection in an HTMX progressive enhancement application?

CSRF protection in HTMX requires including anti-forgery tokens in your request headers. You must configure your server to validate these tokens on every HX-Request to secure server-driven fragment swaps against cross-site attacks.

How do I migrate a React or Vue CRUD app to server-driven HTMX fragments?

Migrating React or Vue CRUD apps to HTMX involves replacing client-side DOM rendering with server-driven HTML-over-the-wire fragments. You must implement HX-Request detection, proper hx-swap strategies, and history management for progressive enhancement.

Why does my HTMX swap strategy break browser history navigation?

HTMX swap strategies break browser history when hx-swap semantics are misconfigured or DOM manipulations rely on SPA-style hacks. You must preserve proper swap attributes and manage history updates server-side to avoid navigation issues.

Does HTMX work with Express server patterns for fragment rendering?

HTMX works seamlessly with Express server patterns by returning HTML fragments directly from routes. You can use Express demos to implement HX-Request detection, CSRF validation, and focused fragment rendering for progressive enhancement.

When should I not use HTML-over-the-wire for fragment swaps?

You should not use HTML-over-the-wire when anti-patterns like SPA-style DOM hacks or improper hx-swap semantics appear. Avoid fragment rendering if your UI requires complex client-side state management that breaks server-driven validation rules.