From xe-templ
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'.
How this skill is triggered — by the user, by Claude, or both
Slash command
/xe-templ:templ-htmxThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use progressive disclosure: first make one interaction work, then scale to advanced behaviors.
Use progressive disclosure: first make one interaction work, then scale to advanced behaviors.
Use this skill for server-driven interactivity without a JS framework.
hx-* attributes to a component.import "within.website/x/web/htmx"
func main() {
mux := http.NewServeMux()
htmx.Mount(mux)
}
import "within.website/x/web/htmx"
templ Layout() {
<html>
<head>@htmx.Use()</head>
<body>{ children... }</body>
</html>
}
hx-get / hx-post: trigger requests.hx-target: pick where response lands.hx-swap: choose replacement strategy (innerHTML, outerHTML, beforeend).hx-trigger: control event timing (click, change, every 5s, etc).hx-indicator: show loading state.htmx.Is(r) and return fragments.HX-Trigger, HX-Redirect) for client behavior.func profileHandler(w http.ResponseWriter, r *http.Request) {
if htmx.Is(r) {
_ = components.ProfilePanel().Render(r.Context(), w)
return
}
_ = components.ProfilePage().Render(r.Context(), w)
}
templ-http.templ-components.templ-syntax.resources/quick-start.mdresources/interaction-patterns.mdresources/advanced-responses.mdCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub xe/agent-plugins --plugin xe-templ