Run any Skill in Manus with one click

htmx

Stars56

Forks3

UpdatedJune 13, 2026 at 20:48

Implements HTMX interactions, configures swap behaviors, debugs hx-* requests, and builds hypermedia-driven UI components. Use when tasks involve hx-* attributes, HTMX AJAX requests, swap strategies, server-sent events, WebSockets, or hypermedia-driven UIs.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

damusix

damusix/skills

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

File Explorer

10 files

SKILL.md

readonly

name	htmx
description	Implements HTMX interactions, configures swap behaviors, debugs hx-* requests, and builds hypermedia-driven UI components. Use when tasks involve hx-* attributes, HTMX AJAX requests, swap strategies, server-sent events, WebSockets, or hypermedia-driven UIs.

HTMX

Use this skill for HTMX implementation and integration. Covers htmx 2.x (current stable) and htmx 4.x (beta). Reference files are annotated with [htmx 4], [htmx 4 change], and [htmx 4 removed] admonitions. Read only the reference file(s) needed for the task.

Quick Start

Identify the domain of the task (attributes, requests, swapping, events, patterns).
Open the matching file from references/.
Implement using HTML-first, hypermedia-driven patterns.
Validate that server responses return HTML fragments, not JSON.

Minimal example — a button that loads content via GET:

<button hx-get="/contacts" hx-target="#results" hx-swap="innerHTML">
    Load Contacts
</button>
<div id="results"></div>

The server endpoint (/contacts) must return an HTML fragment, not JSON:

<!-- Server response (HTML fragment, no <html>/<body> wrappers) -->
<ul>
    <li>Alice</li>
    <li>Bob</li>
</ul>

The default swap is innerHTML — the response replaces the target's children. Use hx-swap="outerHTML" to replace the target element itself.

Critical Rules

HTML responses - HTMX expects HTML responses from the server, not JSON
Attribute inheritance - (v2) Most attributes inherit to children; use hx-disinherit or unset to stop. (v4) Inheritance is explicit — use :inherited suffix to opt in. Not inherited in either version: hx-trigger, hx-on*, hx-swap-oob, hx-preserve, hx-history-elt, hx-validate
Default swap is innerHTML - Always confirm the intended swap method
Form values auto-included - Non-GET requests automatically include the closest enclosing form's values
Progressive enhancement - Use hx-boost="true" — pages must work without JS
Escape user content - Escape all user-supplied content server-side to prevent XSS. Wrap areas rendering user-generated content with hx-disable to prevent HTMX processing of injected attributes
CSS lifecycle classes - HTMX adds/removes CSS classes during requests — use for transitions and indicators
data-prefix supported - All hx-* attributes can also be written as data-hx-* for HTML validation compliance
Stop polling with HTTP 286 - Server returns status 286 to stop every or load delay polling. Always use 286 for poll termination, not conditional client-side logic
Error swaps - (v2) Non-2xx responses are not swapped by default — add an htmx:beforeSwap listener to enable. (v4) All responses swap by default except 204/304 — use hx-status for per-code control
Decouple with HX-Trigger headers - Use HX-Trigger response headers to fire client-side events instead of hardcoding DOM element IDs in server responses
Detect HTMX requests server-side - Check the HX-Request header to serve HTML fragments for HTMX requests and full pages for direct browser requests. Set Vary: HX-Request for caching

Reference Map

All hx-* attributes, values, and modifiers: references/attributes.md
Triggers, headers, parameters, CSRF, caching, CORS: references/requests.md
Swap methods, targets, OOB swaps, morphing, view transitions: references/swapping.md
Events, JS API, configuration, extensions, debugging: references/events-api.md
Common UI patterns and examples: references/patterns.md
Official extensions (WS, SSE, Idiomorph, response-targets, head-support, preload): references/extensions.md
Gotchas, pitfalls, and practical guidance: references/gotchas.md
Cross-file index and routing: references/REFERENCE.md

Task Routing

Adding HTMX behavior to elements -> references/attributes.md
Configuring how/when requests fire -> references/requests.md
Controlling where/how responses render -> references/swapping.md
Handling events, JS interop, or config -> references/events-api.md
Building common UI patterns (search, infinite scroll, modals, etc.) -> references/patterns.md
Using WebSockets, SSE, morphing, preloading, response targeting, or head merging -> references/extensions.md
Avoiding common pitfalls, accessibility, error handling, architecture decisions -> references/gotchas.md
Cross-cutting concerns or architecture -> references/REFERENCE.md then domain-specific files

More from this repository

same repository

cli-building

damusix/skills

Use when building TypeScript CLIs. Guides command structure, interactive prompts, and tab completion using citty, `@clack/prompts`, and `@bomb.sh/tab` — and shipping them: CI gates, versioning (Changesets / release-please), and npm or single-binary release.

2026-06-1656

arm-bandits-expert

damusix/skills

Implements, evaluates, and deploys multi-armed bandit algorithms — including Thompson Sampling, UCB, epsilon-greedy, LinUCB, EXP3, and contextual bandits. Covers algorithm selection, experiment harnesses, offline evaluation (IPS, Doubly Robust), infrastructure patterns, and correctness verification. Use when the user asks about multi-armed bandits, exploration-exploitation tradeoffs, adaptive experiments, A/B testing alternatives, online optimization, bandit-based recommendation or personalization systems, or contextual bandits.

2026-06-1356

ast-grep

damusix/skills

AST-based code search, lint, and rewrite using ast-grep. Use when finding code patterns structurally (not textually), writing lint rules, building codemods, or migrating API usage across a codebase. Prefer over regex grep when the match target is a syntactic construct (function call, import, class field, assignment).

