data-visualization

Name: data-visualization
Availability: InStock
Author: Soufianouassif

Connect data sources to create dashboards, reports, and dataset explorers.

Updated Apr 6, 2026

Search Tags:#dashboards #charts #react #openapi #data #integrations #data-visualization

Ready to run

npx skills add https://github.com/Soufianouassif/Web3-Presale-Platform --skill data-visualization-soufianouassif

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: data-visualization
Source: https://github.com/Soufianouassif/Web3-Presale-Platform/tree/main/.local/skills/data-visualization
Command: npx skills add https://github.com/Soufianouassif/Web3-Presale-Platform --skill data-visualization-soufianouassif

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Build interactive data visualization apps (dashboards, analysis reports, dataset explorers) with React, Recharts, and OpenAPI codegen workflow. Handles all data sources internally including integrations, databases, APIs, and CSV files.

Core Features & Use Cases

Create dashboards, reports, and dataset explorers that pull from multiple sources (integrations, databases, CSV, and REST APIs).
Visualize data with charts, data tables, and CSV handling; seamlessly switch between dashboard, analysis report, and dataset explorer app types.
Leverage a codegen-driven backend/OpenAPI workflow to define API routes, data fetch logic, and design constraints, with a dedicated design subagent for UI/layout.

Quick Start

Create the artifact with createArtifact() for data-visualization, connect data sources using searchIntegrations() / proposeIntegration(), and then run the design subagent to implement the dashboard.

Frequently Asked Questions about data-visualization

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

FAQPage Schema

How do I create interactive dashboards from CSV files and REST APIs?▼

To create interactive dashboards, you connect data sources like CSV files and REST APIs using integration search tools, then generate API routes and fetch data via React hooks to render charts and data tables. The workflow enforces a design-driven approach using OpenAPI codegen.

Can I use React and Recharts to build data visualization apps with an OpenAPI workflow?▼

Yes, you can use React and Recharts within an OpenAPI codegen workflow to build data visualization apps. The process generates API routes and data fetch logic, leveraging React hooks from the API client to supply data for interactive charts and dataset explorers.

Does this data visualization approach support connecting to multiple data sources simultaneously?▼

Connecting to multiple data sources simultaneously is supported. You can search and propose integrations to pull data from databases, external APIs, and CSV files, aggregating them into a single interactive dashboard, analysis report, or dataset explorer artifact.

What is the best way to structure API routes for fetching dashboard data?▼

The best way to structure API routes for fetching dashboard data is using an OpenAPI codegen workflow. This enforces design constraints, defines the data fetch logic systematically, and pairs with dedicated React hooks to retrieve and serve data to interactive charts and tables.

How do I switch between building a dashboard, analysis report, and dataset explorer?▼

You can switch between a dashboard, analysis report, and dataset explorer by selecting the appropriate artifact type during creation. All three app types share the same underlying data connection logic, OpenAPI codegen routing, and React-based visualization components.