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

Templ Htmx

by Xe in Xe/x

Build interactive hypermedia-driven applications with templ and HTMX.

CC0-1.0Auto-check passedDevelopment

Install Templ Htmx

skills CLI
$ npx skills add Xe/x --skill templ-htmx -a claude-code

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

GitHub CLI
$ gh skill install Xe/x templ-htmx --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/Xe/x.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/templ-htmx .claude/skills/templ-htmx && 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
templ-htmx
GitHub stars
336
Token cost
~3.3k tokens
SKILL.md length
310 words
Files
1
Skills in repo
4
Repo updated
First seen
Licence
CC0-1.0

At a glance

Build interactive hypermedia-driven applications with templ and HTMX.

  • Works in 5 steps: Import and Mount HTMX → Add HTMX to Layout → Detect HTMX Requests → …
  • Creating dynamic UIs
  • SKILL.md covers Overview, When to Use This Skill, Quick Start and Core HTMX Attributes, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Templ Htmx is an agent skill from Xe/x. Build interactive hypermedia-driven applications with templ and HTMX. Use when creating dynamic UIs, real-time updates, AJAX interactions, mentions 'HTMX', 'dynamic content', or 'interactive templ app'.

Its SKILL.md is about 3.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development. The repository describes itself as: Various tools, trinkets and experiments. The licence is CC0-1.0.

When your agent uses it

  • Creating dynamic UIs
  • Real-time updates
  • AJAX interactions
  • Dynamic content

Example prompts

  • “dynamic content”
  • “interactive templ app”
  • “/templ-htmx”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Import and Mount HTMX
  2. Add HTMX to Layout
  3. Detect HTMX Requests
  4. Create Interactive Component
  5. Create Handler

What it can do on your machine

Read from SKILL.md and the folder at commit 3c2a407. 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 templ, go, css and javascript).

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

  • Network

    Links to these hosts (documentation or services it may open):

    • htmx.org
    • hypermedia.systems

    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.

Context cost

Templ Htmx loads about 3.3k tokens when it runs. Until then it costs about 53 tokens; SKILL.md has 310 words of instructions outside code blocks.

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

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 Xe/x at commit 3c2a407, republished under its CC0-1.0 licence (© Xe). 310 words, ~3,272 tokens.

