agentmods.dev

htmx

htmx is a skill for Claude Code from piyiotisk/htmx-skills. It costs 83 tokens per session (3,182 once invoked), scanned A, original, MIT.

A guide for using htmx, a tool that makes HTML pages interactive by letting elements send requests and replace parts of the page with HTML returned by the server.

In plain words
What is it for?
Use it to write or review htmx features such as live search, inline editing, delete actions, and interfaces driven by AJAX, server-sent events, or WebSockets.
Why use it?
It avoids building separate client-side code and JSON APIs for many interactive page updates. The page can keep its behavior in HTML attributes while the server keeps the application state.

Skill for Claude Code

Written for Claude Code: shipped in a Claude Code plugin. Also seen: mentions Claude Code.

Part of the htmx plugin — 1 skill shipped together

not rated 7repo 2mo ago A scan 83 tokens original MIT

Good fit Use it to write or review htmx features such as live search, inline editing, delete actions, and interfaces driven by AJAX, server-sent events, or WebSockets.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/piyiotisk/htmx-skills/htmx
View source ↗ piyiotisk/htmx-skills
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add piyiotisk/htmx-skills --skill htmx
Clone the repo
git clone --depth 1 https://github.com/piyiotisk/htmx-skills

Made for: Claude Code.

Or install htmx, the plugin that ships this one along with the rest of its 1 skill.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for htmx

README.md
[![agentmods](https://agentmods.dev/badge/skills/piyiotisk/htmx-skills/htmx.svg)](https://agentmods.dev/skills/piyiotisk/htmx-skills/htmx)
Your own site
<a href="https://agentmods.dev/skills/piyiotisk/htmx-skills/htmx"><img src="https://agentmods.dev/badge/skills/piyiotisk/htmx-skills/htmx.svg" alt="Measured on agentmods" height="20"></a>
Per session 83 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,182 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00083 $0.03182
Opus 5 $0.00042 $0.01591
Sonnet 5 $0.00017 $0.00636
Haiku 4.5 $0.00008 $0.00318

Measured 8d ago against content hash 8d61a8761bd9, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-08, from the pricing page.

Security

Grade A, and why

htmx scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/htmx/SKILL.md · 188 lines

How it starts

The opening of the file, as written. The whole thing — 188 lines — stays where its author put it; the contents beside it link to each section on GitHub.

htmx

htmx lets any element issue an AJAX request on any event using any HTTP verb, and swap the returned HTML into any target. The server returns HTML fragments, not JSON. Keep logic in HTML attributes (Locality of Behavior) and keep state on the server (HATEOAS).

Core Mental Model

  1. An element is triggered by an event (hx-trigger).
  2. It issues an HTTP request via hx-get / hx-post / hx-put / hx-patch / hx-delete.
  3. The server responds with an HTML fragment.
  4. htmx swaps that HTML into a target (hx-target) using a swap strategy (hx-swap).
<button hx-post="/clicked" hx-trigger="click" hx-target="#out" hx-swap="outerHTML">
  Click Me!
</button>
<div id="out"></div>

You can use the data-hx-* prefix if you need valid-by-DTD HTML (e.g. data-hx-post).

Example usage

Invoke explicitly when starting htmx work (Claude Code: /htmx:htmx).

Task Example prompt
Live search "Add debounced hx-get search swapping into #results."
Inline edit "Click Edit replaces this card with a form; Cancel restores it."
Delete + counter "Delete row with hx-delete and OOB-update #contact-count."
Validation UX "422 errors in #form-errors, success replaces the form."
Boosted nav "Boost #main links but keep sidebar PDFs as full page loads."
Code review "Review this template for htmx inheritance and XSS issues."

For full HTML + server response examples, see examples.md. For pattern recipes, see references/examples/.

Installing

CDN (fastest start; pin the version, consider self-hosting in production):

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/htmx.min.js"
  integrity="sha384-H5SrcfygHmAuTDZphMHqBJLc3FhssKjG7w/CeCpFReSfwBWDTKpkzPP8c+cLsK+V"
  crossorigin="anonymous"></script>

npm: npm install [email protected]. With bundlers, also expose it globally if needed: window.htmx = require('htmx.org').

Read the full file on GitHub · 188 lines

Files

What ships with it

60 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 8d ago First seen · 188 lines · 83 tokens per session scan A 8d61a8761bd9

Subscribe to this mod's changes

htmx is a skill published in the GitHub repository piyiotisk/htmx-skills (7 stars, last pushed 2mo ago), licensed MIT. It adds 83 tokens to every session and 3,182 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Backend and APIsFrontend
Related

Other skills, from other repositories

copilotkit-upgrade

Use when migrating a CopilotKit v1 application to v2 -- updating package imports, replacing deprecated hooks and components, switching from GraphQL runtime to AG-UI protocol runtime, and resolving breaking API changes.

CopilotKit/CopilotKit · 48 tokens

nextjs-pages-router

Set up tRPC in Next.js Pages Router with createNextApiHandler, createTRPCNext, withTRPC HOC, SSR via ssr option and ssrPrepass, SSG via createServerSideHelpers with getStaticProps, and server-side helpers for getServerSideProps prefetching.

trpc/trpc · 67 tokens

with-tanstack-query

Compose Angular Query with signal-owned Table filtering, sorting, and pagination state using reactive query options, manual row-model boundaries, direct query data, server counts, and valid injection context.

TanStack/table · 42 tokens

auth-web-cloudbase

CloudBase Web Authentication Quick Guide for frontend integration after auth-tool has already been checked. Provides concise and practical Web authentication solutions with multiple login methods and complete user management.

TencentCloudBase/CloudBase-AI-Toolkit · 38 tokens

service-digital-engagement-channel-configure

Configures and deploys enhanced chat Messaging Channels for Messaging for In-App and Web (MIAW). Use when the user needs to create, deploy, and activate a messaging channel configured with Omni-Channel Flow, Omni-Channel Queue, User, or Agentforce Service Agent routing. Generates MessagingChannel metadata, deploys it…

forcedotcom/sf-skills · 173 tokens

om-system-extension

Extend installed Open Mercato modules through UMES enrichers, interceptors, mutation guards, widgets, menus, entity extensions, events, component/page replacements, and overrides. Use for "extend core", "add field/column/action", "hide page", "intercept API", "UMES", or "rozszerz moduł".

open-mercato/open-mercato · 73 tokens