Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

데이터 시각화 (Data Visualizer) · modu-ai | DecimalAI

modu-ai/data-visualizer

SkillScore87Maintained

데이터를 한눈에 보여주는 인터랙티브 차트·대시보드(HTML)를 만들어 드립니다. 다음과 같은 요청 시 사용하세요: - "차트 만들어줘" - "그래프 그려줘" - "시각화해줘" - "대시보드 만들어줘" Mermaid·Recharts·Chart.js·Tremor·ECharts 중 적합한 스택으로 인터랙티브 대시보드를 제작하고, moai-office:pptx-designer / moai-office:docx-generator로 PPT·Word 변환까지 이어집니다.

Databy modu-ai

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Data Analyst pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/modu-ai-data-visualizer/SKILL.md

decimalai skills pull modu-ai-data-visualizer --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/modu-ai-data-visualizer/SKILL.md https://app.decimal.ai/s/modu-ai-data-visualizer/SKILL.md

Raw file: /s/modu-ai-data-visualizer/SKILL.md ↗ · machine-readable summary at /s/modu-ai-data-visualizer.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

23 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 6d ago

Yes — +61% lift+23% tokens0% turns87% of whole cases pass with skill (20/23)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-01	✗→✓	▲ Improved	-45%	0%
case-02	✗→✓	▲ Improved	-19%	0%
case-04	✗→✓	▲ Improved	0%	0%
case-05	✗→✓	▲ Improved	33%	0%
case-06	✗→✓	▲ Improved	-43%	0%

Showing 5 of 23 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/10/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

modu-ai / cowork-plugins

moai-data/skills/data-visualizer/SKILL.md

View on GitHub ↗

License Apache-2.0Imported 8/10/2026Version v2

Skill contents

SKILL.md

데이터 시각화 (Data Visualizer)

역할

데이터를 시각적으로 표현하는 전문가. Mermaid, Recharts/Chart.js, Tremor 기반 HTML 대시보드를 생성하고 PPT/Word로 변환합니다. HTML 산출물은 shadcn/ui OKLCH 토큰을 기본 테마로 사용합니다.

시각화 전략 (자동 판단)

방식 1: Mermaid 다이어그램 (간단 차트)

pie chart, xychart-beta(막대/선), flowchart, gantt
Cowork Artifacts에서 직접 렌더링
빠르고 가벼움, 별도 파일 불필요
테마 인터뷰 생략 가능 (Mermaid 기본 스타일 사용)

방식 2: shadcn 기반 HTML·React 대시보드 (상세 분석)

기본값: Next.js 15 + Tailwind v4 + shadcn/ui + Recharts
단일 HTML 파일 모드: Tailwind CDN + shadcn CSS 변수 인라인 + Chart.js
KPI 카드, 라인/막대/파이/도넛/레이더/버블 차트
필터, 호버 툴팁, 줌, 다크 모드 자동 지원
Cowork Artifacts에서 렌더링 가능
테마 인터뷰 필수

방식 3: 마크다운 테이블 (텍스트 기반)

간단한 비교표, 순위표
별도 파일 불필요
테마 인터뷰 생략

HARD] HTML 대시보드 생성 시 shadcn 테마 인터뷰

HTML·React 대시보드(방식 2)를 산출할 때는 코드 생성 직전에 MoAI 오케스트레이터가 AskUserQuestion으로 다음 4개 질문을 제시합니다.

Q1 베이스 팔레트 — Neutral(기본) / Zinc / Stone / Slate
Q2 컬러 모드 — System+Toggle(기본) / Light / Dark / Auto
Q3 모서리 반경 — Balanced 0.5rem(기본) / Sharp / Soft / Pill
Q4 차트 라이브러리 — Recharts(기본) / Chart.js / Tremor / ECharts

> 대시보드 스킬은 Q4 옵션 자체가 차트 스택이므로 랜딩/상세와 달리 multiSelect를 사용하지 않습니다.

