modu-ai/learning-material
| 조사한 내용을 도식·차트·수식·코드 하이라이트가 들어간 단일 HTML 학습자료로 만들어 드립니다. 학습목표→핵심개념→도식→예제→복습으로 구조화해, 풍부한 설명과 시각화로 혼자서도 깊이 이해하게 돕습니다. 학습 전용 렌더러로, html-report design-token·폰트를 공유해 시각 일관성을 유지하되 mermaid·ECharts·KaTeX·highlight.js·AOS를 콘텐츠가 쓸 때만 조건부 로딩합니다.
npx skills add https://github.com/modu-ai/cowork-plugins --skill learning-materialtutor-research의 종합본(또는 임의의 학습 내용)을 받아, 학습에 최적화된 구조의 단일 HTML 학습자료로 렌더한다. mermaid 도식, ECharts 차트, KaTeX 수식, highlight.js 코드 하이라이트, AOS 스크롤 효과를 콘텐츠가 실제로 쓸 때만 주입한다(조건부 로딩 — 순수 텍스트 레슨은 JS 0). html-report의 디자인 토큰·폰트를 공유해 시각 일관성을 유지하지만, html-report의 0-JS 원칙은 건드리지 않는 별도 렌더러다.
학습자료, 공부 자료, 학습 노트, HTML 학습자료, 도식, 다이어그램, 시각화, 차트, 코드 하이라이트, 수식, 정리 자료
| 인자 | 필수 | 설명 |
|------|------|------|
| content | ✓ | 학습 내용 (tutor-research 종합본 권장, 일반 Markdown도 가능) |
| topic | ✓ | 학습 주제 (제목·파일명에 사용) |
| level | — | 대상 수준 (입문/초급/중급/고급) — 설명 깊이 조정 |
| output_path | — | 기본값 <cwd>/materials/<slug>-<YYYYMMDD>.html |
학습 효과를 높이는 고정 골격을 따른다. 비어 있는 섹션은 생략한다.
상단에는 sticky 목차(TOC), 긴 섹션은 접기·펼치기를 둔다.
:root 디자인 토큰은 moai-content:html-report의 references/design-tokens.md를 그대로 사용(Anthropic 영감 팔레트).references/cdn-libraries.md 폰트 절 참조).@media print 블록 포함(인쇄·PDF 저장 대비).<head> 골격<!doctype html><html lang="ko"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title><topic> — 학습자료</title>
<!-- 폰트 (항상) -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Noto+Serif+KR:wght@400;700&family=JetBrains+Mono:wght@400;500&display=swap">
<!-- 조건부 라이브러리: 콘텐츠가 쓸 때만 (아래 조건부 로딩 규칙) -->
<style>:root{ /* design-tokens.md 팔레트 + explainer 폰트 override */ } /* 학습 레이아웃 CSS */</style>
</head>
콘텐츠 분석 후, 실제로 등장하는 요소에 해당하는 라이브러리만 주입한다. CDN URL·초기화 스니펫·대안은 references/cdn-libraries.md가 단일 진실(SSOT)이다.
| 콘텐츠에 있으면 | 주입 라이브러리 | 비고 |
|----------------|-----------------|------|
| mermaid 블록 | Mermaid v11 (ESM) | <pre class="mermaid">`로 변환 후 init |
| 데이터·수치 시각화 | ECharts v5 | <div> + init 스크립트. 경량 필요 시 Chart.js v4 |
| $…$ / $$…$$ 수식 | KaTeX v0.16 + auto-render | CSS+JS+auto-render 3종 |
| 코드 블록( lang ) | highlight.js v11 | 테마 CSS + JS + hljs.highlightAll()` |
| 단계적 등장 효과 | AOS v2 | data-aos 속성 + init. 과용 금지 |
순수 텍스트·표만 있는 자료는 어떤 JS도 주입하지 않는다. 라이브러리가 로드되지 않아도(오프라인) 본문·코드·표는 정상 표시되도록 폴백을 둔다(도식은 mermaid 소스가 <pre>로 보임).
<pre class="mermaid">flowchart TD; A[질문]-->B[병렬 리서치]; B-->C[학습자료]</pre>
<script type="module">
import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
mermaid.initialize({ startOnLoad: true, theme: "neutral" });
</script>
전체 CDN URL·초기화 스니펫(ECharts/KaTeX/highlight.js/AOS/대안)은 references/cdn-libraries.md 참조.
.html 학습자료 (<cwd>/materials/<slug>-<YYYYMMDD>.html)예시 1: "방금 조사한 서브에이전트 내용으로 HTML 학습자료 만들어줘"
→ 시퀀스 도식(mermaid) + 코드 하이라이트 + 복습 질문 포함 HTML
예시 2: "영어 가정법, 표랑 예문으로 학습자료 만들어줘"
→ 규칙 비교 표 + 예문 + 복습 (JS 미주입 — 순수 텍스트·표)
예시 3: "이 데이터 추이를 차트로 보여주는 학습자료로 만들어줘"
→ ECharts 라인 차트 + 해설 + 핵심 개념
@11, @5, @0.16, @2).references/cdn-libraries.md — CDN 라이브러리 스택 SSOTmoai-content:html-reportmoai-office:pptx-designermoai-office:docx-generatorTake modu-ai/learning-material from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.