skills.rest
diShine-digital-agency
diShine-digital-agencyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

shine-chart

Generate publication-ready ECharts, Mermaid, or Vega-Lite visuals from data or specifications.

1|Updated Apr 15, 2026
Search Tags:#charts#mermaid#dashboard#generate#data-visualization#echarts#vegalite
One-click install
npx skills add https://github.com/diShine-digital-agency/SHINE-Code-System --skill shine-chart
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shine-chart
Source: https://github.com/diShine-digital-agency/SHINE-Code-System/tree/main/skills/shine-chart
Command: npx skills add https://github.com/diShine-digital-agency/SHINE-Code-System --skill shine-chart

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The skill helps data teams and creators quickly transform raw data into publication-ready visualizations, reducing manual chart-building effort and ensuring consistent visuals across reports.

Core Features & Use Cases

  • Determine chart type from user request: quantitative charts (echarts), structural diagrams (mermaid), and statistical visuals (vegalite).
  • Prepare and sanitize data: clean, aggregate, and format data for the selected visualization library.
  • Generate and polish visuals: produce either MCP-driven charts or standalone HTML with CDN libraries, with proper colors, labeled axes, and data source citations.
  • Use Case: analysts creating dashboards for quarterly reviews and marketing reports.

Quick Start

Provide a data spec and desired chart type to generate a publication-ready visualization immediately.

Frequently Asked Questions about shine-chart

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

FAQPage Schema
How do I generate publication-ready charts from raw data?▼

To generate publication-ready charts, provide raw data and a desired chart type. The skill cleans, aggregates, and formats the data, then produces visuals with proper axis labels, accessible colors, and data source citations.

What is the best way to choose between ECharts, Mermaid, and Vega-Lite for data visualization?▼

Choose ECharts for quantitative charts, Mermaid for structural diagrams, and Vega-Lite for statistical visuals. The skill determines the appropriate library automatically based on your request and data specifications.

Can I create standalone HTML charts using a CDN without a complex setup?▼

Yes, you can create standalone HTML charts. The skill generates standalone HTML files using CDN libraries, allowing you to publish data-driven visuals immediately without local dependencies.

Does this approach support building interactive dashboards for quarterly reviews?▼

It supports creating individual visuals for dashboards, but delegates complex dashboard construction to a separate builder. You can use the generated MCP-driven visuals or HTML charts within your reporting workflows.

How do I ensure data cleaning and formatting are handled before generating ECharts visuals?▼

Data cleaning and formatting are handled automatically. The skill sanitizes, aggregates, and prepares your raw data specifically for the selected visualization library before generating the final chart.

Related Skills

Explore More Data & Analytics Skills→
bettercallfanbettercallfan

chart-visualization

Generate schema-correct charts from data using JavaScript libraries.

Community
Intermediate
lilbom32lilbom32

interactive-dashboard-builder

Assemble self-contained HTML dashboards with Chart.js and dropdown filters.

Community
Intermediate
phillipganphillipgan
1

chart-image

Generate chart images from JSON data using Vega-Lite and Sharp.

Community
Intermediate
atilladenizatilladeniz
2

system-design

Generate Mermaid diagrams for system design and architecture visualization.

Community
Basic