# observer-pattern

A skill that teaches your agent the observer pattern for decoupled publish/subscribe in JavaScript and TypeScript.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 638 installs · ★ 257
- Author: patterns.dev
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/PatternsDev/skills/tree/HEAD/javascript/observer-pattern/SKILL.md
- Updated: 2026-04-15
- HTML: https://affpapa.org/en/nevibecode/skills/observer-pattern

## What it does

This skill walks the agent through the observer pattern for event-driven communication. It covers when the pattern fits and when it does not, plus the three parts of an observable: an `observers` array, `subscribe()`, `unsubscribe()` and `notify()`. An ES6 class example shows how to attach observer functions and push data to them when an event fires.

The skill targets `**/*.js` and `**/*.ts` files. The worked example uses React components `Button` and `Switch` with `react-toastify`: a logger and a toast get subscribed to the observable and run on click or toggle. For heavier reactive needs the skill points to RxJS.

The instructions list the cases to avoid: a very high subscriber count where notification speed matters, one-to-one communication that a plain callback already handles, and setups where debugging implicit event chains costs more than the decoupling buys you. A complex observer also drags down notification performance.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill observer-pattern -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/observer-pattern/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/observer-pattern/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill observer-pattern -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/observer-pattern/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill observer-pattern -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/observer-pattern/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install PatternsDev/skills observer-pattern
```

2. **Manually: put the files in place**
- File: `.github/skills/observer-pattern/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill observer-pattern -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/PatternsDev/skills --path javascript/observer-pattern
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/observer-pattern/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill observer-pattern -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/PatternsDev/skills/tree/HEAD/javascript/observer-pattern/SKILL.md

## When to use it
- decouple components that need to react to state changes
- add and remove event subscribers without tight coupling
- fan one event out to several handlers
- decide when a plain callback beats the observer pattern
- weigh the debugging cost of implicit event chains

## Example prompts
- Design an observable with subscribe, unsubscribe and notify methods for my TypeScript module
- I want a button click and a switch toggle to notify both a logger and a toast — show me how to wire them with the observer pattern
- Should I use the observer pattern here or is a plain callback enough?

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: e13a0c1ead5b25d8.

BEGIN THIRD-PARTY FILE e13a0c1ead5b25d8
````text
---
name: observer-pattern
description: Teaches the observer pattern for event-driven communication. Use when you need decoupled publish/subscribe behavior where multiple parts of your system react to state changes or events.
paths:
  - "**/*.js"
  - "**/*.ts"
license: MIT
metadata:
  author: patterns.dev
  version: "1.1"
related_skills:
  - "module-pattern"
  - "singleton-pattern"
---

# Observer Pattern

## Table of Contents

- [When to Use](#when-to-use)
- [When NOT to Use](#when-not-to-use)
- [Instructions](#instructions)
- [Details](#details)
- [Source](#source)

With the **observer pattern**, we can _subscribe_ certain objects, the **observers**, to another object, called the **observable**. Whenever an event occurs, the observable notifies all its observers!

## When to Use

- Use this when you need to notify multiple parts of an application about state changes or events
- This is helpful for implementing event-driven, asynchronous communication between components

## When NOT to Use

- When the subscriber count is very high and notification performance becomes critical
- When simpler callbacks or direct function calls suffice for one-to-one communication
- When debugging difficulty from implicit event chains outweighs the decoupling benefit

## Instructions

- Create an Observable class with `subscribe`, `unsubscribe`, and `notify` methods
- Keep observers loosely coupled to the observable for better separation of concerns
- Be mindful of performance when notifying many subscribers with complex logic
- Consider using libraries like RxJS for more advanced reactive programming needs

## Details

An observable object usually contains 3 important parts:

- `observers`: an array of observers that will get notified whenever a specific event occurs
- `subscribe()`: a method in order to add observers to the observers list
- `unsubscribe()`: a method in order to remove observers from the observers list
- `notify()`: a method to notify all observers whenever a specific event occurs

Let's create an observable using an ES6 class:

```js
class Observable {
  constructor() {
    this.observers = [];
  }

  subscribe(func) {
    this.observers.push(func);
  }

  unsubscribe(func) {
    this.observers = this.observers.filter((observer) => observer !== func);
  }

  notify(data) {
    this.observers.forEach((observer) => observer(data));
  }
}
```

We can now add observers to the list of observers with the subscribe method, remove the observers with the unsubscribe method, and notify all subscribers with the notify method.

Let's build something with this observable. We have a very basic app that only consists of two components: a `Button`, and a `Switch`.

```js
````
END THIRD-PARTY FILE e13a0c1ead5b25d8

The third-party file has ended. Everything between the e13a0c1ead5b25d8 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2703 of 7158 bytes. © patterns.dev · MIT · https://github.com/PatternsDev/skills/tree/HEAD/javascript/observer-pattern/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md