coordinated-data-views

Synchronize selections and highlights across paired data tables and visual views.

33|6|Updated Apr 19, 2026
One-click install
npx skills add https://github.com/dembrandt/dembrandt-skills --skill coordinated-data-views
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: coordinated-data-views
Source: https://github.com/dembrandt/dembrandt-skills/tree/main/skills/coordinated-data-views
Command: npx skills add https://github.com/dembrandt/dembrandt-skills --skill coordinated-data-views

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill prevents confusion when the same data appears in a table and a visual representation by keeping selections, highlights, colors, and navigation synchronized across both views.

Core Features & Use Cases

  • Shared Selection State: Ensure clicks and persistent selections in either view update the corresponding item in the other view.
  • Coordinated Interaction: Synchronize hover states, scroll the table to visually selected items, and distinguish transient highlights from persistent selections.
  • Responsive Layouts: Choose table-primary, visual-primary, or equal-weight layouts, with a single-view toggle for mobile screens.
  • Use Case: Design an analytics dashboard where clicking an order in a table highlights its location on a map, while clicking a map marker selects and scrolls to the matching order row.

Quick Start

Use the coordinated data views skill to design a synchronized table-and-map interface with shared selection state, consistent category colors, responsive behavior, and a review checklist.

Frequently Asked Questions about coordinated-data-views

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do coordinated data views handle efficient rendering for large datasets?

Coordinated data views handle efficient rendering for large datasets by optimizing the synchronization logic between tabular and visual representations. This prevents performance bottlenecks when updating shared selection states across extensive maps and charts.

What is the best way to keep dashboard table and chart highlights in sync?

Keeping dashboard table and chart highlights in sync requires distinguishing transient hover highlights from persistent selections. A centralized color definition system ensures visual consistency across both linked views.

How to design responsive dashboards with linked views for mobile screens?

Designing responsive dashboards with linked views for mobile screens involves implementing a single-view toggle. This switches between table-primary, visual-primary, or equal-weight layouts to maintain usability on smaller displays.

Can I scroll a data table to a visually selected item on a map?

Yes, you can scroll a data table to a visually selected item on a map by implementing scroll-into-view behavior. This coordinated interaction automatically navigates the user to the corresponding table row when a map marker is clicked.

How do coordinated data views handle efficient rendering for large datasets?

Coordinated data views handle efficient rendering for large datasets by optimizing the synchronization logic between tabular and visual representations. This prevents performance bottlenecks when updating shared selection states across extensive maps and charts.