skills.rest
YSheldon
YSheldonCOMMUNITY
Explore all skills by this author →
GitHub

data-visualization

Build interactive dashboards, charts, and tables from multiple data sources.

Updated Apr 12, 2026
Search Tags:#dashboards#charts#openapi#codegen#csv#data-visualization#design-subagent
One-click install
npx skills add https://github.com/YSheldon/Prompt-Log --skill data-visualization-ysheldon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: data-visualization
Source: https://github.com/YSheldon/Prompt-Log/tree/main/.local/skills/data-visualization
Command: npx skills add https://github.com/YSheldon/Prompt-Log --skill data-visualization-ysheldon

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Data visualization is often manual, disconnected, and hard to scale. This skill provides a unified framework to build interactive dashboards, analytics reports, and dataset explorers using React, Recharts, and OpenAPI codegen, while handling data sources internally (including integrations, databases, APIs, and CSV files).

Core Features & Use Cases

  • Build dashboards, reports, and dataset explorers with charts, data tables, and CSV handling.
  • Visualize data from diverse sources (integrations like Stripe, Google Analytics, Linear; databases; REST APIs; CSV files) with a contract-first backend workflow.
  • Use cases include revenue dashboards, product analytics, and data exploration tools that support filters, drill-downs, and cross-source comparisons.

Quick Start

Create a data-visualization artifact and follow the workflow to connect data sources, patch the UI, and launch the design subagent.

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 multiple data sources?▼

Build interactive dashboards by connecting integrations, databases, REST APIs, and CSV files to a contract-first backend. This generates React hooks and UI components for data access, producing charts, tables, and reports with filters and drill-downs.

Can I visualize CSV data and API responses in the same dashboard?▼

Yes, you can visualize CSV data and API responses together. The dashboard supports cross-source comparisons by unifying diverse data formats through an OpenAPI codegen-driven backend and generated React hooks.

How does the design subagent work for data visualization?▼

The design subagent works by handling UI generation after data sources are connected. It patches the React interface to render charts, data tables, and dataset explorers, completing the visualization workflow.

What's the best way to create a revenue dashboard with Stripe and Google Analytics data?▼

Create a revenue dashboard by connecting Stripe and Google Analytics as data integrations. The skill handles the cross-source data flow, enabling you to build custom reports with filters and drill-downs for product analytics.

Do I need React and Recharts to use this data visualization workflow?▼

Yes, React and Recharts are required. The skill uses an OpenAPI codegen workflow to generate React hooks and UI components, meaning your environment must support this frontend stack to render the dashboards and charts.

What are the limitations of using a codegen-driven backend for data visualization?▼

A codegen-driven backend requires a contract-first approach, meaning you must define OpenAPI specifications before generating React hooks. This adds a setup step but ensures type-safe data access across integrations, databases, and CSV files.

Related Skills

Explore More Data & Analytics Skills→
gopforevergopforever

data-visualization

Connect data sources and render interactive visualizations in dashboards and reports.

Community
Intermediate
nesihaver-ILnesihaver-IL

analytics-metrics

Build interactive analytics dashboards and charts in React with Recharts.

Community
Intermediate
El3tar-cmdEl3tar-cmd
18

data-visualization

Develops interactive data-visualization dashboards, reports, and explorers from multiple sources.

Community
Advanced
WarrenZhu050413WarrenZhu050413
7

Rapid Full-Stack Prototyping

Build a React and Vite frontend with a RESTful FastAPI or Express backend.

Community
Intermediate