Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/modu-ai/moai-cowork/data-visualizernpx skills add modu-ai/moai-cowork --skill data-visualizergit clone --depth 1 https://github.com/modu-ai/moai-coworkWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/modu-ai/moai-cowork/data-visualizer)<a href="https://agentmods.dev/skills/modu-ai/moai-cowork/data-visualizer"><img src="https://agentmods.dev/badge/skills/modu-ai/moai-cowork/data-visualizer.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00134 | $0.01841 |
| Opus 5 | $0.00067 | $0.00920 |
| Sonnet 5 | $0.00027 | $0.00368 |
| Haiku 4.5 | $0.00013 | $0.00184 |
Grade A, and why
data-visualizer scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 142 lines — stays where its author put it; the contents beside it link to each section on GitHub.
데이터 시각화 (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 대시보드 | 필수 |
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 6d ago First seen · 142 lines · 134 tokens per session scan A a13624d3e9af
data-visualizer is a skill published in the GitHub repository modu-ai/moai-cowork (298 stars, last pushed 3d ago), licensed Apache-2.0. It adds 134 tokens to every session and 1,841 once invoked, about $0.0007 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
market-intelligence-report
Produce a Market Intelligence Report — YouTube competitive research, channel analysis, content gap discovery, idea generation, daily scanning, and AI trend scouting — then render it as a BenAI-branded HTML dashboard in the instant-ui design language. Use this skill whenever the user says "market intelligence report"…
linkedin-writer-vault
Vault-aware LinkedIn writer. Same step-by-step LinkedIn post process as linkedin-writer, but ICP, voice, and offer context come from the vault's Context/ folder instead of being bundled inside the skill. Update one file in the vault and every skill pointing to it inherits the change. TRIGGERS: LinkedIn post, LinkedIn…
marketing-os-carousel
Build an image-first social carousel from an asset already filed in the Marketing OS, export it as a PDF, and record it back as a real channel asset. Brand palette, typography, the logo pointer and the never-black-background rule all resolve from Context/brand/brand-kit.md. Source is a filed newsletter edition…
operator
Build and schedule a personalized Operator prompt that runs a Baalda vault as a second brain on a recurring cadence. Run it from inside the vault: it reads Context/ and CLAUDE.md first to infer org, team, brand voice and paths, then asks only the gaps (cadence, connectors, DM recipient, budgets, signature), writes the…
crm-prospect-mining
Mine high-value prospects from CRM pipeline stages (Lost, No Show, Churned, Stalled) by cross-referencing records with LinkedIn company data and comms history. Connects to any CRM, pulls records from target stages, filters out personal email domains, finds company LinkedIn pages via web research, bulk-scrapes company…
seo-hreflang
Hreflang and international SEO audit, validation, and generation. Detects common mistakes, validates language/region codes, and generates correct hreflang implementations for HTML, HTTP headers, and XML sitemaps. Use when user says "hreflang", "i18n SEO", "international SEO", "multi-language", "multi-region"…