Download SKILL.mdSave it as .claude/skills/templ-htmx/SKILL.md (or your agent's skills folder).
name
templ-htmx
description
Build interactive hypermedia-driven applications with templ and HTMX. Use when creating dynamic UIs, real-time updates, AJAX interactions, mentions 'HTMX', 'dynamic content', or 'interactive templ app'.

Templ + HTMX Integration

Overview

HTMX enables modern, interactive web applications with minimal JavaScript. Combined with templ's type-safe components, you get fast, reliable hypermedia-driven UIs.

Key Benefits:

  • No JavaScript framework needed
  • Server-side rendering
  • Minimal client-side code
  • Progressive enhancement
  • Type-safe components

When to Use This Skill

Use when:

  • Building interactive UIs
  • Creating dynamic content
  • User mentions "HTMX", "dynamic updates", "real-time"
  • Implementing AJAX-like behavior without JS
  • Building SPAs without frameworks

Quick Start

1. Import and Mount HTMX

First, import the htmx package and mount it in your server:

go
import (
    "within.website/x/htmx"
)

func main() {
    mux := http.NewServeMux()

    // Mount HTMX static files at /.within.website/x/htmx/
    htmx.Mount(mux)

    // ... other routes
}
2. Add HTMX to Layout
templ
package components

import "within.website/x/htmx"

templ Layout(title string) {
    <!DOCTYPE html>
    <html>
        <head>
            <title>{ title }</title>
            @htmx.Use()
        </head>
        <body>
            { children... }
        </body>
    </html>
}

The htmx.Use() component includes the core HTMX library. You can add extensions:

templ
// Add SSE and path-params extensions
@htmx.Use("sse", "path-params")

Available extensions: event-header, path-params, remove-me, websocket.

3. Detect HTMX Requests

Use the htmx.Is() function to check if a request was made by HTMX:

go
import "within.website/x/htmx"

func handler(w http.ResponseWriter, r *http.Request) {
    if htmx.Is(r) {
        // Return partial HTML fragment for HTMX
        components.Partial().Render(r.Context(), w)
    } else {
        // Return full page for direct navigation
        components.FullPage().Render(r.Context(), w)
    }
}
4. Create Interactive Component
templ
templ Counter(count int) {
    <div>
        <p>Count: { strconv.Itoa(count) }</p>
        <button
            hx-post="/counter/increment"
            hx-target="#counter"
            hx-swap="outerHTML"
        >
            Increment
        </button>
    </div>
}
5. Create Handler
go
func incrementHandler(w http.ResponseWriter, r *http.Request) {
    count := getCount() + 1
    saveCount(count)

    components.Counter(count).Render(r.Context(), w)
}

Core HTMX Attributes

hx-get / hx-post

Trigger HTTP requests:

templ
templ SearchBox() {
    <input
        type="text"
        name="q"
        hx-get="/search"
        hx-trigger="keyup changed delay:500ms"
        hx-target="#results"
    />
    <div id="results"></div>
}

Handler:

go
func searchHandler(w http.ResponseWriter, r *http.Request) {
    query := r.URL.Query().Get("q")
    results := search(query)

    components.SearchResults(results).Render(r.Context(), w)
}
hx-target

Specify where to insert response:

templ
templ LoadMore(page int) {
    <button
        hx-get={ "/posts?page=" + strconv.Itoa(page) }
        hx-target="#posts"
        hx-swap="beforeend"
    >
        Load More
    </button>
}
hx-swap

Control how content is swapped:

templ
// innerHTML (default)
hx-swap="innerHTML"

// outerHTML - replace element itself
hx-swap="outerHTML"

// beforeend - append inside
hx-swap="beforeend"

// afterend - insert after
hx-swap="afterend"
hx-trigger

Control when requests fire:

templ
// On click (default for buttons)
<button hx-get="/data">Click me</button>

// On change
<select hx-get="/filter" hx-trigger="change">

// On keyup with delay
<input hx-get="/search" hx-trigger="keyup changed delay:300ms">

// On page load
<div hx-get="/data" hx-trigger="load">

// Every 5 seconds
<div hx-get="/updates" hx-trigger="every 5s">

Common Patterns

Component:

templ
templ SearchBox() {
    <div>
        <input
            type="text"
            name="q"
            placeholder="Search..."
            hx-get="/search"
            hx-trigger="keyup changed delay:500ms"
            hx-target="#search-results"
            hx-indicator="#spinner"
        />
        <span id="spinner" class="htmx-indicator">
            Searching...
        </span>
    </div>
    <div id="search-results"></div>
}

templ SearchResults(results []string) {
    <ul>
        for _, result := range results {
            <li>{ result }</li>
        }
    </ul>
}

Handler:

go
func searchHandler(w http.ResponseWriter, r *http.Request) {
    query := r.URL.Query().Get("q")
    results := performSearch(query)

    components.SearchResults(results).Render(r.Context(), w)
}
Pattern 2: Infinite Scroll
templ
templ PostList(posts []Post, page int) {
    <div id="posts">
        for _, post := range posts {
            @PostCard(post)
        }
    </div>

    if len(posts) > 0 {
        <div
            hx-get={ "/posts?page=" + strconv.Itoa(page+1) }
            hx-trigger="revealed"
            hx-swap="outerHTML"
        >
            Loading more...
        </div>
    }
}
Pattern 3: Delete with Confirmation
templ
templ DeleteButton(itemID string) {
    <button
        hx-delete={ "/items/" + itemID }
        hx-confirm="Are you sure?"
        hx-target="closest tr"
        hx-swap="outerHTML swap:1s"
    >
        Delete
    </button>
}

Handler:

go
func deleteHandler(w http.ResponseWriter, r *http.Request) {
    itemID := strings.TrimPrefix(r.URL.Path, "/items/")
    deleteItem(itemID)

    // Return empty to remove element
    w.WriteHeader(http.StatusOK)
}
Pattern 4: Inline Edit
templ
templ EditableField(id string, value string) {
    <div id={ "field-" + id }>
        <span>{ value }</span>
        <button
            hx-get={ "/edit/" + id }
            hx-target={ "#field-" + id }
            hx-swap="outerHTML"
        >
            Edit
        </button>
    </div>
}

templ EditForm(id string, value string) {
    <form
        hx-post={ "/save/" + id }
        hx-target={ "#field-" + id }
        hx-swap="outerHTML"
    >
        <input type="text" name="value" value={ value } />
        <button type="submit">Save</button>
        <button
            hx-get={ "/cancel/" + id }
            hx-target={ "#field-" + id }
        >
            Cancel
        </button>
    </form>
}
Pattern 5: Form Validation
templ
templ SignupForm() {
    <form hx-post="/signup" hx-target="#form-errors">
        <div id="form-errors"></div>

        <input
            type="email"
            name="email"
            hx-post="/validate/email"
            hx-trigger="blur"
            hx-target="#email-error"
        />
        <div id="email-error"></div>

        <input type="password" name="password" />

        <button type="submit">Sign Up</button>
    </form>
}

templ ValidationError(message string) {
    <span class="error">{ message }</span>
}
Pattern 6: Polling / Real-time Updates
templ
templ LiveStats() {
    <div
        hx-get="/stats"
        hx-trigger="load, every 5s"
        hx-swap="innerHTML"
    >
        Loading stats...
    </div>
}

templ StatsDisplay(stats Stats) {
    <div>
        <p>Users online: { strconv.Itoa(stats.UsersOnline) }</p>
        <p>Active sessions: { strconv.Itoa(stats.Sessions) }</p>
    </div>
}

Advanced Patterns

Out-of-Band Updates (OOB)

Update multiple parts of page:

templ
templ CartButton(count int) {
    <button id="cart-btn">
        Cart ({ strconv.Itoa(count) })
    </button>
}

templ AddToCartResponse(item Item) {
    // Main response
    <div class="notification">
        Added { item.Name } to cart!
    </div>

    // Update cart button (different part of page)
    <div id="cart-btn" hx-swap-oob="true">
        @CartButton(getCartCount())
    </div>
}
Progressive Enhancement
templ
templ Form() {
    <form
        action="/submit"
        method="POST"
        hx-post="/submit"
        hx-target="#result"
    >
        <input type="text" name="data" />
        <button type="submit">Submit</button>
    </form>
    <div id="result"></div>
}

Works without JavaScript, enhanced with HTMX.

Loading States
templ
templ DataTable() {
    <div
        hx-get="/data"
        hx-trigger="load"
        hx-indicator="#loading"
    >
        <div id="loading" class="htmx-indicator">
            Loading data...
        </div>
    </div>
}

CSS:

css
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: inline;
}

