From go-studio
Build a Templ component with HTMX interactivity and templUI styling.
npx claudepluginhub dvrd/ui-studio --plugin dvrdThis skill uses the workspace's default tool permissions.
Creates a Templ component with HTMX-driven interactivity using templUI styling.
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.
Guides simple web development prioritizing semantic HTML, CSS, HTMX for interactivity, and minimal JS. Use for writing or reviewing templates, stylesheets, scripts.
Share bugs, ideas, or general feedback.
Creates a Templ component with HTMX-driven interactivity using templUI styling.
Confirm with user:
componentName — PascalCase name (e.g. CampaignCard, StatsPanel)Read patterns:
go-stack: pattern://templ-components.mdgo-stack: pattern://htmx-patterns.mdtemplui: list_resources() — check available componentsRead relevant templUI component docs for the UI patterns needed
Write internal/ui/components/{component_name}.templ:
hx-indicatorWrite handler method in the appropriate internal/handlers/*.go:
Register handler routes in cmd/server/main.go
Run templ generate + go build ./...
Smoke test (if Chrome available):
screenshots/{componentName}-iter1.pngForm with inline validation:
<form hx-post="/campaigns" hx-target="this" hx-swap="outerHTML">
<!-- on error, server returns this form with error messages -->
<!-- on success, server returns success state or redirects -->
</form>
Load more pagination:
<button hx-get="/campaigns?page=2" hx-target="#campaign-list" hx-swap="beforeend">
Load more
</button>
Delete with confirmation:
<button hx-delete="/campaigns/123" hx-confirm="Delete this campaign?" hx-target="closest .campaign-card" hx-swap="outerHTML">
Delete
</button>
templ generate produces _templ.go filego build ./... passes