New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Htmx Interactivity

by hashgraph-online in hashgraph-online/awesome-codex-plugins

Coordinate htmx with lightweight browser-side interactivity.

MITAuto-check passed

Install Htmx Interactivity

skills CLI
$ npx skills add hashgraph-online/awesome-codex-plugins --skill htmx-interactivity -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install hashgraph-online/awesome-codex-plugins htmx-interactivity --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/hashgraph-online/awesome-codex-plugins.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/LVTD-LLC/skills/skills/htmx-interactivity .claude/skills/htmx-interactivity && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
htmx-interactivity
GitHub stars
1.2k
Token cost
~1.2k tokens
SKILL.md length
601 words
Files
3 (incl. assets)
Skills in repo
686
Repo updated
First seen
Licence
MIT

At a glance

Coordinate htmx with lightweight browser-side interactivity.

  • Works in 4 steps: The htmx request submits to the server. → The server returns HTML and optionally… → Alpine, _hyperscript, or plain… → …
  • Adding Alpine.js
  • SKILL.md covers Ownership Rules, Use Alpine When, Use _hyperscript When and Event Boundary Pattern, plus 6 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Htmx Interactivity is an agent skill from hashgraph-online/awesome-codex-plugins. Coordinate htmx with lightweight browser-side interactivity. Use when adding Alpine.js, hyperscript, local UI state, custom events, dialogs, transitions, keyboard behavior, or browser-only state around htmx swaps in a server-rendered app.

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including assets (for example `agents/openai.yaml`). Compatibility notes: Codex, Claude Code, and other Agent Skills-compatible clients.

The repository describes itself as: A curated list of awesome OpenAI Codex / ChatGPT plugins, skills, and resources. The 1 Codex Marketplace. See live plugins at: https://hol.org/plugins/best-codex-plugins. The licence is MIT.

When your agent uses it

  • Adding Alpine.js
  • Keyboard behavior
  • Browser-only state around htmx swaps in a server-rendered app

Example prompts

  • “/htmx-interactivity”

Requirements

  • Compatibility (from SKILL.md): Codex, Claude Code, and other Agent Skills-compatible clients.

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. The htmx request submits to the server.
  2. The server returns HTML and optionally triggers a domain event.
  3. Alpine, _hyperscript, or plain JavaScript listens for the event.
  4. Local UI state updates, such as closing a modal or focusing a saved row.

What it can do on your machine

Read from SKILL.md and the folder at commit 78497e5. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are html).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Codex, Claude Code, and other Agent Skills-compatible clients.

    From compatibility in the SKILL.md frontmatter.

Context cost

Htmx Interactivity loads about 1.2k tokens when it runs. Until then it costs about 65 tokens; SKILL.md has 601 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~65
When it runs · the whole SKILL.md, loaded when a task matches
~1.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from hashgraph-online/awesome-codex-plugins at commit 78497e5, republished under its MIT licence (© hashgraph-online). 601 words, ~1,248 tokens.

Download SKILL.mdSave it as .claude/skills/htmx-interactivity/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
htmx-interactivity
description
Coordinate htmx with lightweight browser-side interactivity. Use when adding Alpine.js, _hyperscript, local UI state, custom events, dialogs, transitions, keyboard behavior, or browser-only state around htmx swaps in a server-rendered app.
compatibility
Codex, Claude Code, and other Agent Skills-compatible clients.
license
MIT
metadata.version
0.1.0
metadata.displayName
htmx Interactivity
metadata.category
Frontend
metadata.tags
htmx,alpinejs,hyperscript,frontend,ui-state

htmx Interactivity

Use this skill when htmx handles server trips but the page still needs local browser behavior. Keep the ownership line explicit so server-rendered HTML and client-side state do not fight each other.

Ownership Rules

  • htmx owns server requests, fragment swaps, history updates, and server-triggered events.
  • The server owns durable state, validation, permissions, and canonical HTML.
  • Alpine or plain JavaScript owns local state such as menu open/closed, tabs, disclosure state, temporary filters, focus helpers, and small transitions.
  • _hyperscript is best for short event-driven behaviors attached to markup.
  • Do not mirror the same durable state in both server data and a client store unless there is a reconciliation plan.

Use Alpine When

  • A component has local state that changes without a server request.
  • You need a dropdown, popover, modal shell, tab set, disclosure, or preview toggle.
  • You need to coordinate htmx lifecycle events with UI state.
  • The state naturally belongs near the markup and is simple enough to read inline.

Keep persistent Alpine state outside htmx targets that will be replaced. If htmx swaps the element that owns x-data, that state resets.

Use _hyperscript When

  • The behavior is a small event script, such as adding a class, waiting, then removing it.
  • The script reads like a local interaction, not application business logic.
  • The team accepts _hyperscript syntax as part of the template layer.

Avoid _hyperscript for complex state machines, security-sensitive logic, large data transforms, or behavior that needs substantial tests.

