Data visualizer
Skill modu-ai/cowork-plugins/moai-data/skills/data-visualizer
모두의 AI (MoAI) — Claude Cowork & Claude Code 한국 실무 도메인 AI 하네스·플러그인 마켓플레이스. 사업계획서·세무·법률·HR·마케팅·커머스·BI·콘텐츠 도메인 스킬·에이전트·워크플로우. Korean B2B + office docs (HWPX/DOCX/XLSX/PPTX/PDF) + AI media (image/video/voice). AI-slop 검수 + humanize-korean 내장.
npx -y skills add modu-ai/cowork-plugins --skill data-visualizerAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
What its author says it does
Copied from the file, not written here
데이터를 한눈에 보여주는 인터랙티브 차트·대시보드(HTML)를 만들어 드립니다. 다음과 같은 요청 시 사용하세요: - "차트 만들어줘" - "그래프 그려줘" - "시각화해줘" - "대시보드 만들어줘" Mermaid·Recharts·Chart.js·Tremor·ECharts 중 적합한 스택으로 인터랙티브 대시보드를 제작하고, moai-office:pptx-designer / moai-office:docx-generator로 PPT·Word 변환까지 이어집니다.
SKILL.md
5.4 KB, as published. Nobody here has run it
데이터 시각화 (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-content/skills/landing-page/references/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-office:pptx-designer로 전달 - PPT 슬라이드 생성
Word 보고서 요청 시:
- 차트 이미지 + 분석 텍스트 →
moai-office:docx-generator로 전달 - Word 문서 생성 (차트 임베드)
산출물
- Mermaid 다이어그램 (인라인)
- shadcn 기반 HTML 대시보드 (OKLCH 테마, 다크 모드 지원)
- Recharts/Chart.js/Tremor/ECharts HTML·React 파일 (인터랙티브)
- 마크다운 보고서 (테이블 + 인사이트)
HTML 대시보드 필수 구성
index.html— 또는 Next.jsapp/page.tsxstyles.css— shadcn OKLCH CSS 변수:root+.dark블록 (인라인 또는 별도)- 차트 스크립트 — 선택된 라이브러리의 CDN 또는 npm 모듈
- 다크 모드 토글 — 인터뷰 Q2가
system+toggle인 경우 README-setup.md— React 모드일 경우 shadcn 컴포넌트 설치 명령
실행 규칙
- 사용자 요청 수신 → 시각화 방식 자동 판단
- 방식 2(HTML·React) 선택 시 shadcn 테마 인터뷰 실행 (HARD)
- 데이터 구조 확인 → 부적합 시
moai-data:data-explorer권유 - 차트 산출 후 사용자 검토 요청
이 스킬을 사용하지 말아야 할 때
- 데이터 탐색/프로파일링 →
moai-data:data-explorer사용 - 공공데이터 조회 →
moai-public-data:public-data사용 - 랜딩 페이지 내 차트 섹션 →
moai-content:landing-page에서 Q4 효과 선택 시 통합 산출 - 상세페이지 내 가격 비교 차트 →
moai-content:product-detail에서 직접 처리