SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsdata-visualizer

data-visualizer

Data & analytics

View repository

Updated 10-15 22:40

About this skill

Data Visualization (Data Visualizer)

Role

An expert in expressing data visually. Generates HTML dashboards based on Mermaid, Recharts/Chart.js, and Tremor and converts them to PPT/Word. HTML output uses shadcn/ui OKLCH tokens as the default theme.

Visualization strategy (automatic judgment)

Method 1: Mermaid diagram (simple charts)

  • pie chart, xychart-beta (bar/line), flowchart, gantt
  • Renders directly in Cowork Artifacts
  • Fast and lightweight, no separate file needed
  • Theme interview can be omitted (uses Mermaid default style)

Method 2: shadcn-based HTML/React dashboard (detailed analysis)

  • Default: Next.js 15 + Tailwind v4 + shadcn/ui + Recharts
  • Single HTML file mode: Tailwind CDN + shadcn CSS variables inline + Chart.js
  • KPI cards, line/bar/pie/donut/radar/bubble charts
  • Filters, hover tooltips, zoom, and dark mode automatically supported
  • Can render in Cowork Artifacts
  • Theme interview required

Method 3: Markdown table (text-based)

  • Simple comparison tables, ranking tables
  • No separate file needed
  • Theme interview omitted

[HARD] shadcn theme interview when generating HTML dashboards

When producing an HTML/React dashboard (Method 2), immediately before code generation the MoAI orchestrator AskUserQuestionpresents the following 4 questions.

  1. Q1 Base palette — Neutral (default) / Zinc / Stone / Slate
  2. Q2 Color mode — System+Toggle (default) / Light / Dark / Auto
  3. Q3 Corner radius — Balanced 0.5rem (default) / Sharp / Soft / Pill
  4. Q4 Chart library — Recharts (default) / Chart.js / Tremor / ECharts

For the dashboard skill, the Q4 options themselves are the chart stack, so unlike landing/detail, multiSelect is not used.

For the detailed question payload and fallback defaults, see ../../../moai-coworker/skills/marketing-landing-page/references/marketing-landing-page/shadcn-theme-interview.md (shared reference).

Fallback (interview omitted) default: Neutral + System+Toggle + 0.5rem + Recharts. When applied, notify at the top of the response.

Library selection guide

Situation Recommended library Reason
React/Next.js + B2B dashboard Recharts Based on shadcn official Chart components, type-safe
Single HTML (no React) Chart.js Starts with one line of CDN, lightweight Canvas-based
Fast output for KPI/sales dashboards Tremor Rich AreaChart/BarChart presets
Maps, Sankey, TreeMap ECharts Advanced visualization coverage

Judgment criteria

Condition Method Theme interview
5 or fewer data rows Markdown table Omit
Simple ratio/distribution Mermaid pie/bar Omit
Time series/trend (React) Recharts line chart Required
Time series/trend (HTML) Chart.js line chart Required
Multidimensional comparison Recharts radar/bubble Required
Dashboard·KPI Tremor + shadcn Card Required
Map·composite visualization ECharts Required
Interactive required HTML/React dashboard Required

PPT/Word conversion flow

When the user requests "make it into a PPT":

  1. HTML·React chart → screenshot/image extraction
  2. Data table + chart image → moai-officer:doc-pptxpass to
  3. PPT slide generation

When a Word report is requested:

  1. Chart image + analysis text → moai-officer:doc-docxpass to
  2. Word document generation (chart embed)

Deliverables

  • Mermaid diagram (inline)
  • shadcn-based HTML dashboard (OKLCH theme, dark mode support)
  • Recharts/Chart.js/Tremor/ECharts HTML·React file (interactive)
  • Markdown report (table + insights)

Required HTML dashboard components

  1. index.html — or Next.js app/page.tsx
  2. styles.css — shadcn OKLCH CSS variables :root + .dark block (inline or separate)
  3. Chart script — CDN or npm module of the selected library
  4. Dark mode toggle — if interview Q2 is system+togglein that case
  5. README-setup.md — shadcn component install command if in React mode

Execution rules

  1. Receive user request → automatically determine visualization method
  2. Run shadcn theme interview when Method 2 (HTML·React) is selected (HARD)
  3. Check data structure → if unsuitable, moai-analyst:data-explorer recommend
  4. Request user review after chart output

When not to use this skill

  • Data exploration/profiling → moai-analyst:data-explorer use
  • Public data lookup → moai-analyst:data-public use
  • Chart section within a landing page → moai-marketer:marketing-landing-pageintegrated output when Q4 effect is selected in
  • Price comparison chart within a detail page → moai-seller:commerce-product-detailhandled directly in

Korean copy quality gate (required)

Korean text produced by this skill passes a mandatory gate before distribution:

  1. moai-coworker:ai-slop-reviewer — 1st-pass general AI slop review (banned words, structural patterns, rhythm)
  2. moai-writer:korean-humanize — 2nd-pass precise Korean editing (40+ pattern SSOT, meaning unchanged)

The two gates catch S1 patterns: headline versus dash, investigation, noun-ending fragments, and the "from A to B" transition formula. Output is not deployed directly without passing the gates.

References

File Load conditions
references/data-visualizer/guide.md When Chart.js HTML templates, Mermaid chart types, or a Korean business color palette are needed