.htmx-request.htmx-indicator {
  display: inline;
}

Response Headers

HX-Trigger

Trigger client-side events:

go
func handler(w http.ResponseWriter, r *http.Request) {
    // Do work...

    // Trigger custom event
    w.Header().Set("HX-Trigger", "itemCreated")

    components.Success().Render(r.Context(), w)
}

Client side:

javascript
document.body.addEventListener("itemCreated", function (evt) {
  console.log("Item created!");
});
HX-Redirect
go
func handler(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("HX-Redirect", "/dashboard")
    w.WriteHeader(http.StatusOK)
}
HX-Refresh
go
func handler(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("HX-Refresh", "true")
    w.WriteHeader(http.StatusOK)
}
Special Status Code

Stop polling with status code 286:

go
import "within.website/x/htmx"

func pollHandler(w http.ResponseWriter, r *http.Request) {
    if shouldStopPolling() {
        w.WriteHeader(htmx.StatusStopPolling)
        return
    }
    // ... return normal content
}
Request Headers

Access HTMX request headers:

go
import "within.website/x/htmx"

func handler(w http.ResponseWriter, r *http.Request) {
    // Check if this is an HTMX request
    if htmx.Is(r) {
        // Get user's response to hx-prompt
        promptResponse := r.Header.Get(htmx.HeaderPrompt)
    }
}

