templui_skill

Overview

This skill helps Go/Templ developers build interactive apps using templUI components with HTMX and Alpine.js. It focuses on correct Script() usage, safe templ-to-JavaScript interpolation patterns, and the integration patterns that keep server-driven and client-side behavior predictable. Use it to avoid common pitfalls when converting sites to templ or wiring templUI components into your base layout.

How this skill works

The skill inspects common templ patterns and recommends concrete fixes: ensure required Script() templates are included in the base layout, use data-attributes or templ helpers to pass Go values into JavaScript, and choose HTMX vs Alpine for server vs client responsibilities. It highlights templ.JSFuncCall, templ.JSONString/JSONScript, OnceHandle, and double-brace interpolation inside script strings as the safe patterns to use. It also checks for typical errors like literal braces in URLs, missing component Script() calls, and components copied without their Script() templates.

When to use it

• Building new Go/Templ pages that need interactivity with templUI components
• Converting HTML/React/Vue UIs to Go/Templ and mapping event handlers or state
• Debugging dropdowns, tooltips, dialogs, or other components that don’t respond
• Passing Go values into client JavaScript safely without XSS or interpolation bugs
• Integrating HTMX server swaps with Alpine client-side reactivity

Best practices

• Always include required @*.Script() calls in your base layout head for interactive components
• Prefer data-* attributes or templ.JSFuncCall to pass simple values from templ to JS; use templ.JSONString/JSONScript for complex objects
• Use double braces {{ value }} inside script strings when you need direct string interpolation
• Use templ.OnceHandle for reusable script functions that may appear multiple times in markup
• Use HTMX for server-driven updates and Alpine for local client state; use alpine-morph to preserve Alpine state across HTMX swaps

Example use cases

• Add a dropdown that uses Floating UI: verify @popover.Script() in layout and install via templui CLI
• Submit a server-rendered form via HTMX and filter results client-side with Alpine
• Open a publish dialog: put the ID in data-quote-id and call openPublishModal(this.dataset.quoteId)
• Embed a JSON config via templ.JSONScript and parse it in client JS for component initialization
• Convert a React click handler to templ: replace inline React handler with templ.JSFuncCall or data-* + Script() function