2026-06-1356

ghost-theme

damusix/skills

Build, customize, and deploy Ghost CMS themes. Use whenever the user mentions Ghost themes, Ghost CMS, Handlebars templates (.hbs), Ghost Admin, membership/subscription integration, custom settings, or the content API — even without saying "theme". Trigger on: building a blog theme, creating a Ghost site, editing .hbs templates, member-only content, hero sections, routing (routes.yaml), image optimization, dark mode, search, deploy, gscan validation, JSON-LD/SEO, or any mention of {{ghost_head}}, {{ghost_foot}}, {{#foreach}}, {{#get}}, {{img_url}}, {{asset}}, @custom, @member, or Portal. Also use to modify, extend, or debug an existing theme. Also trigger on Koenig editor cards and .kg-* card styling (kg-image-card, kg-gallery-card, kg-bookmark-card, kg-callout-card, kg-toggle-card, kg-header-card, kg-signup-card), card_assets, cards.min.css, and breakout/wide/full-width card layout.

2026-06-1356

google-zx-scripting

damusix/skills

Writes and executes JavaScript-based shell scripts using Google's zx library. Use when writing shell scripts, automation, build tools, file processing, CLI tools, deployment scripts, data pipelines, or batch operations. Also covers piping, streams, parallel execution, retries, cross-platform scripting, built-in fs utilities, and minimist argument parsing.

2026-06-1356

hapi

damusix/skills

Creates, configures, and debugs `@hapi/hapi` servers — implements routes, plugins, auth schemes, validation, caching, and request lifecycle hooks. Use when building HTTP APIs, setting up stale-while-revalidate caching, registering server methods, configuring views, managing startup sequences, or troubleshooting response marshalling.

2026-06-1356

name	htmx
description	Implements HTMX interactions, configures swap behaviors, debugs hx-* requests, and builds hypermedia-driven UI components. Use when tasks involve hx-* attributes, HTMX AJAX requests, swap strategies, server-sent events, WebSockets, or hypermedia-driven UIs.

HTMX

Quick Start

Identify the domain of the task (attributes, requests, swapping, events, patterns).
Open the matching file from references/.
Implement using HTML-first, hypermedia-driven patterns.
Validate that server responses return HTML fragments, not JSON.

Minimal example — a button that loads content via GET:

<button hx-get="/contacts" hx-target="#results" hx-swap="innerHTML">
    Load Contacts
</button>
<div id="results"></div>

The server endpoint (/contacts) must return an HTML fragment, not JSON:

<!-- Server response (HTML fragment, no <html>/<body> wrappers) -->
<ul>
    <li>Alice</li>
    <li>Bob</li>
</ul>

The default swap is innerHTML — the response replaces the target's children. Use hx-swap="outerHTML" to replace the target element itself.

Critical Rules

HTML responses - HTMX expects HTML responses from the server, not JSON
Attribute inheritance - (v2) Most attributes inherit to children; use hx-disinherit or unset to stop. (v4) Inheritance is explicit — use :inherited suffix to opt in. Not inherited in either version: hx-trigger, hx-on*, hx-swap-oob, hx-preserve, hx-history-elt, hx-validate
Default swap is innerHTML - Always confirm the intended swap method
Form values auto-included - Non-GET requests automatically include the closest enclosing form's values
Progressive enhancement - Use hx-boost="true" — pages must work without JS
Escape user content - Escape all user-supplied content server-side to prevent XSS. Wrap areas rendering user-generated content with hx-disable to prevent HTMX processing of injected attributes
CSS lifecycle classes - HTMX adds/removes CSS classes during requests — use for transitions and indicators
data-prefix supported - All hx-* attributes can also be written as data-hx-* for HTML validation compliance
Stop polling with HTTP 286 - Server returns status 286 to stop every or load delay polling. Always use 286 for poll termination, not conditional client-side logic
Error swaps - (v2) Non-2xx responses are not swapped by default — add an htmx:beforeSwap listener to enable. (v4) All responses swap by default except 204/304 — use hx-status for per-code control
Decouple with HX-Trigger headers - Use HX-Trigger response headers to fire client-side events instead of hardcoding DOM element IDs in server responses
Detect HTMX requests server-side - Check the HX-Request header to serve HTML fragments for HTMX requests and full pages for direct browser requests. Set Vary: HX-Request for caching

Reference Map

All hx-* attributes, values, and modifiers: references/attributes.md
Triggers, headers, parameters, CSRF, caching, CORS: references/requests.md
Swap methods, targets, OOB swaps, morphing, view transitions: references/swapping.md
Events, JS API, configuration, extensions, debugging: references/events-api.md
Common UI patterns and examples: references/patterns.md
Official extensions (WS, SSE, Idiomorph, response-targets, head-support, preload): references/extensions.md
Gotchas, pitfalls, and practical guidance: references/gotchas.md
Cross-file index and routing: references/REFERENCE.md

Task Routing

Adding HTMX behavior to elements -> references/attributes.md
Configuring how/when requests fire -> references/requests.md
Controlling where/how responses render -> references/swapping.md
Handling events, JS interop, or config -> references/events-api.md
Building common UI patterns (search, infinite scroll, modals, etc.) -> references/patterns.md
Using WebSockets, SSE, morphing, preloading, response targeting, or head merging -> references/extensions.md
Avoiding common pitfalls, accessibility, error handling, architecture decisions -> references/gotchas.md
Cross-cutting concerns or architecture -> references/REFERENCE.md then domain-specific files