Back to skills
SkillHub ClubWrite Technical DocsTech WriterData / AIDesigner

understanding-flow

This skill explains the core architectural pattern of walkerOS with clear diagrams and TypeScript examples. It focuses on the Source→Collector→Destination event flow, separation of concerns, and the universal push interface. Helps developers understand how to compose modular pipelines for event processing.

Packaged view

This page reorganizes the original catalog entry around fit, installability, and workflow context first. The original raw source lives below.

Stars
327
Hot score
99
Updated
March 20, 2026
Overall rating
A7.7
Composite score
5.0
Best-practice grade
A92.0

Install command

npx @skill-hub/cli install elbwalker-walkeros-understanding-flow
event-architecturedata-flowwalker-oscomponent-designtechnical-docs

Repository

elbwalker/walkerOS

Skill path: skills/understanding-flow

This skill explains the core architectural pattern of walkerOS with clear diagrams and TypeScript examples. It focuses on the Source→Collector→Destination event flow, separation of concerns, and the universal push interface. Helps developers understand how to compose modular pipelines for event processing.

Open repository

Best for

Primary workflow: Write Technical Docs.

Technical facets: Tech Writer, Data / AI, Designer.

Target audience: developers learning walkerOS architecture or designing event processing pipelines with modular components.

License: Unknown.

Original source

Catalog source: SkillHub Club.

Repository owner: elbwalker.

This is still a mirrored public skill entry. Review the repository before installing into production workflows.

What it helps with

  • Install understanding-flow into Claude Code, Codex CLI, Gemini CLI, or OpenCode workflows
  • Review https://github.com/elbwalker/walkerOS before adding understanding-flow to shared team environments
  • Use understanding-flow for documentation workflows

Works across

Claude CodeCodex CLIGemini CLIOpenCode

Favorites: 0.

Sub-skills: 0.

Aggregator: No.

Original source / Raw SKILL.md

---
name: understanding-flow
description:
  Use when learning walkerOS architecture, understanding data flow, or designing
  composable event pipelines. Covers Source→Collector→Destination pattern and
  separation of concerns.
---

# Understanding walkerOS Flow

## Overview

walkerOS follows a **Source → Collector → Destination(s)** architecture for
composable, modular event processing.

**Core principle:** Separation of concerns. Each component has one job.
Components are composable and replaceable.

## The Flow Pattern

```
Sources          →    Collector    →    Destinations
(Data Capture)        (Processing)      (Delivery)

- Browser DOM         - Validation      - Google Analytics
- DataLayer           - Enrichment      - Meta Pixel
- Server HTTP         - Consent check   - Custom API
- Cloud Functions     - Routing         - Data Warehouse
```

## Key Concepts

### Composability

A Flow combines components. You can:

- Use multiple sources feeding one collector
- Route events to multiple destinations
- Swap components without changing others

### The Flow Type

See [packages/core/src/types/flow.ts](../../packages/core/src/types/flow.ts) for
the canonical interface.

```typescript
// Conceptual structure (see source for full type)
interface Flow {
  sources?: Record<string, Source>;
  collector: Collector;
  destinations?: Record<string, Destination>;
}
```

### Universal Push Interface

**All components communicate via `push` functions:**

| Component   | Push Signature                | Purpose               |
| ----------- | ----------------------------- | --------------------- |
| Source      | `push(input) → events`        | Capture external data |
| Collector   | `push(event) → void`          | Process and route     |
| Destination | `push(event, context) → void` | Transform and deliver |

The `elb()` function is an alias for `collector.push` - used for component
wiring.

### startFlow Helper

See [packages/collector/src/flow.ts](../../packages/collector/src/flow.ts) for
the `startFlow` function.

```typescript
import { startFlow } from '@walkeros/collector';

const { collector, elb } = await startFlow({
  sources: {
    /* ... */
  },
  destinations: {
    /* ... */
  },
});
```

## Separation of Concerns

| Concern          | Handled By     | NOT Handled By          |
| ---------------- | -------------- | ----------------------- |
| Event capture    | Sources        | Collector, Destinations |
| Event structure  | Event model    | Components              |
| Consent checking | Collector      | Sources, Destinations   |
| Transformation   | Mapping system | Raw push calls          |
| Delivery         | Destinations   | Sources, Collector      |

## Related

**Skills:**

- [understanding-events skill](../understanding-events/SKILL.md) - Event model
- [understanding-destinations skill](../understanding-destinations/SKILL.md) -
  Destination interface
- [understanding-sources skill](../understanding-sources/SKILL.md) - Source
  interface

**Package READMEs:**

- [packages/collector/README.md](../../packages/collector/README.md) - Collector
  details

**Source Files:**

- [packages/collector/src/flow.ts](../../packages/collector/src/flow.ts) -
  startFlow implementation

**Documentation:**

- [Website: Flow](../../website/docs/getting-started/flow.mdx) - Flow concept
- [Website: Collector](../../website/docs/collector/index.mdx) - Collector docs
understanding-flow | SkillHub