From xe-templ
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'.
How this skill is triggered — by the user, by Claude, or both
Slash command
/xe-templ:templ-componentsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use progressive disclosure: solve with Level 1 first, then pull deeper guidance only if complexity requires it.
Use progressive disclosure: solve with Level 1 first, then pull deeper guidance only if complexity requires it.
Use this skill for reusable templ UI components.
{ children... }.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>
}
Card, Modal, Layout) over monolith components.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... }
}
}
templ-syntax.templ-http.templ-htmx.resources/foundations.mdresources/patterns.mdresources/testing-and-api.mdnpx claudepluginhub xe/agent-plugins --plugin xe-templCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.