メニュー
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'.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/Xe/skills --skill templ-htmxコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| 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'. |
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.md