Event Boundary Pattern

Use events as the bridge between server results and local browser state:

  1. The htmx request submits to the server.
  2. The server returns HTML and optionally triggers a domain event.
  3. Alpine, _hyperscript, or plain JavaScript listens for the event.
  4. Local UI state updates, such as closing a modal or focusing a saved row.

Prefer domain event names over implementation names:

html
<section x-data="{ open: true }" @profile-saved.window="open = false">
  <form hx-post="/profile" hx-target="#profile-panel" hx-swap="outerHTML">
    ...
  </form>
</section>

htmx Lifecycle Hooks

Use lifecycle events for cross-cutting behavior:

  • htmx:configRequest for headers such as CSRF when the framework needs them.
  • htmx:beforeRequest and htmx:afterRequest for instrumentation and loading behavior that attributes cannot express.
  • htmx:beforeSwap for exceptional status handling.
  • htmx:afterSwap or htmx:load for initializing third-party widgets in swapped content.
  • WebSocket extension events only in code that owns realtime behavior.

Prefer htmx attributes such as hx-indicator and hx-disabled-elt before writing lifecycle JavaScript.

Show full SKILL.md (226 more words)Show less

Swaps And Local State

  • Keep long-lived local state outside replaceable htmx targets.
  • If a target contains initialized third-party widgets, define how they are destroyed or re-initialized.
  • After injecting htmx-enabled markup outside an htmx request, use htmx.process from the htmx-js-api skill.
  • Avoid global listeners that accumulate every time a fragment is swapped.

Data From The Server

  • Prefer HTML attributes or inert JSON script blocks for server-provided data.
  • Escape all server-rendered values before they enter JavaScript expressions.
  • Use text binding APIs for untrusted display text.
  • Avoid embedding secrets, signed tokens, or authorization facts in local state.

Accessibility

  • Use real buttons for local actions.
  • Bind aria-expanded, aria-controls, aria-selected, and aria-hidden from local state.
  • Preserve focus when opening/closing dialogs and after successful htmx swaps.
  • Support Escape for dismissible overlays.
  • Avoid replacing focused elements without a plan to move focus somewhere sensible.

CSP And Security

Alpine, _hyperscript, inline event attributes, and hx-on can all affect Content Security Policy. Use htmx-security when adding or tightening CSP, accepting user-authored HTML, or choosing CSP-compatible builds.

Avoid

  • Do not restart Alpine after every htmx swap.
  • Do not put durable server truth in a client store just to avoid a small htmx request.
  • Do not let local scripts bypass server authorization or validation.
  • Do not place broad event handlers in fragments that may be swapped repeatedly.
  • Do not use x-html or equivalent APIs for untrusted content.

© hashgraph-online, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (assets) in plugins/LVTD-LLC/skills/skills/htmx-interactivity of hashgraph-online/awesome-codex-plugins.

  • SKILL.md
  • agents/openai.yaml
  • assets/icons8-code.svg

Open the folder on GitHubat commit 78497e5

Compare with similar skills

Htmx Interactivity next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Htmx Interactivity compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Htmx Interactivity this skillhashgraph-online/awesome-codex-plugins1.2k—~1.2kAutomated safety check: PassMIT
Agent Consensus Coordinatorruvnet/ruflo74k3 repos~3.2kAutomated safety check: PassMIT
Agent Mesh Coordinatorruvnet/ruflo74k3 repos~3.2kAutomated safety check: PassMIT
Agent Queen Coordinatorruvnet/ruflo74k3 repos~1.3kAutomated safety check: PassMIT
Agent Adaptive Coordinatorruvnet/ruflo74k2 repos~4kAutomated safety check: PassMIT
Agent Hierarchical Coordinatorruvnet/ruflo74k2 repos~2.8kAutomated safety check: PassMIT

Similar skills

  • Agent Consensus Coordinator

    ruvnet/ruflo

    Agent skill for consensus-coordinator - invoke with $agent-consensus-coordinator

    74k GitHub starsUsed in 3 repos~3.2k tokens
    Agent WorkflowsAuto-check passed

  • Agent Mesh Coordinator

    ruvnet/ruflo

    Agent skill for mesh-coordinator - invoke with $agent-mesh-coordinator

    74k GitHub starsUsed in 3 repos~3.2k tokens
    Agent WorkflowsAuto-check passed

  • Agent Queen Coordinator

    ruvnet/ruflo

    Agent skill for queen-coordinator - invoke with $agent-queen-coordinator

    74k GitHub starsUsed in 3 repos~1.3k tokens
    Auto-check passed

  • Agent Adaptive Coordinator

    ruvnet/ruflo

    Agent skill for adaptive-coordinator - invoke with $agent-adaptive-coordinator

    74k GitHub starsUsed in 2 repos~4k tokens
    Data & AnalyticsAuto-check passed

  • Agent Hierarchical Coordinator

    ruvnet/ruflo

    Agent skill for hierarchical-coordinator - invoke with $agent-hierarchical-coordinator

    74k GitHub starsUsed in 2 repos~2.8k tokens
    Agent WorkflowsAuto-check passed

  • Agent Memory Coordinator

    ruvnet/ruflo

    Agent skill for memory-coordinator - invoke with $agent-memory-coordinator

    74k GitHub starsUsed in 2 repos~1.2k tokens
    Agent WorkflowsAuto-check passed