Best Practices

  1. Keep handlers focused - Return only the HTML fragment needed
  2. Use semantic HTML - Works without JS
  3. Handle errors gracefully - Return error components
  4. Optimize responses - Send minimal HTML
  5. Use OOB for multi-updates - Update multiple page sections
  6. Progressive enhancement - Always provide fallback

Full Example: Todo App

templ
// components/todo.templ
package components

type Todo struct {
    ID        string
    Text      string
    Completed bool
}

templ TodoApp(todos []Todo) {
    @Layout("Todo App") {
        <div>
            <h1>My Todos</h1>

            @TodoForm()
            @TodoList(todos)
        </div>
    }
}

templ TodoForm() {
    <form
        hx-post="/todos"
        hx-target="#todo-list"
        hx-swap="beforeend"
        hx-on::after-request="this.reset()"
    >
        <input
            type="text"
            name="text"
            placeholder="New todo..."
            required
        />
        <button type="submit">Add</button>
    </form>
}

templ TodoList(todos []Todo) {
    <ul id="todo-list">
        for _, todo := range todos {
            @TodoItem(todo)
        }
    </ul>
}

templ TodoItem(todo Todo) {
    <li id={ "todo-" + todo.ID }>
        <input
            type="checkbox"
            checked?={ todo.Completed }
            hx-post={ "/todos/" + todo.ID + "/toggle" }
            hx-target={ "#todo-" + todo.ID }
            hx-swap="outerHTML"
        />
        <span class={ templ.KV("completed", todo.Completed) }>
            { todo.Text }
        </span>
        <button
            hx-delete={ "/todos/" + todo.ID }
            hx-target={ "#todo-" + todo.ID }
            hx-swap="outerHTML swap:500ms"
        >
            Delete
        </button>
    </li>
}

Handlers:

go
func todosHandler(w http.ResponseWriter, r *http.Request) {
    switch r.Method {
    case "GET":
        todos := getAllTodos()
        components.TodoApp(todos).Render(r.Context(), w)

    case "POST":
        r.ParseForm()
        todo := createTodo(r.FormValue("text"))
        components.TodoItem(todo).Render(r.Context(), w)
    }
}

func todoToggleHandler(w http.ResponseWriter, r *http.Request) {
    id := extractID(r.URL.Path)
    todo := toggleTodo(id)
    components.TodoItem(todo).Render(r.Context(), w)
}

func todoDeleteHandler(w http.ResponseWriter, r *http.Request) {
    id := extractID(r.URL.Path)
    deleteTodo(id)
    w.WriteHeader(http.StatusOK) // Empty response removes element
}

Resources

Next Steps

  • Style components → Use templ-css skill
  • Deploy → Use templ-deployment skill
  • Test → Use templ-testing skill

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

Files

Just SKILL.md in .claude/skills/templ-htmx of Xe/x.

Open the folder on GitHubat commit 3c2a407

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders. This page covers the copy in Xe/x, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Templ Htmx 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.

Templ Htmx compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Templ Htmx this skillXe/x336—~3.3kAutomated safety check: PassCC0-1.0
Finishing a Development Branchobra/superpowers296k5 repos~1.9kAutomated safety check: PassMIT
Typescript Advanced Typesrolling-scopes/rsschool-app10k24 repos~4.2kAutomated safety check: PassMPL-2.0
PR Babysitteropeninterpreter/openinterpreter69k3 repos~4.2kAutomated safety check: PassApache-2.0
Code Review ChecklistshareAI-lab/learn-claude-code78k5 repos~1.1kAutomated safety check: PassMIT
Greplooponyx-dot-app/onyx32k4 repos~3.3kAutomated safety check: PassMIT

