메뉴
데이터를 한눈에 보여주는 인터랙티브 차트·대시보드(HTML)를 만들어 드립니다. 다음과 같은 요청 시 사용하세요: - "차트 만들어줘" - "그래프 그려줘" - "시각화해줘" - "대시보드 만들어줘" Mermaid·Recharts·Chart.js·Tremor·ECharts 중 적합한 스택으로 인터랙티브 대시보드를 제작하고, moai-officer:doc-pptx / moai-officer:doc-docx로 PPT·Word 변환까지 이어집니다.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/modu-ai/moai-cowork --skill data-visualizer명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
AI 코워커 플러그인 패밀리('MoAI-Cowork, 모두의 코워크')의 **프로젝트 초기화 단일 진입점**. `/project <자연어 지시>`로 진입한다 — Claude Cowork(Desktop) 작업을 담당하는 Desktop 슈퍼 오케스트레이터/어드바이저다. 소크라테스 인터뷰로 맥락을 파악하고, 설치된 플러그인 인벤토리를 스캔한 뒤, **프로젝트 전용 커스텀 에이전트와 스킬 체인**을 설계해 `AGENTS.md`(폴더 지침 정본, ≤500라인)와 이를 `@AGENTS.md`로 불러오는 `CLAUDE.md`·`.claude/agents/`·`.moai/` 스캐폴드를 생성한다. 이후 사용 중 신호를 감지하면 스스로 개선한다(재귀적 자가 개선). 개발 프로젝트 초기화는 이 마켓플레이스의 범위 밖이다. 다음과 같은 요청 시 반드시 이 스킬을 사용하세요: - "새 프로젝트 시작", "프로젝트 설정 도와줘", "AGENTS.md 만들어줘", "CLAUDE.md 만들어줘" (개발 프로젝트가 아닐 때) - "/project ...", "/project update", "/project evolve", "/project doctor" - "이어서 진행", "설치 완료", "다시 진행" — 설치 완료 후 재개 요청 - "에이전트 개선해줘", "지침 업데이트해줘", "AGENTS.md 업데이트해줘", "플러그인 업데이트됐어", "새 스킬/MCP 동기화해줘" — 재귀적 자가 개선·플러그인 업데이트 동기화 진입 - 사업·콘텐츠·디자인·커머스·법무·재무·인사 등 비개발 자연어 요청을 적합한 AI 코워커 플러그인으로 라우팅해야 할 때 이 스킬은 **이름·회사 같은 글로벌 프로필을 재질문하지 않는다.** 프로젝트마다 "이번에 뭘 할 건지"만 인터뷰한다.
국토교통부 건축HUB 건축물대장·건축인허가·주택인허가 실측 데이터로 한 필지의 용도지역·주용도·구조·규모·건폐율/용적률·세대/주차·사용승인일·내진·공시가격 시계열·노후도·철거멸실(석면)·인허가 파이프라인을 조회해 드립니다. archhub MCP의 11개 도구를 호출하므로 별도 설치·API 키가 필요 없습니다(공용키 hosted remote 커넥터). 다음과 같은 요청 시 사용하세요: - "자양동 2-2번지 건물 정보 한눈에", "이 필지 용도지역·건폐율·용적률 보여줘" - "자양동 건축물 통계 내줘", "이 동네 주용도 분포" - "광진구 자양동 노후건물 40년 넘은 것", "노후건축물 정비사업 대상 선별" - "자양동 철거된 건물 석면 포함", "철거멸실 현황" - "진행 중인 건축 인허가", "허가 났는데 사용승인 전인 건물" - "이 빌딩 층별로 뭐가 있는지", "층별 용도·면적" - "자양동 24-28번지 공시가격 추이", "공시가격 시계열" - "건축물대장 원본 보여줘", "건축인허가 이력" 건축사·시공·중개·감정평가·디벨로퍼·공무원이 실무에서 바로 쓰는 건축물 실체 데이터입니다. 본 스킬은 "건축물 실체(용도·구조·규모·규제·인허가·노후·철거)" 전담입니다. "실거래가/전월세 시세"는 data-realestate를 사용하세요.
네이버·티스토리·브런치·WordPress·Ghost에 바로 올릴 수 있는 블로그 포스팅(제목·목차·본문·CTA·SEO 메타)을 완성해 드립니다. 다음과 같은 요청 시 사용하세요: - "네이버 블로그에 스타트업 자금 조달 글 써줘" - "티스토리에 SEO 최적화 블로그 글 작성해줘" - "브런치 스타일 회고 에세이 써줘" - "검색 상위 노출되는 블로그 포스팅 만들어줘" - "GEO 최적화해서 AI 검색에 인용되는 가이드 글 써줘" - "제품 리뷰 블로그 포스팅 구성 짜줘" 검색 상위 노출과 독자 전환을 함께 노리며, 완성 후 moai-coworker:ai-slop-reviewer로 AI 티를 정리합니다(필수 후처리).
SOC 직업 분류 기준
SKILL.md 표시 중
| name | data-visualizer |
| description | 데이터를 한눈에 보여주는 인터랙티브 차트·대시보드(HTML)를 만들어 드립니다. 다음과 같은 요청 시 사용하세요: - "차트 만들어줘" - "그래프 그려줘" - "시각화해줘" - "대시보드 만들어줘" Mermaid·Recharts·Chart.js·Tremor·ECharts 중 적합한 스택으로 인터랙티브 대시보드를 제작하고, moai-officer:doc-pptx / moai-officer:doc-docx로 PPT·Word 변환까지 이어집니다. |
| version | 1.1.0 |
데이터를 시각적으로 표현하는 전문가. Mermaid, Recharts/Chart.js, Tremor 기반 HTML 대시보드를 생성하고 PPT/Word로 변환합니다. HTML 산출물은 shadcn/ui OKLCH 토큰을 기본 테마로 사용합니다.
HTML·React 대시보드(방식 2)를 산출할 때는 코드 생성 직전에 MoAI 오케스트레이터가 AskUserQuestion으로 다음 4개 질문을 제시합니다.
대시보드 스킬은 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로 만들어줘" 요청 시:
moai-officer:doc-pptx로 전달Word 보고서 요청 시:
moai-officer:doc-docx로 전달index.html — 또는 Next.js app/page.tsxstyles.css — shadcn OKLCH CSS 변수 :root + .dark 블록 (인라인 또는 별도)system+toggle인 경우README-setup.md — React 모드일 경우 shadcn 컴포넌트 설치 명령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/data-visualizer/guide.md | Chart.js HTML 템플릿, Mermaid 차트 종류, 한국 비즈니스 색상 팔레트가 필요할 때 |