# Templ Components

> 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'.

- Skill: `majiayu000/templ-components-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/templ-components-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/templ-components-2/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/templ-components-2

---


# 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.

1. Define a small, single-purpose component.
2. Prefer typed props (structs for complex APIs).
3. Support composition with `{ children... }`.
4. Keep variants explicit and predictable.
5. Extract shared layout wrappers instead of duplicating markup.

```templ
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
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