skills.rest
El3tar-cmd
El3tar-cmdCOMMUNITY
Explore all skills by this author →
GitHub

data-visualization

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

18|4|Updated Apr 3, 2026
Search Tags:#dashboards#charts#react#openapi#recharts#data-visualization
One-click install
npx skills add https://github.com/El3tar-cmd/DevHive-Cli --skill data-visualization-el3tar-cmd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: data-visualization
Source: https://github.com/El3tar-cmd/DevHive-Cli/tree/main/skills/data-visualization
Command: npx skills add https://github.com/El3tar-cmd/DevHive-Cli --skill data-visualization-el3tar-cmd

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables teams to build interactive data-visualization apps (dashboards, reports, and dataset explorers) by integrating data sources, rendering charts with React and Recharts, and generating OpenAPI-backed endpoints.

Core Features & Use Cases

  • Build dashboards, analytics reports, and dataset explorers that fetch data from integrations, databases, and CSV files.
  • Scaffold charts (Area/Line/Bar) with best-practice patterns, tooltips, legends, and responsive layouts.
  • Drive frontend experiences from a design-scaffold workflow, leveraging generated hooks from @workspace/api-client-react and an OpenAPI-driven API surface.

Quick Start

Create a data-visualization artifact, connect your data sources, and scaffold your first chart.

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

Build interactive data dashboards by orchestrating data from multiple sources. This skill scaffolds React and Recharts visualizations backed by an OpenAPI-driven API surface, fetching data from integrations, databases, and CSVs.

What is the best way to generate React charts from a CSV file?▼

Generate React charts from CSV files by connecting the dataset as a data source. The skill scaffolds Area, Line, and Bar charts using Recharts, complete with tooltips, legends, and responsive layouts driven by an OpenAPI API surface.

Does this data-visualization skill work with OpenAPI and React?▼

Yes, this data-visualization skill works with OpenAPI and React. It enforces deterministic workflows via codegen, generating type-safe data access hooks from @workspace/api-client-react to drive consistent frontend visuals.

Can I create analytics reports and dataset explorers without writing manual API hooks?▼

Create analytics reports and dataset explorers without manual API hooks by leveraging generated hooks from @workspace/api-client-react. The design-scaffold workflow ensures type-safe data access directly from your OpenAPI specification.

How do I scaffold a dashboard with consistent visuals and type-safe data access?▼

Scaffold dashboards with consistent visuals and type-safe data access using the skill's deterministic codegen workflow. It orchestrates design subagents and generated React hooks to enforce best-practice chart patterns across your data sources.

When should I use Recharts for data visualization instead of other charting libraries?▼

Use Recharts for data visualization when you need to scaffold React dashboards backed by an OpenAPI-driven API surface. It provides best-practice Area, Line, and Bar chart patterns with responsive layouts and type-safe data hooks.

Related Skills

Explore More Data & Analytics Skills→
SoufianouassifSoufianouassif

data-visualization

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

Community
Advanced
sarimofficialsarimofficial

Dockerfile Generator

Generate multi-stage Dockerfiles for Next.js frontends and FastAPI backends.

Community
Intermediate
HouseGarofaloHouseGarofalo
3

data-visualization

Generate React data visualizations with Recharts and Chart.js.

Official
Intermediate
ckrono-progckrono-prog

data-visualization

Automate interactive data visualization apps with React, Recharts, and OpenAPI codegen.

Community
Advanced