| name | templ-components |
| description | Create reusable templ UI components with props, children, and composition patterns. Use when building UI components, creating component libraries, mentions 'button component', 'card component', or 'reusable templ components'. |
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
