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 library usage for Go Templ apps: vanilla JavaScript Script() setup, HTMX integration, Go variable interpolation, and optional Alpine.js state layer.
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 when building Go/Templ web applications.
Apply templUI patterns when building Go/Templ web applications.
Per templui.io: "Zero JS frameworks — Just vanilla. Just fast." templUI components use vanilla JavaScript via Script() templates for all interactivity (popovers, dropdowns, dialogs, tabs, etc.). They do NOT depend on Alpine.js, React, Vue, or any other framework.
Earlier versions of templUI integrated with Alpine.js. That dependency has been removed. If you find documentation or code referencing x-data/x-show/x-if directives inside templUI components, it's stale.
| Tool | Purpose | Use For |
|---|---|---|
| templUI | Pre-built UI components (vanilla JS) | Dropdowns, dialogs, tabs, sidebars, popovers, accordions |
| HTMX | Server-driven interactions | AJAX, form submissions, partial page updates, live search |
| Alpine.js (optional) | Lightweight client-side state | Toggles, animations, client-side filtering, transitions — used alongside templUI, not as an integration. Skip if you don't need a reactive state layer beyond what HTMX + Script() provide. |
| Floating UI | Positioning primitive (used internally by templUI) | Tooltips, popovers, dropdowns — usually transparent to users |
Read the relevant file for detailed patterns, code examples, and troubleshooting:
htmx-alpine-integration.md — HTMX + Alpine.js (optional, separate from templUI)For apps that choose to add Alpine.js as a client-side state layer alongside templUI. Read only when Alpine is actually in use. Covers: when to use HTMX vs Alpine vs combined, Alpine-Morph extension for state preservation across swaps, htmx.process() for Alpine conditionals, triggering HTMX from Alpine. Skip if your app uses templUI + HTMX + Script() without Alpine — that's templUI's recommended setup.
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.