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.