Agent skill
component-composition
Use when creating reusable components, component APIs, or complex hierarchies. Covers children, slots, compound components, render props.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/component-composition
SKILL.md
Component Composition
Agent Workflow (MANDATORY)
Before implementation, use TeamCreate to spawn 3 agents:
- fuse-ai-pilot:explore-codebase - Check existing composition patterns
- fuse-ai-pilot:research-expert - React 19 composition patterns
After: Run fuse-ai-pilot:sniper for validation.
Overview
| Pattern | Use Case | Complexity |
|---|---|---|
| Children | Simple containers | Low |
| Slots | Named regions | Medium |
| Compound | Related sub-components | Medium |
| Render Props | Custom rendering | High |
Quick Reference
Children Pattern
function Card({ children }: { children: React.ReactNode }) {
return <div className="bg-surface rounded-2xl p-6">{children}</div>;
}
Slots Pattern
function Card({ header, footer, children }: CardProps) {
return (
<div className="bg-surface rounded-2xl">
{header && <div className="px-6 py-4 border-b">{header}</div>}
<div className="p-6">{children}</div>
{footer && <div className="px-6 py-4 border-t">{footer}</div>}
</div>
);
}
Compound Components
function Card({ children, variant }) {
return (
<CardContext.Provider value={{ variant }}>
<div className="bg-surface rounded-2xl">{children}</div>
</CardContext.Provider>
);
}
Card.Header = ({ children }) => <div className="px-6 py-4">{children}</div>;
Card.Body = ({ children }) => <div className="p-6">{children}</div>;
Card.Footer = ({ children }) => <div className="px-6 py-4">{children}</div>;
// Usage
<Card>
<Card.Header>Title</Card.Header>
<Card.Body>Content</Card.Body>
</Card>
Polymorphic Components
function Button<T extends React.ElementType = "button">({
as,
children,
...props
}: ButtonProps<T>) {
const Component = as || "button";
return <Component className="btn" {...props}>{children}</Component>;
}
// Usage
<Button as="a" href="/link">Link</Button>
Validation Checklist
[ ] Appropriate pattern for complexity
[ ] TypeScript props properly typed
[ ] displayName set on forwardRef
[ ] Max 2-3 composition levels
Best Practices
DO
- Use children for simple nesting
- Use slots for named regions (max 3-4)
- Forward refs for form elements
- Set displayName
DON'T
- Over-engineer simple components
- Create deep nesting (max 2 levels)
- Forget TypeScript types
- Skip ref forwarding
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?