component-composition_skill

This skill helps you design reusable component APIs and patterns such as children, slots, and render props to improve UI composition.

TypeScript

2

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill fusengine/agents --skill component-composition

SKILL.md2.7 KB

Overview

This skill helps teams design and implement reusable UI components and component APIs in TypeScript. It codifies composition patterns—children, slots, compound components, render props, and polymorphic components—and provides a lightweight validation workflow. Use it to choose the right pattern for complexity, enforce TypeScript typings, and keep hierarchies maintainable.

How this skill works

It inspects component intent and recommends a composition pattern based on complexity and naming. The skill guides TypeScript prop typings, ref forwarding, and displayName conventions, and it includes a short validation checklist to apply after implementation. It also prescribes spawning review agents to explore existing patterns and validate the final design.

When to use it

Creating simple container components where content is passed directly
Designing components that need named regions (headers, footers, sidebars)
Building related sub-components that share context (compound components)
Implementing highly customizable rendering surfaces (render props or polymorphic components)
Reviewing or refactoring existing component hierarchies to reduce depth and improve types

Best practices

Prefer children for simple nesting and small, single-slot components
Limit named slots to 3–4 to avoid API complexity
Use Context and static sub-components for compound components to share state
Forward refs for interactive or form elements and set displayName on forwardRef components
Keep composition depth shallow—aim for 2 levels, max 3
Fully type props in TypeScript and avoid implicit any

Example use cases

Card component with children for basic content layouts
Card with header and footer props implementing slot-like regions
Card compound API with Card.Header, Card.Body, Card.Footer using context to share variant state
Polymorphic Button component that accepts an "as" prop to render as different HTML elements
Advanced layout component exposing a render-prop for consumers to control inner markup

FAQ

Use slots when you need a small number of named regions and simple placement. Use compound components when sub-components need access to shared state or context.

When should I use polymorphic components?

Use polymorphic components when a single API should render multiple HTML elements (like button vs link) while preserving props and accessibility. They add complexity, so use them for reusable primitives.