Templ Components
Use progressive disclosure: solve with Level 1 first, then pull deeper guidance only if complexity requires it.
Level 1: Component Checklist
Use this skill for reusable templ UI components.
-
Define a small, single-purpose component.
-
Prefer typed props (structs for complex APIs).
-
Support composition with { children... } .
-
Keep variants explicit and predictable.
-
Extract shared layout wrappers instead of duplicating markup.
type ButtonProps struct { Label string Variant string Disabled bool }
templ Button(props ButtonProps) { <button class={ "btn btn-" + props.Variant } disabled?={ props.Disabled }> { props.Label } </button> }
Level 2: API Design Rules
-
Small surface area: avoid giant prop lists.
-
Typed options: enums/constants beat free-form strings for critical variants.
-
Composition first: prefer wrappers (Card , Modal , Layout ) over monolith components.
-
No hidden side effects: components render; handlers/loaders do data work.
-
Stable contracts: avoid breaking prop shape without migration.
Level 3: Reusable Patterns
templ Card(title string) { <article class="card"> <header><h3>{ title }</h3></header> <div class="card-body">{ children... }</div> </article> }
templ WithError(err error) { if err != nil { <p class="error">{ err.Error() }</p> } else { { children... } } }
Escalate to Other Skills
-
Need syntax details: use templ-syntax .
-
Need HTTP routing/rendering: use templ-http .
-
Need partial updates/interactions: use templ-htmx .
References
-
Foundations: resources/foundations.md
-
Patterns: resources/patterns.md
-
Testing and API notes: resources/testing-and-api.md
-
templ component guide: https://templ.guide/component-composition/
-
templ API docs: https://pkg.go.dev/github.com/a-h/templ