skills.rest
Soufianouassif
SoufianouassifCOMMUNITY
Explore all skills by this author →
GitHub

data-visualization

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

Updated Apr 6, 2026
Search Tags:#dashboards#charts#react#openapi#data#integrations#data-visualization
One-click install
npx skills add https://github.com/Soufianouassif/Web3-Presale-Platform --skill data-visualization-soufianouassif
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Data & Analytics Skills→
alti3alti3
7

litestar-openapi

Configure Litestar OpenAPI generation with title, version, and schema outputs.

Community
Intermediate
evolution-foundationevolution-foundation
520

workspace-share

Create, list, and revoke public share links for workspace files.

Official
Intermediate
Wahidul123Wahidul123

charts

Create responsive Line, Bar, Area, and Pie charts with recharts.

Community
Advanced
jon23djon23d
3

openapi-codegen

Generate type-safe API clients from OpenAPI specifications using openapi-typescript and openapi-fetch.

Community
Advanced