// 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'.
A warm, Gruvbox-rooted design system derived from xeiaso.net. Use for personal-blog, technical-educator, or character-driven content that wants serif headlines, parchment surfaces, and chat-bubble layouts. Distinctive: magenta inverted link hovers, boxy 2px-radius sticker avatars, no gradients except the SponsorCard top rule.
Write GORM data access code using the DAO (Data Access Object) pattern. Use when creating database models, writing queries, setting up GORM, adding CRUD methods, or working with gorm.io in Go services. Also use when the user mentions "DAO", "data access", "ORM", "database models", "GORM", or is building a Go service that talks to a relational database.
Create reusable templ UI components with props, children, and composition patterns. Use when building UI components, creating component libraries, mentions 'button component', 'card component', or 'reusable templ components'.
Integrate templ components with Go HTTP server using net/http. Use when connecting templ to web server, creating HTTP handlers, mentions 'templ server', 'HTTP routes', or 'serve templ components'.
Learn and write templ component syntax including expressions, conditionals, loops, and Go integration. Use when writing .templ files, learning templ syntax, or mentions 'templ component', 'templ expressions', or '.templ file syntax'.
Write Go code following the conventions and patterns used in the within.website/x repository, including CLI patterns, error handling, logging with slog, HTTP handlers, and testing.
| 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