New: 97,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 JS API

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

Use the htmx JavaScript API for imperative integration in server-rendered apps.

MITAuto-check passed

Install Htmx JS API

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

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

GitHub CLI
$ gh skill install hashgraph-online/awesome-codex-plugins htmx-js-api --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-js-api .claude/skills/htmx-js-api && 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-js-api
GitHub stars
1.2k
Token cost
~1k tokens
SKILL.md length
432 words
Files
3 (incl. assets)
Skills in repo
736
Repo updated
First seen
Licence
MIT

At a glance

Use the htmx JavaScript API for imperative integration in server-rendered apps.

  • Calling htmx.ajax
  • SKILL.md covers Decision Rule, Startup Configuration, DOM Helpers and Events, plus 5 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Htmx.removeClass

What it does

Htmx JS API is an agent skill from hashgraph-online/awesome-codex-plugins. Use the htmx JavaScript API for imperative integration in server-rendered apps. Use when calling htmx.ajax, htmx.process, htmx.trigger, htmx.on, htmx.off, htmx.onLoad, htmx.find, htmx.findAll, htmx.closest, htmx.addClass, htmx.removeClass, htmx.toggleClass, htmx.takeClass, configuring htmx.config, logging htmx events, or integrating non-htmx JavaScript with swapped content.

Its SKILL.md is about 1k 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.

It works with JavaScript. 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

  • Calling htmx.ajax
  • Htmx.removeClass
  • Htmx.toggleClass
  • Configuring htmx.config

Example prompts

  • “/htmx-js-api”

Requirements

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

What it can do on your machine

Read from SKILL.md and the folder at commit 16b4156. 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 javascript).

    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 JS API loads about 1k tokens when it runs. Until then it costs about 97 tokens; SKILL.md has 432 words of instructions outside code blocks.

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

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 16b4156, republished under its MIT licence (© hashgraph-online). 432 words, ~1,045 tokens.

Download SKILL.mdSave it as .claude/skills/htmx-js-api/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
htmx-js-api
description
Use the htmx JavaScript API for imperative integration in server-rendered apps. Use when calling htmx.ajax, htmx.process, htmx.trigger, htmx.on, htmx.off, htmx.onLoad, htmx.find, htmx.findAll, htmx.closest, htmx.addClass, htmx.removeClass, htmx.toggleClass, htmx.takeClass, configuring htmx.config, logging htmx events, or integrating non-htmx JavaScript with swapped content.
compatibility
Codex, Claude Code, and other Agent Skills-compatible clients.
license
MIT
metadata.version
0.1.0
metadata.displayName
htmx JS API
metadata.category
Frontend
metadata.tags
htmx,javascript,api,frontend,events

htmx JS API

Use this skill when declarative attributes are not enough. Prefer attributes first; reach for the JavaScript API to integrate with third-party widgets, dynamically injected markup, instrumentation, or programmatic request flows.

Decision Rule

Use htmx attributes when the behavior is visible in the HTML and tied to one element. Use the JS API when:

  • markup is inserted by non-htmx code and needs htmx processing;
  • an external library needs to trigger an htmx request or event;
  • event listeners must be registered centrally;
  • debugging requires htmx logging;
  • configuration must be set once during startup.

Startup Configuration

Set global config once before relying on htmx behavior. Common examples:

  • history behavior;
  • default swap style or delay when project-wide;
  • request timeout;
  • scroll/focus behavior;
  • security-sensitive options reviewed with htmx-security.

Keep config close to where htmx is loaded so there is one source of truth.

DOM Helpers

Use htmx DOM helpers for concise integration code:

NeedMethods
Find one elementhtmx.find, htmx.closest
Find many elementshtmx.findAll
Remove an elementhtmx.remove
Add a classhtmx.addClass
Remove a classhtmx.removeClass
Toggle a classhtmx.toggleClass
Make one element selectedhtmx.takeClass

Do not use helper calls to hide complex UI state that belongs in a component or server response.

Events

  • Use htmx.on for delegated or global listeners.
  • Use htmx.off when unregistering listeners from code that can mount/unmount.
  • Use htmx.trigger to bridge plain JavaScript events into htmx behavior.
  • Use htmx.onLoad for behavior that must run on newly loaded htmx content.
  • Prefer custom domain events for product interactions.

Example:

js
htmx.on("saved", function (event) {
  console.info("Saved", event.detail);
});

htmx.trigger("#results", "filters:changed");
Show full SKILL.md (184 more words)Show less

Programmatic Requests

Use htmx.ajax when code needs to initiate an htmx request while preserving htmx swap semantics.

js
htmx.ajax("GET", "/notifications", {
  target: "#notifications",
  swap: "innerHTML"
});

Before using htmx.ajax, ask whether a real link, button, or form with htmx attributes would be clearer and more accessible.

Processing Dynamic Markup

Use htmx.process(element) after non-htmx code injects markup that contains htmx attributes.

js
const panel = document.querySelector("#panel");
panel.innerHTML = htmlFromTrustedSource;
htmx.process(panel);

