# JS Composite Pattern

> JS Composite Pattern

- Skill: `intense-visions/js-composite-pattern` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add intense-visions/js-composite-pattern`
- Raw SKILL.md: https://api.skillmd.com/api/skills/intense-visions/js-composite-pattern/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: Intense-Visions (https://skillmd.com/u/intense-visions)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/intense-visions/js-composite-pattern

---

# JS Composite Pattern

> Compose objects into tree structures and treat individual objects and composites uniformly

## When to Use

- You have a tree/hierarchy structure (file system, org chart, UI component tree, menu system)
- Clients should treat individual objects and groups of objects the same way
- Operations need to recurse naturally over the tree

## Instructions

1. Define a component interface with the operation that both leaves and composites share.
2. Leaf classes implement the operation directly.
3. Composite classes hold a collection of children and delegate the operation to each child.
4. Clients call the operation on any component without checking whether it is a leaf or composite.

```javascript
class File {
  constructor(name, size) {
    this.name = name;
    this.size = size;
  }
  getSize() {
    return this.size;
  }
}

class Folder {
  constructor(name) {
    this.name = name;
    this.children = [];
  }
  add(child) {
    this.children.push(child);
    return this;
  }
  getSize() {
    return this.children.reduce((sum, child) => sum + child.getSize(), 0);
  }
}

const root = new Folder('src')
  .add(new File('index.js', 120))
  .add(new Folder('utils').add(new File('helpers.js', 80)));
root.getSize(); // 200
```

## Details

The Composite pattern lets you build tree structures where clients do not need to distinguish between leaves and branches. Every node in the tree responds to the same interface, so operations naturally recurse.

**Trade-offs:**

- The uniform interface may expose methods on leaves that do not make sense (e.g., `add()` on a File)
- Deep trees can cause stack overflows with recursive operations — consider iterative traversal for very large trees
- Type checking is harder — all nodes look the same at the interface level

**When NOT to use:**

- When the structure is flat (no nesting) — just use an array
- When leaves and composites have very different behaviors — forcing a common interface is awkward
- When the hierarchy is dynamic and deeply nested — consider a database or graph instead

## Source

https://patterns.dev/javascript/composite-pattern

## Process

1. Read the instructions and examples in this document.
2. Apply the patterns to your implementation, adapting to your specific context.
3. Verify your implementation against the details and edge cases listed above.

## Harness Integration

- **Type:** knowledge — this skill is a reference document, not a procedural workflow.
- **No tools or state** — consumed as context by other skills and agents.

## Success Criteria

- The patterns described in this document are applied correctly in the implementation.
- Edge cases and anti-patterns listed in this document are avoided.