htmx

HTMX HTML-first approach with AJAX attributes. Use for server-rendered interactivity.

7 stars

byG1Joshi

View on GitHub Installation ↓

Best use case

htmx is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

HTMX HTML-first approach with AJAX attributes. Use for server-rendered interactivity.

Teams using htmx should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/htmx/SKILL.md --create-dirs "https://raw.githubusercontent.com/G1Joshi/Agent-Skills/main/skills/frameworks/htmx/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/htmx/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How htmx Compares

Feature / Agent	htmx	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

HTMX HTML-first approach with AJAX attributes. Use for server-rendered interactivity.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# htmx

High power tools for HTML. Allows you to build modern user interfaces with the simplicity of hypertext.

## When to Use

- Server-side rendered applications (Django, Flask, Rails, Go, PHP)
- You want SPA-like interactivity without the complexity of React/Vue
- "Hypermedia-driven" applications

## Quick Start

```html
<script src="https://unpkg.com/htmx.org@1.9.10"></script>

<!-- When clicked, issue GET to /clicked, swap outerHTML with response -->
<button hx-get="/clicked" hx-swap="outerHTML">Click Me</button>
```

## Core Concepts

### Attributes

`hx-get`, `hx-post`, `hx-trigger`, `hx-target`, `hx-swap`.

### Swapping

Replacing parts of the DOM with HTML returned from the server.

### HATEOAS

Hypermedia As The Engine Of Application State. The server returns HTML (state), not JSON.

## Best Practices

**Do**:

- Return partial HTML snippets from the server
- Use `hx-boost` to speed up navigation
- Use `hx-indicator` for loading states

**Don't**:

- Return full HTML pages for partial updates
- Use htmx if you need complex client-side state (offline mode, etc.)

## References

- [htmx.org](https://htmx.org/)
- [Hypermedia Systems Book](https://hypermedia.systems/)