Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From go-web
Guides templUI component setup in Go templ apps including dropdowns, dialogs, tabs, toasts; Script() configuration, JS interpolation in handlers, non-responsive fixes, HTML-to-templ conversion, and HTMX/Alpine.js integration.
How this skill is triggered — by the user, by Claude, or both
Slash command
/go-web:templuiThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Apply templUI patterns and HTMX/Alpine.js best practices when building Go/Templ web applications.
Apply templUI patterns and HTMX/Alpine.js best practices when building Go/Templ web applications.
| Tool | Purpose | Use For |
|---|---|---|
| HTMX | Server-driven interactions | AJAX requests, form submissions, partial page updates, live search |
| Alpine.js | Client-side state & reactivity | Toggles, animations, client-side filtering, transitions, local state |
| templUI | Pre-built UI components | Dropdowns, dialogs, tabs, sidebars (uses vanilla JS via Script() templates) |
Note: templUI components use vanilla JavaScript (not Alpine.js) via Script() templates.
Read the relevant file for detailed patterns, code examples, and troubleshooting:
htmx-alpine-integration.md — HTMX + Alpine.js IntegrationWhen to use HTMX vs Alpine vs combined. Key integration patterns: Alpine-Morph extension for state preservation across swaps, htmx.process() for Alpine conditionals, triggering HTMX from Alpine.
templ-interpolation.md — CRITICAL: Templ Interpolation in JavaScriptGo expressions { value } do NOT interpolate inside <script> tags. Five patterns to solve this:
data-* attrs + this.dataset{{ value }} inside <script> tagstempl.JSONScriptIncludes when-to-use table and common mistakes.
templui-cli.md — templUI CLI ToolInstall, init, add components, force-update, list available. Always use CLI to add/update components — manual copies miss Script() templates.
script-templates.md — Script() Templates (REQUIRED)Components with JavaScript need Script() calls in base layout <head>. Lists all Script() imports (popover, dropdown, dialog, accordion, tabs, carousel, toast, clipboard), component dependency table, and troubleshooting for non-working components.
conversion-and-audit.md — Converting Sites & AuditingConverting HTML/React/Vue to Go/Templ: process, syntax mapping, package structure. Templ syntax quick reference (props, conditionals, loops, composition). Audit checklist for Script() calls, CLI installation, consistency, dark mode, responsive. Import patterns and troubleshooting guide. Resource links for templUI, HTMX+Alpine, and templ docs.
npx claudepluginhub gopherguides/gopher-ai --plugin go-webtempl templating: syntax, components, attributes, styling, and JavaScript integration. Invoke when task involves any interaction with templ — writing .templ files, creating components, composing templates, testing rendered output, or understanding templ syntax.
Provides conventions and patterns for building HTML views with the gomponents Go library: dot imports, Node composition, Map/If/Iff, Group, and HTML5 documents.