skills.rest
ev3rlit
ev3rlitCOMMUNITY
Explore all skills by this author →
GitHub

templ-components

Create strongly-typed templ UI components with typed props and children composition.

Updated Oct 27, 2025
Search Tags:#ui#components#types#design-system#component-library#templ
One-click install
npx skills add https://github.com/ev3rlit/doodle --skill templ-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: templ-components
Source: https://github.com/ev3rlit/doodle/tree/main/.claude/skills/templ-skills/templ-components
Command: npx skills add https://github.com/ev3rlit/doodle --skill templ-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building scalable UIs requires reusable, strongly-typed components that can be composed to form complex interfaces. This Skill provides templ-based components with prop typing, children composition, and a library of common patterns to speed UI development.

Core Features & Use Cases

  • Basic Component: templ Button(text string) defines a simple, reusable button component.
  • Component with Multiple Props: templ Button(text string, variant string, disabled bool) demonstrates multiple props handling.
  • Component with Children: templ Card(title string) shows how child content can be composed inside a component.
  • Component with Struct Props: using typed structs to pass multiple related properties.
  • Common Components: Button Variants, Card, List, Modal to accelerate UI composition.
  • Layout Components: Container, Grid, Navigation for layout scaffolding.
  • Composition Patterns: Slots, Render Props, Wrapper Components for flexible composition.
  • Best Practices: guidelines for type-safety and maintainable component APIs.

Quick Start

Create a minimal templ component library by adding Button, Card, and Layout components, then render them in a sample page to verify they compose correctly.

Frequently Asked Questions about templ-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Does this Skill include layout components for templ web applications?▼

Yes, this Skill includes layout components for templ web applications such as Container, Grid, and Navigation. These components accelerate UI composition and provide layout scaffolding for your design system.

How do I compose child content inside a templ component?▼

You can compose child content inside templ components by using wrapper patterns like templ Card(title string). This Skill supports children composition and slots to render nested elements within your UI components.

Can I pass typed structs as props to templ components?▼

Yes, you can pass typed structs as props to templ components to bundle related properties. This Skill demonstrates using struct props for type-safe component APIs and maintainable design systems.

What is the best way to build a scalable design system using templ?▼

The best way to build a scalable design system using templ is composing basic components like Button and Card with layout scaffolding like Grid. This Skill provides common patterns, render props, and wrapper components for flexible composition.

Does this Skill include layout components for templ web applications?▼

Yes, this Skill includes layout components for templ web applications such as Container, Grid, and Navigation. These components accelerate UI composition and provide layout scaffolding for your design system.

Related Skills

Explore More Design & Creative Skills→
ev3rlitev3rlit

templ-syntax

Write Go-integrated templ components with expressions, conditionals, and loops.

Community
Intermediate
ev3rlitev3rlit

templ-http

Render templ components in Go net/http handlers to serve dynamic HTML pages.

Community
Intermediate
brightdatabrightdata
245

design-mirror

Extract design tokens from a website and apply them to Tailwind, CSS variables, or CSS-in-JS.

Official
Advanced
xobotyixobotyi
19

templ

Provides conventions and best practices for the Go HTML templating language.

Community
Intermediate