Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →조사한 내용을 도식·차트·수식·코드 하이라이트가 들어간 단일 HTML 학습자료로 만들어 드립니다. 학습목표→핵심개념→도식→예제→복습으로 구조화해, 풍부한 설명과 시각화로 혼자서도 깊이 이해하게 돕습니다. 다음과 같은 요청 시 사용하세요: - "방금 조사한 내용으로 HTML 학습자료 만들어줘" - "도식이랑 예제 들어간 공부 자료로 정리해줘" - "mermaid 다이어그램으로 개념 정리해줘" - "차트랑 코드 하이라이트 넣어서 학습자료 만들어줘" - "이 주제 시각적으로 풍부하게 설명 자료 만들어줘" - "브라우저에서 바로 보는 학습 노트 HTML로 만들어줘" 학습 전용 렌더러로, html-report design-token·폰트를 공유해 시각 일관성을 유지하되 mermaid·ECharts·KaTeX·highlight.js·AOS를 콘텐츠가 쓸 때만 조건부 로딩합니다. [책임 경계] vs moai-content:html-report: 이 스킬=도식·차트·코드가 풍부한 학습자료(JS 라
.claude/skills/modu-ai-learning-material/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-06 | ✗→✓ | ▲ Improved | -16% | 0% |
| case-07 | ✗→✓ | ▲ Improved | 97% | 0% |
| case-03 | ✗→✓ | ▲ Improved | 42% | 0% |
| case-04 | ✗→✓ | ▲ Improved | 17% | 0% |
| case-10 | ✗→✓ | ▲ Improved | 77% | 0% |
tutor-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> 골격html<!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>로 보임).
html<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-generator| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-06 | fail→pass | 18,996 | 4,305 | -77% | 1 | 1 | 0% | 3,205 | 2,699 | -16% | 0 | 0 | — |
case-07 | fail→pass | 24,327 | 27,721 | +14% | 1 | 1 | 0% | 4,168 | 8,202 | +97% | 0 | 0 | — |
case-01 | fail→fail | 28,780 | 52,050 | +81% | 1 | 1 | 0% | 6,214 | 9,072 | +46% | 0 | 0 | — |
case-02 | fail→fail | 25,013 | 27,580 | +10% | 1 | 1 | 0% | 5,309 | 8,247 | +55% | 0 | 0 | — |
case-03 | fail→pass | 26,083 | 28,192 | +8% | 1 | 1 | 0% | 5,788 | 8,230 | +42% | 0 | 0 | — |
case-04 | fail→pass | 40,548 | 23,325 | -42% | 1 | 1 | 0% | 6,172 | 7,213 | +17% | 0 | 0 | — |
case-05 | fail→fail | 16,410 | 18,926 | +15% | 1 | 1 | 0% | 2,981 | 5,459 | +83% | 0 | 0 | — |
case-08 | pass→fail | 27,664 | 30,154 | +9% | 1 | 1 | 0% | 6,166 | 8,203 | +33% | 0 | 0 | — |
case-09 | fail→fail | 15,745 | 28,631 | +82% | 1 | 1 | 0% | 2,783 | 8,212 | +195% | 0 | 0 | — |
case-10 | fail→pass | 23,262 | 28,339 | +22% | 1 | 1 | 0% | 4,638 | 8,213 | +77% | 0 | 0 | — |
case-11 | fail→pass | 18,577 | 28,218 | +52% | 1 | 1 | 0% | 3,427 | 8,209 | +140% | 0 | 0 | — |
case-12 | fail→fail | 19,850 | 30,985 | +56% | 1 | 1 | 0% | 3,919 | 8,207 | +109% | 0 | 0 | — |
case-13 | fail→pass | 24,485 | 27,314 | +12% | 1 | 1 | 0% | 4,963 | 8,207 | +65% | 0 | 0 | — |
case-14 | fail→pass | 23,731 | 29,573 | +25% | 1 | 1 | 0% | 5,004 | 8,195 | +64% | 0 | 0 | — |
case-15 | fail→pass | 16,017 | 28,071 | +75% | 1 | 1 | 0% | 2,953 | 8,200 | +178% | 0 | 0 | — |
case-16 | fail→pass | 23,228 | 29,674 | +28% | 1 | 1 | 0% | 3,676 | 8,203 | +123% | 0 | 0 | — |
case-17 | pass→pass | 30,153 | 28,801 | -4% | 1 | 1 | 0% | 6,165 | 8,203 | +33% | 0 | 0 | — |
case-18 | pass→pass | 18,427 | 29,045 | +58% | 1 | 1 | 0% | 2,756 | 8,210 | +198% | 0 | 0 | — |
case-19 | fail→fail | 22,377 | 29,795 | +33% | 1 | 1 | 0% | 3,718 | 8,202 | +121% | 0 | 0 | — |
case-20 | pass→pass | 29,665 | 28,815 | -3% | 1 | 1 | 0% | 6,164 | 8,202 | +33% | 0 | 0 | — |
case-21 | pass→pass | 13,707 | 29,393 | +114% | 1 | 1 | 0% | 2,326 | 8,204 | +253% | 0 | 0 | — |
case-22 | fail→pass | 27,285 | 26,473 | -3% | 1 | 1 | 0% | 5,738 | 8,211 | +43% | 0 | 0 | — |
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. 22 cases were attempted. The headline lift of +45 percentage points is the difference between those two pass rates over the 22 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.
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.
Other measured skills in the registry, with their headline benchmark lift.