GitHub - piyiotisk/htmx-skills: Agent skill plugin for building hypermedia UIs with htmx (Cursor, Claude Code, Codex)

An open-source Agent Skills plugin that teaches AI coding agents how to build hypermedia-driven UIs with htmx.

The skill covers hx-* attributes, triggers, targets, swaps, out-of-band updates, extensions, security essentials, and ships the full official htmx reference docs under skills/htmx/references/.

Install

Cursor

Marketplace (after listing): search for htmx in Cursor Marketplace or Customize → Plugins.

From GitHub now:

git clone https://github.com/piyiotisk/htmx-skills.git ~/.cursor/plugins/local/htmx-skills

Or in Cursor: Customize → Plugins → Add from GitHub → piyiotisk/htmx-skills

Claude Code

Community marketplace (after approval): /plugin marketplace add anthropics/claude-plugins-community then /plugin install htmx@claude-community

From this repo now:

claude plugin marketplace add piyiotisk/htmx-skills
claude plugin install htmx@htmx-skills

Local test:

git clone https://github.com/piyiotisk/htmx-skills.git
claude --plugin-dir ./htmx-skills
# Skill: /htmx:htmx

Codex

From this repo:

git clone https://github.com/piyiotisk/htmx-skills.git
# Option A: install skill folder
cp -R htmx-skills/skills/htmx ~/.agents/skills/htmx

# Option B: add repo as a plugin marketplace (Codex reads .agents/plugins/marketplace.json)

In Codex, invoke with $htmx or ask the agent to use the htmx skill.

Example usage

Claude Code

After installing, invoke the skill:

Then ask for a specific pattern:

/htmx:htmx Add debounced live search on this input — hx-get /contacts/search,
swap results into #results, show a spinner with hx-indicator.

/htmx:htmx Delete button on each table row — hx-delete, closest tr target,
and OOB-update #contact-count in the same response.

/htmx:htmx Review this template for hx-boost inheritance bugs and missing
progressive-enhancement fallbacks.

Cursor / Codex

Mention the skill in chat:

• "Use the htmx skill to add inline edit on this contact card."
• "Use the htmx skill to wire delete-row + OOB count update."
• "Review this form for correct hx-sync and validation handling."

What the skill helps with

• hx-get, hx-post, hx-trigger, hx-target, hx-swap
• Server endpoints that return HTML fragments (not JSON)
• OOB swaps, boosted navigation, SSE/WebSocket extensions
• Debugging swap, history, and attribute-inheritance issues

Full worked examples (HTML + server responses): skills/htmx/examples.md

What's included

Development

This repo also contains internal eval workspace under .cursor/skills/htmx-workspace/ (not part of the published plugin).

Validate Claude plugin manifest:

claude plugin validate .
claude plugin validate . --strict

Attribution

Reference documentation under skills/htmx/references/ is derived from the htmx project documentation. Skill packaging and curation are MIT-licensed (see LICENSE).

License

MIT © Constantinos Pigiotis