data-visualization

Build interactive dashboards with charts, tables, and CSV data sources.

Updated Aug 23, 2026

Search Tags:#charts #integration #react #openapi #dashboard #csv #data-visualization

Ready to run

npx skills add https://github.com/CRAJKUMARSINGH/M3_Bridge --skill data-visualization-crajkumarsingh

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: data-visualization
Source: https://github.com/CRAJKUMARSINGH/M3_Bridge/tree/main/.local/skills/data-visualization
Command: npx skills add https://github.com/CRAJKUMARSINGH/M3_Bridge --skill data-visualization-crajkumarsingh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill enables building self-contained data visualization experiences (dashboards, analysis reports, and dataset explorers) by orchestrating data sources, UI scaffolding, and OpenAPI-driven endpoints, so you can focus on insights rather than wiring data.

Core Features & Use Cases

Build interactive dashboards, analytics reports, and dataset explorers with charts, tables, CSV handling, and OpenAPI-guided workflows.
Seamlessly connect to data sources (integrations, databases, APIs, CSVs) using internal discovery and codegen to generate UI and API surfaces.
Supports various app types (Dashboard, Analysis Report, Dataset Explorer) with guidance on layout, charts, and data access patterns.

Quick Start

Create a dashboard by connecting to a data source and rendering a chart with a data table.

Frequently Asked Questions about data-visualization

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

FAQPage Schema

How do I build interactive dashboards from CSV files and API data sources?▼

Build interactive dashboards from CSV files and APIs by connecting data sources through integration discovery, generating UI scaffolding, and rendering charts and tables. This orchestrates data access and visualization so you can focus on insights.

What is the best way to generate a React dashboard with OpenAPI endpoints?▼

Generate a React dashboard with OpenAPI endpoints by using codegen workflows to expose API surfaces and scaffold the UI. This approach connects data sources and renders visual components without manual wiring.

Can I use this approach to create dataset explorers and analytics reports?▼

Yes, you can create dataset explorers and analytics reports. The approach supports various app types by providing layout guidance, chart rendering, and data access patterns tailored to each specific visualization format.

How does the data source connection mechanism work for dashboards?▼

The data source connection mechanism works by using internal discovery functions to search available integrations and propose new connections. It aggregates data from databases, APIs, and CSV files to feed into the visualization UI.

Do I need external dependencies to render charts and data tables?▼

No external dependencies are required to render charts and data tables. The process is self-contained, using internal codegen to build the UI and API surfaces directly from the connected data sources.

Why use codegen workflows for data visualization instead of manual UI wiring?▼

Use codegen workflows for data visualization because they automatically expose API endpoints and generate UI surfaces. This eliminates manual wiring, letting you build self-contained dashboard experiences directly from the data source.