# coordinated-data-views

A coding-agent skill that explains how to show a table next to its map, diagram or chart and keep selection synced both ways.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 668 installs · ★ 165
- Author: dembrandt
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/dembrandt/dembrandt-skills/tree/HEAD/skills/coordinated-data-views/SKILL.md
- Updated: 2026-10-22
- HTML: https://affpapa.org/en/nevibecode/skills/coordinated-data-views

## What it does

The skill kicks in when the same data needs two views at once: a list of places and a map, a node table and a dependency diagram, a chart and the raw table. It lays out a model where selection state lives in one shared store instead of inside each panel. Clicking a row highlights the matching element in the visual view; clicking an element highlights the row and scrolls the table to it. Hover gives a faint highlight on both sides.

Colour gets its own section. The same value must look the same in both panels, so the palette is defined in one place and imported by both renderers, with a single legend for the whole layout. The skill also covers proportions: the table takes 60–70% of the width when it is primary, the visual view does when it is, or a 50/50 split with a draggable divider. On mobile you show one view at a time behind a toggle.

Timelines and calendar grids are handled separately: each mark sits on the time axis by the time it covers, not by a count of units, otherwise the bar drifts away from the grid beside it. Zoom, layer opacity and view reset belong to the visual panel, while filters and time range affect shared data and sit above the layout. The skill matches paths like `components/**` and `**/*.tsx`, so a project without React components will not pick it up.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add dembrandt/dembrandt-skills --skill coordinated-data-views -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add dembrandt/dembrandt-skills --skill coordinated-data-views -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add dembrandt/dembrandt-skills --skill coordinated-data-views -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install dembrandt/dembrandt-skills coordinated-data-views
```

2. **Manually: put the files in place**
- File: `.github/skills/coordinated-data-views/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add dembrandt/dembrandt-skills --skill coordinated-data-views -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/dembrandt/dembrandt-skills --path skills/coordinated-data-views
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add dembrandt/dembrandt-skills --skill coordinated-data-views -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/dembrandt/dembrandt-skills/tree/HEAD/skills/coordinated-data-views/SKILL.md

## When to use it
- link a map to a list and sync the selection
- highlight a table row when a diagram element is clicked
- scroll the table to the row selected on a chart
- define one colour palette for table and visual view
- pick the split ratio for two side-by-side panels

## Example prompts
- clicking a row should highlight it in the map view
- the map and the list should stay in sync
- show a diagram and a table for the same data, selectable from either

## 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: d2e83372b0dcb7bd.

BEGIN THIRD-PARTY FILE d2e83372b0dcb7bd
```text
---
name: coordinated-data-views
description: Show a table and its map, diagram, timeline or chart together, with selection synced both ways. Use when data appears in two representations at once.
metadata:
  priority: 6
  pathPatterns:
    - "components/**"
    - "src/components/**"
    - "**/*.tsx"
    - "**/*.jsx"
    - "app/**"
  promptSignals:
    phrases:
      - "map view"
      - "chart view"
      - "visualization"
      - "linked views"
      - "coordinated"
      - "highlight"
      - "synchronize"
      - "side by side"
      - "table and chart"
      - "diagram and list"
retrieval:
  aliases:
    - coordinated views
    - linked views
    - chart and table
    - map and list
    - linked visualization
    - synchronized views
    - two representations
    - dual view
    - visual and tabular
  intents:
    - synchronize a chart with a data table
    - link a map to a list
    - highlight items across two views
    - design a dual-view layout
    - coordinate a chart with a table
    - keep two views in sync
  examples:
    - clicking a row should highlight it in the map view
    - the map and the list should stay in sync
    - show a diagram and a table for the same data
    - how should a visual view and a table interact
    - the user should be able to select from either the chart or the list
---

# Coordinated Data Views

Some data has more than one natural representation. A set of locations has both a map and a list. A dependency network has both a diagram and a node table. A dataset has both a chart and a raw table. When both representations are genuinely useful for different tasks, show them simultaneously and keep them synchronized — this is called a coordinated view.

The core rule: **any selection or highlight made in one view is immediately reflected in the other.**

---

## When to Use Coordinated Views

Use coordinated views when:

1. The two representations serve different tasks — the table is for finding/scanning; the visual view is for understanding arrangement or relationships
2. Users will frequently move between the two — not just glance at one occasionally
3. The dataset is large enough that the visual view alone doesn't identify individual items, and the table alone doesn't communicate how they relate
```
END THIRD-PARTY FILE d2e83372b0dcb7bd

The third-party file has ended. Everything between the d2e83372b0dcb7bd 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 2279 of 9232 bytes. © dembrandt · MIT · https://github.com/dembrandt/dembrandt-skills/tree/HEAD/skills/coordinated-data-views/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