# JS Abstract Factory Pattern

> JS Abstract Factory Pattern

- Skill: `intense-visions/js-abstract-factory-pattern` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add intense-visions/js-abstract-factory-pattern`
- Raw SKILL.md: https://api.skillmd.com/api/skills/intense-visions/js-abstract-factory-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-abstract-factory-pattern

---

# JS Abstract Factory Pattern

> Create families of related objects without specifying their concrete classes

## When to Use

- You need to create sets of related objects that must work together (e.g., a UI theme with buttons, inputs, and modals that all match)
- The exact family of objects is determined at runtime (e.g., based on platform or config)
- You want to enforce consistency across an entire family of products

## Instructions

1. Define an abstract factory interface listing all creation methods.
2. Implement one concrete factory per product family.
3. Clients use only the abstract factory interface — they never instantiate concrete products directly.
4. Switch families by swapping the factory instance, not by changing client code.

```javascript
// Abstract Factory (interface defined by convention)
class LightThemeFactory {
  createButton() {
    return { color: 'white', text: 'dark' };
  }
  createInput() {
    return { background: '#f0f0f0', border: '1px solid #ccc' };
  }
}

class DarkThemeFactory {
  createButton() {
    return { color: '#333', text: 'white' };
  }
  createInput() {
    return { background: '#222', border: '1px solid #555' };
  }
}

function renderUI(factory) {
  const button = factory.createButton();
  const input = factory.createInput();
  return { button, input };
}

const ui = renderUI(new DarkThemeFactory());
```

## Details

The Abstract Factory is a creational pattern that sits one level of abstraction above the Factory pattern. Where a Factory creates one type of product, an Abstract Factory creates an entire suite of related products.

**Trade-offs:**

- Significantly more code than a simple factory — only justified when product families truly need to be swapped
- Adding a new product type requires changes to every factory implementation

**When NOT to use:**

- When you only have one product family — a simple factory or `new` is sufficient
- When products do not need to be coordinated or consistent with each other

## Source

https://patterns.dev/javascript/abstract-factory-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.