hmans Datastar
Use this skill for Kubernetto's Datastar + Go + templ UI. The app is intentionally server-rendered: keep Datastar unless the user explicitly asks for a different architecture.
Workflow
- Inspect the local patterns before editing:
internal/server/ui/render.gofor signal attributes and Datastar action attributes.internal/server/ui/page.templfor page layout, Datastar script loading, and fragment roots.internal/server/server.gofordatastar.ReadSignals,datastar.NewSSE, signal patches, and element patches.frontend/src/app.jsfor URL sync and small optimistic UI helpers.frontend/src/app.cssfor loading and pending states.
- For detailed implementation patterns, read
references/kubernetto-patterns.md. - When upgrading Datastar, verify current releases/changelogs from official sources before editing versions. Browser package tags and
datastar-gomodule versions can move independently. - Keep signal names stable in Go JSON structs and JavaScript URL state. In HTML attributes, use kebab-case for camelCase signal names because browsers lowercase attribute names.
- Prefer Datastar-native loading behavior:
- Add
data-indicator:loadingto the element initiating the request. - Bind visible UI to
$loadingwithdata-show,data-class, or similar reactive attributes.
- Add
- Patch normalized server state back to the client before patching affected elements when handlers can canonicalize resource, namespace, selection, sort, or detail signals.
- Regenerate and verify:
mise x -- go generate ./...mise x -- pnpm build:assetsmise x -- go test ./...mise run buildwhen preparing a final branch/PR.
Guardrails
- Do not treat
page_templ.goorassets/dist/*as source of truth. Edit*.templ,frontend/src/*, and Go sources, then regenerate. - Do not add a client framework for problems Datastar already handles: partial updates, loading indicators, simple optimistic state, or signal-driven requests.
- Keep SSE fragments rooted by stable IDs so Datastar can merge them predictably.
- Keep URL sync in
frontend/src/app.jscompatible with server-normalized signals. - Add tests around rendered attributes and SSE event bodies when changing signal names, request handlers, or loading-state hooks.