system

# System Playground

Creates an interactive HTML canvas for visualizing and simulating feedback loops in systems.

## When to Use

- "map the system"
- "see the loops"
- "why does this keep happening"
- "find leverage points"
- System dynamics analysis
- Understanding recurring patterns

## What It Creates

A single HTML file with:
- Draggable nodes representing system variables
- Directed edges with polarity (+/-)
- Auto-detected reinforcing (R) and balancing (B) loops
- **Poke mode**: Click a node to simulate value changes and watch ripples propagate
- Prompt output for extracting insights

## Skill Protocol

### 1. Understand the System

Before generating, clarify:
- What system are we modeling?
- What are the key variables (5-15)?
- What relationships exist between them?
- What behavior is the user trying to understand?

### 2. Generate the Playground

Create a single self-contained HTML file following the structure in [references/loop-detection.md](references/loop-detection.md).

**Core requirements:**
- Single HTML file, all CSS/JS inline
- No external dependencies
- Dark theme, system font for UI
- Live preview on every change
- Copy button with "Copied!" feedback

### 3. State Shape

```javascript
const state = {
  nodes: [
    { id: 'sales', label: 'Sales', x: 100, y: 100, value: 50 },
    { id: 'revenue', label: 'Revenue', x: 250, y: 100, value: 50 }
  ],
  edges: [
    { from: 'sales', to: 'revenue', polarity: '+', label: 'generates' }
  ],
  loops: [],
  pokeTarget: null,
  pokeDirection: null
};
```

### 4. Layout

```
+--------------------------------------+
|  Canvas (draggable nodes, edges)     |
|  with polarity (+/-) on connections  |
+-------------------------+------------+
|  Sidebar:               | Prompt     |
|  • Loop inventory       | output     |
|  • Poke controls        |            |
|  • Auto-layout button   | [Copy]     |
+-------------------------+------------+
```

### 5. Unique Features

**Poke Mode:**
1. Click any node to select i