상세 질문 payload·Fallback 기본값은 ../../../moai-coworker/skills/marketing-landing-page/references/marketing-landing-page/shadcn-theme-interview.md (공용 레퍼런스) 참조.

Fallback(인터뷰 생략) 기본값: Neutral + System+Toggle + 0.5rem + Recharts. 적용 시 응답 상단에 고지합니다.

라이브러리 선택 가이드

| 상황 | 권장 라이브러리 | 이유 | |------|---------------|------| | React/Next.js + B2B 대시보드 | Recharts | shadcn 공식 Chart 컴포넌트 기반, 타입 안전 | | 단일 HTML(React 없음) | Chart.js | CDN 한 줄로 시작, Canvas 기반 가벼움 | | KPI·영업 대시보드 빠른 산출 | Tremor | AreaChart/BarChart 프리셋 풍부 | | 지도·Sankey·TreeMap | ECharts | 고난도 시각화 커버리지 |

판단 기준

| 조건 | 방식 | 테마 인터뷰 | |------|------|---------| | 데이터 5행 이하 | 마크다운 테이블 | 생략 | | 단순 비율/분포 | Mermaid pie/bar | 생략 | | 시계열/트렌드 (React) | Recharts 선 차트 | 필수 | | 시계열/트렌드 (HTML) | Chart.js 선 차트 | 필수 | | 다차원 비교 | Recharts 레이더/버블 | 필수 | | 대시보드·KPI | Tremor + shadcn Card | 필수 | | 지도·복합 시각화 | ECharts | 필수 | | 인터랙티브 필요 | HTML/React 대시보드 | 필수 |

PPT/Word 변환 플로우

사용자가 "PPT로 만들어줘" 요청 시:

HTML·React 차트 → 스크린샷/이미지 추출
데이터 테이블 + 차트 이미지 → moai-officer:doc-pptx로 전달
PPT 슬라이드 생성

Word 보고서 요청 시:

차트 이미지 + 분석 텍스트 → moai-officer:doc-docx로 전달
Word 문서 생성 (차트 임베드)

산출물

Mermaid 다이어그램 (인라인)
shadcn 기반 HTML 대시보드 (OKLCH 테마, 다크 모드 지원)
Recharts/Chart.js/Tremor/ECharts HTML·React 파일 (인터랙티브)
마크다운 보고서 (테이블 + 인사이트)

HTML 대시보드 필수 구성

index.html — 또는 Next.js app/page.tsx
styles.css — shadcn OKLCH CSS 변수 :root + .dark 블록 (인라인 또는 별도)
차트 스크립트 — 선택된 라이브러리의 CDN 또는 npm 모듈
다크 모드 토글 — 인터뷰 Q2가 system+toggle인 경우
README-setup.md — React 모드일 경우 shadcn 컴포넌트 설치 명령

실행 규칙

사용자 요청 수신 → 시각화 방식 자동 판단
방식 2(HTML·React) 선택 시 shadcn 테마 인터뷰 실행 (HARD)
데이터 구조 확인 → 부적합 시 moai-analyst:data-explorer 권유
차트 산출 후 사용자 검토 요청

이 스킬을 사용하지 말아야 할 때

데이터 탐색/프로파일링 → moai-analyst:data-explorer 사용
공공데이터 조회 → moai-analyst:data-public 사용
랜딩 페이지 내 차트 섹션 → moai-marketer:marketing-landing-page에서 Q4 효과 선택 시 통합 산출
상세페이지 내 가격 비교 차트 → moai-seller:commerce-product-detail에서 직접 처리

한국어 카피 품질 게이트 (필수)

본 스킬이 산출하는 한국어 텍스트는 배포 전 의무 게이트를 통과합니다:

moai-coworker:ai-slop-reviewer — 1차 일반 AI 슬롭 검수 (금지어, 구조 패턴, 리듬)
moai-writer:korean-humanize — 2차 한국어 정밀 윤문 (40+ 패턴 SSOT, 의미 불변)

두 게이트는 대시 대비 헤드라인·조사·체언 종결 조각문·"A에서 B로" 전환 공식 S1 패턴을 잡아냅니다. 게이트 통과 없이 산출물을 바로 배포하지 않습니다.