Only process trusted markup. If markup includes user content, review sanitization with htmx-security before insertion.

Logging And Debugging

  • Use htmx.logAll() temporarily while diagnosing event/request behavior.
  • Use htmx.logNone() after debugging.
  • Use a custom htmx.logger for structured local diagnostics.
  • Remove noisy logging before shipping unless the project has a deliberate debug mode.

Extensions And Transports

Use extension APIs only when a documented htmx extension or project-specific integration requires it. For WebSocket and SSE work, prefer htmx-realtime for transport design before writing extension code.

Avoid

  • Do not reimplement htmx with fetch() plus innerHTML.
  • Do not process untrusted HTML.
  • Do not bind duplicate event listeners every time a fragment loads.
  • Do not use imperative requests just to avoid writing a small form or link.
  • Do not change global htmx.config from feature code after the app has started.

© 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-js-api of hashgraph-online/awesome-codex-plugins.

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

Open the folder on GitHubat commit 16b4156

Compare with similar skills

Htmx JS API 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 JS API compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Htmx JS API this skillhashgraph-online/awesome-codex-plugins1.2k—~1kAutomated safety check: PassMIT
Code Review ChecklistshareAI-lab/learn-claude-code78k5 repos~1.1kAutomated safety check: PassMIT
Tailwindcss Developmentanonaddy/anonaddy4.9k10 repos~865Automated safety check: PassMIT
Figma use_figma Plugin API Ruleswarpdotdev/warp65k4 repos~4.4kAutomated safety check: PassAGPL-3.0
GSAP Core Animationgreensock/gsap-skills16k4 repos~3.7kAutomated safety check: PassMIT
JavaScript Concept Fact Checkerleonardomso/33-js-concepts67k1 repos~5kAutomated safety check: PassMIT

Similar skills

  • Code Review Checklist

    shareAI-lab/learn-claude-code

    Reviews code against a five-part checklist covering security, correctness, performance, maintainability and testing, and reports findings in a fixed format.

    78k GitHub starsUsed in 5 repos~1.1k tokens
    DevelopmentAuto-check passed

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

  • Figma use_figma Plugin API Rules

    warpdotdev/warp

    Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.

    65k GitHub starsUsed in 4 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • GSAP Core Animation

    greensock/gsap-skills

    Covers the GSAP core API for tweens, easing, staggers, defaults and matchMedia, and when to choose GSAP over CSS animations or other JavaScript animation libraries.

    16k GitHub starsUsed in 4 repos~3.7k tokens
    Frontend & DesignAuto-check passed

  • JavaScript Concept Fact Checker

    leonardomso/33-js-concepts

    Verifies the technical accuracy of JavaScript concept pages by checking code examples, MDN and ECMAScript claims and external links through a five-phase method.

    67k GitHub starsUsed in 1 repo~5k tokens
    Writing & ContentAuto-check passed

  • Scroll World Landing Page

    oso95/scroll-world

    Builds a scroll-driven landing page where a pre-rendered camera flies through connected AI-generated scenes, using Higgsfield for stills and video clips.

    9.7k GitHub starsUsed in 1 repo~12k tokens
    Frontend & DesignAuto-check: notes

More from hashgraph-online/awesome-codex-plugins

All 736 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 yesterday
    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 yesterday
    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 yesterday
    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 yesterday
    Auto-check passed

  • Calle

    hashgraph-online/awesome-codex-plugins

    Use CALL-E from Codex through the calle CLI. An agent skill from hashgraph-online/awesome-codex-plugins.

    1.2k GitHub stars~2.9k tokensUpdated yesterday
    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 yesterday
    Auto-check passed

Works with

Questions about Htmx JS API

What does Htmx JS API do?

Use the htmx JavaScript API for imperative integration in server-rendered apps. Htmx JS API is an agent skill from hashgraph-online/awesome-codex-plugins. Use the htmx JavaScript API for imperative integration in server-rendered apps.

When should I use Htmx JS API?

Htmx JS API fits situations like: calling htmx.ajax; htmx.removeClass; htmx.toggleClass; configuring htmx.config.

How do I install Htmx JS API in Claude Code?

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

How do I install Htmx JS API in Codex?

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

Can I use Htmx JS API 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-js-api -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-js-api, .gemini/skills/htmx-js-api, .github/skills/htmx-js-api and .opencode/skills/htmx-js-api in your project.

What does Htmx JS API need to run?

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

Does Htmx JS API 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 JS API 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 JS API use?

Htmx JS API 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 JS API use?

About 1k tokens (SKILL.md is roughly 4.2k 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 JS API?

Skills that share tags, products or a category with Htmx JS API: Code Review Checklist (shareAI-lab/learn-claude-code, 78k stars), Tailwindcss Development (anonaddy/anonaddy, 4.9k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars) and GSAP Core Animation (greensock/gsap-skills, 16k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Htmx JS API?

hashgraph-online (a GitHub organization) maintains it in hashgraph-online/awesome-codex-plugins, which has 1,232 GitHub stars. The repository holds 736 skills in this directory. The repository was last updated on October 6, 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.