When should I use HTMX vs. Alpine.js with this skill?

HTMX is recommended for server-driven interactions like AJAX requests and partial page updates, while Alpine.js is used for client-side reactivity, animations, and local state management.

How does it handle JavaScript in Templ files?

The skill enforces specific patterns for interpolation, such as using data attributes or templ.JSFuncCall, to prevent common errors where Go expressions are treated as literal text in scripts.

Are there specific layout requirements for templUI components?

Yes, interactive components require their corresponding Script() templates (like @popover.Script()) to be called in the base layout's head section to function correctly.

Does this skill work with the templUI CLI?

Yes, it includes guidance on using the templUI CLI to add, initialize, and upgrade components to ensure all necessary Script() templates are correctly included in your project.

What is the primary purpose of the templui skill?

It provides Claude with best practices and implementation patterns for building Go web apps using the Templ template engine, templUI components, and the HTMX/Alpine.js frontend stack.

TemplUI for Go Web Development

Name: TemplUI for Go Web Development
Author: gopherguides

bygopherguides

•

デザインツール

Streamlines Go and Templ web application development with standardized UI components, HTMX integration, and Alpine.js best practices.

概要

This skill equips Claude with specialized knowledge for building modern, interactive web applications using the Go and Templ stack. It provides comprehensive patterns for implementing templUI components, managing server-driven interactions with HTMX, and handling client-side reactivity via Alpine.js. By applying these domain-specific best practices, developers can avoid common pitfalls such as JavaScript interpolation errors in Templ files, ensure proper script lifecycle management, and efficiently migrate existing frontend frameworks to a high-performance Go-based architecture.

主な機能

Structured workflows for converting HTML, React, or Vue codebases to Templ
Standardized templUI component implementation and configuration patterns
3 GitHub stars
Expert guidance on HTMX and Alpine.js integration and state management
Automated CLI command assistance for component installation and updates
Strict protocols for Go expression interpolation inside JavaScript and Script() tags

ユースケース

Migrating legacy frontend applications to a server-rendered Go and Templ architecture
Debugging and fixing JavaScript interpolation errors and event handler issues in Templ
Building interactive Go web dashboards using templUI and HTMX partials

概要

主な機能

Structured workflows for converting HTML, React, or Vue codebases to Templ
Standardized templUI component implementation and configuration patterns
3 GitHub stars
Expert guidance on HTMX and Alpine.js integration and state management
Automated CLI command assistance for component installation and updates
Strict protocols for Go expression interpolation inside JavaScript and Script() tags

ユースケース

Migrating legacy frontend applications to a server-rendered Go and Templ architecture
Debugging and fixing JavaScript interpolation errors and event handler issues in Templ
Building interactive Go web dashboards using templUI and HTMX partials