More from hashgraph-online/awesome-codex-plugins

All 686 skills in this repo

  • Anime Reaction Gif

    hashgraph-online/awesome-codex-plugins

    Create original anime-style reaction stickers as looping GIFs and MP4 previews, using generated character pose sheets and timed key poses.

    1.2k GitHub stars~922 tokensUpdated today
    Auto-check passed

  • Calibredb

    hashgraph-online/awesome-codex-plugins

    Manage and query Calibre libraries with the calibredb CLI (local paths or Calibre Content server URLs).

    1.2k GitHub stars~1k tokensUpdated today
    Auto-check passed

  • Rust API Test Harness

    hashgraph-online/awesome-codex-plugins

    A skill your agent uses when adding, changing, testing, or debugging Rust HTTP APIs and services, especially when Codex needs black-box integration tests, random-port app startup, real database test…

    1.2k GitHub stars~1.7k tokensUpdated today
    Auto-check passed

  • Art

    hashgraph-online/awesome-codex-plugins

    Make a studio's game look like something at build time — a cover from a real frame of the game (free), painted covers, backdrops, textures and character plates from image models through the…

    1.2k GitHub stars~2.4k tokensUpdated today
    Auto-check passed

  • Game Balance Economy

    hashgraph-online/awesome-codex-plugins

    Balance game difficulty, resources, rewards, probability, progression, economies, and dominant strategies.

    1.2k GitHub stars~618 tokensUpdated today
    Auto-check passed

  • Manuscript Engagement Analytics

    hashgraph-online/awesome-codex-plugins

    Analyze nonfiction manuscripts for reader engagement signals, including heading-level word counts, slow starts, long slogs, weak takeaway titles, value pacing, beta-reader comment dropoff, and…

    1.2k GitHub stars~875 tokensUpdated today
    Auto-check passed

Questions about Htmx Interactivity

What does Htmx Interactivity do?

Coordinate htmx with lightweight browser-side interactivity. Htmx Interactivity is an agent skill from hashgraph-online/awesome-codex-plugins. Coordinate htmx with lightweight browser-side interactivity.

When should I use Htmx Interactivity?

Htmx Interactivity fits situations like: adding Alpine.js; keyboard behavior; browser-only state around htmx swaps in a server-rendered app.

How do I install Htmx Interactivity in Claude Code?

Run `npx skills add hashgraph-online/awesome-codex-plugins --skill htmx-interactivity -a claude-code`. Or copy the skill folder (plugins/LVTD-LLC/skills/skills/htmx-interactivity in hashgraph-online/awesome-codex-plugins) into .claude/skills/htmx-interactivity in your project. Claude Code loads it when a task matches its description.

How do I install Htmx Interactivity in Codex?

Run `npx skills add hashgraph-online/awesome-codex-plugins --skill htmx-interactivity -a codex`. Or copy the skill folder (plugins/LVTD-LLC/skills/skills/htmx-interactivity in hashgraph-online/awesome-codex-plugins) into .agents/skills/htmx-interactivity in your project. Codex loads it when a task matches its description.

Can I use Htmx Interactivity in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add hashgraph-online/awesome-codex-plugins --skill htmx-interactivity -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/htmx-interactivity, .gemini/skills/htmx-interactivity, .github/skills/htmx-interactivity and .opencode/skills/htmx-interactivity in your project.

What does Htmx Interactivity need to run?

SKILL.md names no scripts, command-line tools or credentials: Htmx Interactivity is instructions for the agent only. Compatibility (from SKILL.md): Codex, Claude Code, and other Agent Skills-compatible clients..

Does Htmx Interactivity access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Htmx Interactivity safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Htmx Interactivity use?

Htmx Interactivity is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Htmx Interactivity use?

About 1.2k tokens (SKILL.md is roughly 5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Htmx Interactivity?

Skills that share tags, products or a category with Htmx Interactivity: Agent Consensus Coordinator (ruvnet/ruflo, 74k stars), Agent Mesh Coordinator (ruvnet/ruflo, 74k stars), Agent Queen Coordinator (ruvnet/ruflo, 74k stars) and Agent Adaptive Coordinator (ruvnet/ruflo, 74k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Htmx Interactivity?

hashgraph-online (a GitHub organization) maintains it in hashgraph-online/awesome-codex-plugins, which has 1,242 GitHub stars. The repository holds 686 skills in this directory. The repository was last updated on October 8, 2026.

Source: hashgraph-online/awesome-codex-plugins on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.