Similar skills

  • Finishing a Development Branch

    obra/superpowers

    Walks the last step of a branch: confirm tests pass, detect the git environment, ask how to integrate, carry out your choice and clean up the worktree.

    296k GitHub starsUsed in 5 repos~1.9k tokens
    DevelopmentAuto-check passed

  • Typescript Advanced Types

    rolling-scopes/rsschool-app

    Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications.

    10k GitHub starsUsed in 24 repos~4.2k tokens
    DevelopmentAuto-check passed

  • PR Babysitter

    openinterpreter/openinterpreter

    Watches an open GitHub pull request until it merges, handling review comments, diagnosing CI failures and retrying flaky checks along the way.

    69k GitHub starsUsed in 3 repos~4.2k tokens
    DevelopmentAuto-check passed

  • 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

  • Greploop

    onyx-dot-app/onyx

    Iteratively improves a PR (GitHub), MR (GitLab), or shelved changelist (Perforce) until Greptile gives it a 5/5 confidence score with zero unresolved comments.

    32k GitHub starsUsed in 4 repos~3.3k tokens
    DevelopmentAuto-check passed

  • Guidelines

    akash-network/node

    Behavioral guidelines to reduce common LLM coding mistakes. An agent skill from akash-network/node.

    1.1k GitHub starsUsed in 22 repos~577 tokens
    DevelopmentAuto-check passed

More from Xe/x

  • Xe Writing Style

    Xe/x

    Transform unstructured notes into polished blog posts in Xe Iaso's voice.

    336 GitHub stars~2.2k tokensUpdated today
    Auto-check passed

  • Go Table Driven Tests

    Xe/x

    Write Go table-driven tests following Go community best practices and this repository's conventions.

    336 GitHub stars~2k tokensUpdated today
    Auto-check passed

  • Xe Go Style

    Xe/x

    Write Go code following the conventions and patterns used in the within.website/x repository, including CLI patterns with internal.HandleStartup(), error handling, logging with slog, HTTP handlers…

    336 GitHub stars~2k tokensUpdated today
    Auto-check passed

Categories

Questions about Templ Htmx

What does Templ Htmx do?

Build interactive hypermedia-driven applications with templ and HTMX. Templ Htmx is an agent skill from Xe/x. Build interactive hypermedia-driven applications with templ and HTMX.

When should I use Templ Htmx?

Templ Htmx fits situations like: creating dynamic UIs; real-time updates; AJAX interactions; dynamic content.

How do I install Templ Htmx in Claude Code?

Run `npx skills add Xe/x --skill templ-htmx -a claude-code`. Or copy the skill folder (.claude/skills/templ-htmx in Xe/x) into .claude/skills/templ-htmx in your project. Claude Code loads it when a task matches its description.

How do I install Templ Htmx in Codex?

Run `npx skills add Xe/x --skill templ-htmx -a codex`. Or copy the skill folder (.claude/skills/templ-htmx in Xe/x) into .agents/skills/templ-htmx in your project. Codex loads it when a task matches its description.

Can I use Templ Htmx 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 Xe/x --skill templ-htmx -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/templ-htmx, .gemini/skills/templ-htmx, .github/skills/templ-htmx and .opencode/skills/templ-htmx in your project.

What does Templ Htmx need to run?

SKILL.md names no scripts, command-line tools or credentials: Templ Htmx is instructions for the agent only.

Does Templ Htmx access the network?

SKILL.md names 2 domains. As links in the text: htmx.org and hypermedia.systems. This is read from the text; nothing was executed.

Is Templ Htmx 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 Templ Htmx use?

Templ Htmx is published under the CC0-1.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Templ Htmx use?

About 3.3k tokens (SKILL.md is roughly 13k 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 Templ Htmx?

Skills that share tags, products or a category with Templ Htmx: Finishing a Development Branch (obra/superpowers, 296k stars), Typescript Advanced Types (rolling-scopes/rsschool-app, 10k stars), PR Babysitter (openinterpreter/openinterpreter, 69k stars) and Code Review Checklist (shareAI-lab/learn-claude-code, 78k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Templ Htmx?

Xe (a GitHub user) maintains it in Xe/x, which has 336 GitHub stars. The repository holds 4 skills in this directory. The repository was last updated on October 7, 2026.

Source: Xe/x on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.