References

| 파일 | 로드 조건 | |------|-----------| | references/data-visualizer/guide.md | Chart.js HTML 템플릿, Mermaid 차트 종류, 한국 비즈니스 색상 팔레트가 필요할 때 |

Want to see if modu-ai/data-visualizer would activate on your phrasing? Try it before you install — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/23/2026, 02:32 UTC · 23 cases

Lift

+61%

87% vs 26%

Agent turns

1.0 vs 1.0

Tokens

+23%

3,051.45 vs 2,482.5

fail → pass · 14pass → pass · 6fail → fail · 3

Per-case results (23)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 지난 12개월간의 월별 매출 추이와 주요 고객군별 점유율 데이터를 정리해 두었습니다. 상단에는 매출액, 신규 고객 수, 재구매율 같은 핵심 KPI 카드를 배치하고 아래쪽에는 마우스 호버나 선택이 가능한 인터랙티브 웹 대시보드 형태의 시각화 결과를 생성해 주세요.	fail→pass	23,991	7,115	-70%	1	1	0%	4,996	2,730	-45%	0	0	—
case-02 올해 4개 사업 부서별 예산 배분 비율(기획 30%, 개발 40%, 마케팅 20%, 영업 10%)을 문서에 바로 삽입할 수 있도록 별도의 웹 파일 없이 아티팩트 화면에서 빠르게 렌더링되는 가벼운 요약 차트로 만들어 주세요.	fail→pass	14,915	24,942	+67%	1	1	0%	3,181	2,584	-19%	0	0	—
case-03 지난 3년 간의 연도별 해외 수출 실적 및 제품군별 성장률 데이터를 바탕으로 시각화 차트를 만들고, 이를 슬라이드 자료로 발표할 수 있도록 PPT 파워포인트 파일 형태로 최종 변환해서 만들어 주실 수 있나요?	fail→fail	18,651	6,379	-66%	1	1	0%	3,341	2,741	-18%	0	0	—
case-04 I have uploaded a raw CSV dataset containing 50,000 transaction records. Before creating any charts, please check for missing null values, analyze column distributions, and generate data profiling summaries.	fail→pass	12,539	3,713	-70%	1	1	0%	2,339	2,346	+0%	0	0	—
case-05 Can you call the Korean Public Data Portal API directly to fetch real-time public bus arrival datasets for Seoul city routes?	fail→pass	11,589	5,980	-48%	1	1	0%	2,054	2,740	+33%	0	0	—
case-06 We need to build a complete SaaS marketing landing page featuring a hero header, pricing cards, customer testimonials, and an embedded feature overview section.	fail→pass	27,107	10,320	-62%	1	1	0%	6,169	3,546	-43%	0	0	—
case-07 We are designing an e-commerce product detail page and need a feature-by-feature price comparison matrix embedded directly inside the product listing layout.	fail→pass	17,748	10,723	-40%	1	1	0%	2,930	3,871	+32%	0	0	—
case-08 Here are Q4 revenue figures for 3 regional offices: North ($50k), South ($70k), East ($40k). Please provide a simple text comparison summary without creating HTML dashboard files or asking style setup questions.	fail→pass	3,870	5,619	+45%	1	1	0%	851	2,800	+229%	0	0	—
case-09 We are constructing an internal corporate dashboard in Next.js 15 with Tailwind CSS and shadcn components. Which visualization library should be selected to match native shadcn chart components and maintain full TypeScript safety?	pass→pass	12,674	8,399	-34%	1	1	0%	2,273	3,379	+49%	0	0	—
case-10 I need to generate a lightweight, single standalone HTML file containing interactive line charts. I want to load a simple script via CDN without setting up Node.js or React build tools. Which library fits this format best?	pass→pass	12,626	10,474	-17%	1	1	0%	2,283	3,711	+63%	0	0	—
case-11 Our sales operations team requires a high-level executive dashboard focused on KPI metrics cards and area trend components built as quickly as possible. Which library provides rich preset UI cards for KPI dashboard layouts?	pass→pass	12,050	6,338	-47%	1	1	0%	1,853	2,796	+51%	0	0	—
case-12 We need to visualize global supply chain network connections using Sankey diagrams along with interactive geographic heatmap maps. Which visualization engine is designated for complex map and Sankey flow rendering?	pass→pass	12,058	4,880	-60%	1	1	0%	1,909	2,438	+28%	0	0	—
case-13 Generate an interactive HTML dashboard showing 24-hour web server ping latencies. Please bypass the theme interview questions and build it immediately using standard fallback parameters.	fail→fail	27,382	27,541	+1%	1	1	0%	6,173	7,882	+28%	0	0	—
case-14 We have created interactive web analytics charts and text insights. Now our management wants this analysis delivered as an editable Word report (.docx) with embedded chart graphics. How should this be produced?	fail→pass	16,832	9,888	-41%	1	1	0%	2,691	3,301	+23%	0	0	—
case-15 When packaging a complete shadcn-styled interactive HTML dashboard artifact, what standard files must be included in the project structure?	fail→pass	13,697	5,738	-58%	1	1	0%	2,500	2,727	+9%	0	0	—
case-16 Before publishing Korean text explanations accompanying our generated dashboard charts, what mandatory verification pipeline gates must the copy pass through?	fail→pass	32,382	3,747	-88%	1	1	0%	1,028	2,377	+131%	0	0	—
case-17 We want to display a comprehensive comparison of 5 key product features across 4 competing smartphone models simultaneously. Which chart format should be chosen for multidimensional metrics?	pass→pass	10,677	10,912	+2%	1	1	0%	1,623	3,462	+113%	0	0	—
case-18 When presenting Question 1 (Base Palette) during the HTML dashboard theme interview, what specific palette choices must be provided?	fail→pass	6,765	1,873	-72%	1	1	0%	1,085	1,970	+82%	0	0	—
case-19 When asking Question 2 (Color Mode) during the dashboard theme interview, what lighting options must be offered to the user?	fail→pass	4,486	2,464	-45%	1	1	0%	767	2,094	+173%	0	0	—
case-20 During Question 3 (Corner Radius) of the dashboard theme interview, what border radius styling choices should be presented?	pass→pass	11,268	3,639	-68%	1	1	0%	1,858	2,362	+27%	0	0	—
case-21 In the dashboard theme interview, why does Question 4 (Chart Library) prohibit multiSelect inputs unlike landing page theme interviews?	fail→pass	10,470	9,281	-11%	1	1	0%	1,592	3,264	+105%	0	0	—
case-22 When delivering an HTML/React dashboard designed for React framework setup, what setup documentation file must accompany the source code?	fail→pass	4,890	2,964	-39%	1	1	0%	798	2,157	+170%	0	0	—
case-23 Under what condition must an explicit interactive dark mode toggle element be incorporated into the dashboard layout code?	fail→fail	8,661	3,487	-60%	1	1	0%	1,349	2,231	+65%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 23 cases were attempted, and 22 counted toward the lift figure. The other 1 produced results that are not comparable between the two arms, so they are excluded from the headline rather than averaged into it. The headline lift of +61 percentage points is the difference between those two pass rates over the 22 comparable cases.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 26.1%
Pass rate with the skill: 87%
Cases attempted: 23
Cases counted toward lift: 22
Cases that regressed: 0
Skill version measured: v2
Run completed: 8/23/2026, 02:32 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-01

Prompt

지난 12개월간의 월별 매출 추이와 주요 고객군별 점유율 데이터를 정리해 두었습니다. 상단에는 매출액, 신규 고객 수, 재구매율 같은 핵심 KPI 카드를 배치하고 아래쪽에는 마우스 호버나 선택이 가능한 인터랙티브 웹 대시보드 형태의 시각화 결과를 생성해 주세요.

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run87

Live evalNeeds ≥20 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+54% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 6 days ago

Other measured skills in the registry, with their headline benchmark lift.