skills.rest
AmirEmad11
AmirEmad11COMMUNITY
Explore all skills by this author →
GitHub

data-visualization

Build interactive dashboards, analysis reports, and dataset explorers with React, Recharts, and OpenAPI codegen.

Updated Apr 20, 2026
Search Tags:#data visualization#analytics#react#openapi#dashboard#csv#recharts
One-click install
npx skills add https://github.com/AmirEmad11/instabot --skill data-visualization-amiremad11
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: data-visualization
Source: https://github.com/AmirEmad11/instabot/tree/main/.local/skills/data-visualization
Command: npx skills add https://github.com/AmirEmad11/instabot --skill data-visualization-amiremad11

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-csv, papaparse, @tanstack/react-table, d3-scale-chromatic, recharts, @tanstack/react-query, and includes references (resource) components.

What problem does it solve? Turning raw data from integrations, databases, APIs, or CSV files into a polished interactive visualization app normally requires wiring up data fetching, chart libraries, layouts, and export controls by hand. This Skill automates that entire workflow, producing a complete React app with charts, KPI cards, data tables, and print-ready exports. ## Core Features & Use Cases - Three App Types: Classifies requests into Dashboards (KPI cards + chart grids), Analysis Reports (narrative layout with embedded charts), or Dataset Explorers (filter sidebar + reactive tables). - Internal Data Fetching: Connects to integrations (Stripe, Google Analytics, Linear), app databases via Drizzle ORM, CSV files via PapaParse, or direct REST APIs without requiring separate data-query steps. - Contract-First Backend: Uses an OpenAPI spec with codegen to generate typed React Query hooks, plus DB-backed caching for slow or rate-limited endpoints. - Use Case: Ask for a dashboard showing Stripe revenue, and the Skill scaffolds the project, connects the integration, implements API routes, and delegates the frontend to a design subagent producing a filterable, exportable analytics dashboard. ## Quick Start Create a sales analytics dashboard from my Stripe data with revenue trends, KPI cards, and a filterable transactions 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 a dashboard from Stripe or other integration data?▼

Request the dashboard directly; the Skill searches and proposes integrations internally using searchIntegrations and proposeIntegration, then writes data-fetching routes in the api-server. You do not need to query the data with a separate skill first.

What chart types should I use for time-series data in Recharts?▼

Use AreaChart for single-series trends and LineChart for three or more overlapping series. Bar charts are reserved for discrete category comparisons or small counts of 4-8 bars, never for continuous time data.

Can I visualize data from an uploaded CSV file?▼

Yes. CSV files are placed in the api-server data directory and parsed with PapaParse using header detection and dynamic typing. Routes serve the parsed data to the frontend through generated typed hooks.

When should I not use this data visualization skill?▼

Do not use it when you only want to ask questions about data in chat or fetch and transform data without visual output; the query-integration-data skill handles those cases. It is intended only for requests that produce a visual web interface.

Why are my dashboard API endpoints slow or hitting rate limits?▼

Integration SDKs lazy-load relations, causing N+1 API call explosions, and dashboards hit 5-7 endpoints per load. Use batch fetching strategies and add DB-backed response caching with a 15-minute TTL when endpoints exceed 10 seconds.

Related Skills

Explore More Data & Analytics Skills→
SaberAlouiSaberAloui

query-integration-data

Query and modify data in connected integrations and data warehouses via API calls.

Community
Advanced
KaranKathur06KaranKathur06

creating-dashboards

Create coordinated analytics dashboards with KPI cards, charts, tables, and shared filters.

Community
Advanced
zltastopazltastopa
3

critical-validation

Validate contract analysis findings against data artifacts and innocent explanations.

Official
Advanced
PovertyActionPovertyAction
3

duckdb

Run SQL queries and transform CSV, Parquet, JSON, and Excel files via the DuckDB CLI.

Official
Intermediate