Overview
education-tutor-researchreceives a comprehensive compilation (or any learning content) of single HTML learning materialrenders it as a learning-optimized structure. mermaid diagrams, ECharts charts, KaTeX formulas, highlight.js code highlighting, and AOS scroll effects are only when the content actually uses them injected (conditional loading — pure text lessons use 0 JS). It shares doc-html-report's design tokens and fonts to maintain visual consistency, but it is a separate renderer that does not touch doc-html-report's 0-JS principle.
Trigger Keywords
learning material, study material, study notes, HTML learning material, diagram, diagram, visualization, chart, code highlight, formula, summary material
Input
| Argument | Required | Description |
|---|---|---|
content |
✓ | Learning content (education-tutor-research comprehensive compilation recommended, general Markdown also possible) |
topic |
✓ | Learning topic (used in title and filename) |
level |
— | Target level (beginner/novice/intermediate/advanced) — adjusts explanation depth |
output_path |
— | Default value <cwd>/materials/<slug>-<YYYYMMDD>.html |
Learning Material Structure (Sections)
Follows a fixed framework that enhances learning effectiveness. Omit empty sections.
- Header — topic · target level · creation date
- Learning Objectives — what you can do after finishing this material (checklist)
- At a Glance (Diagram) — concept relationship map/flow/sequence mermaid diagram
- Core Concepts — definition per concept + rich explanation + formulas/charts when needed
- Examples · Code — step-by-step examples, code highlighting, comments
- Common Confusions / Comparisons — A vs B table, common mistakes
- Review Points — key summary + self-check questions
- Learn More · Sources — next learning + verified source links
At the top, a sticky table of contents (TOC), and long sections have collapse/expand.
HTML Rendering Specification
Self-contained single file
- External dependencies: font CDN + (only when content uses them) library CDN. All other assets inline.
:rootdesign tokens aremoai-officer:doc-html-report의references/design-tokens.mdused as-is (Anthropic-inspired palette).- Fonts use the explainer mapping: body Noto Sans KR · headings Noto Serif KR · code JetBrains Mono (
references/cdn-libraries.mdsee the Fonts section). @media printIncludes a block (for printing/PDF saving).
<head> Skeleton
<!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>
Conditional Loading Rules (HARD)
After analyzing the content, inject only the libraries corresponding to elements that actually appear. CDN URLs, initialization snippets, and alternatives are references/cdn-libraries.mdis the single source of truth (SSOT).
| if present in the content | injected library | Notes |
|---|---|---|
```mermaid block |
Mermaid v11 (ESM) | <pre class="mermaid">convert to and then init |
| data and numerical visualization | ECharts v5 | <div> + init script. Chart.js v4 when lightweight is needed |
$…$ / $$…$$ formulas |
KaTeX v0.16 + auto-render | CSS+JS+auto-render 3종 |
code block (```lang) |
highlight.js v11 | theme CSS + JS + hljs.highlightAll() |
| staged appearance effects | AOS v2 | data-aos attribute + init. Do not overuse |
For materials consisting only of plain text and tables, do not inject any JS. Even if libraries fail to load (offline), provide a fallback so the body text, code, and tables display normally (diagrams are shown as the mermaid source <pre>).
mermaid integration (example)
<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>
For all CDN URLs and initialization snippets (ECharts/KaTeX/highlight.js/AOS/alternatives), see references/cdn-libraries.md reference.
Output
- single
.htmllearning material (<cwd>/materials/<slug>-<YYYYMMDD>.html) - can be viewed, printed, and saved as PDF directly in the browser
- state the libraries and sources used at the bottom of the material
Usage examples
Example 1: "Make an HTML learning material with the subagent content I just researched" → HTML including a sequence diagram (mermaid) + code highlighting + review questions
Example 2: "Make a learning material on English subjunctive mood with a table and example sentences" → rule comparison table + example sentences + review (no JS injected — plain text and tables only)
Example 3: "Make a learning material that shows this data trend as a chart" → ECharts line chart + commentary + key concepts
Precautions
- Comply with conditional loading — never inject libraries that are not used (to prevent unnecessary weight and external dependencies).
- Cite references/cdn-libraries.md for CDN URLs — do not invent arbitrary versions or URLs (major pin:
@11,@5,@0.16,@2). - Accessibility: Maintain WCAG AA for body text contrast (design-tokens.md contrast table), and provide alternative text and captions for diagrams and charts.
- Do not pollute doc-html-report — this renderer is separate, and business reports use the 0-JS doc-html-report.
- The accuracy of the learning content depends on the input (education-tutor-research sources). Content with unverified sources is marked as "needs verification" in the material.
Related skills
- moai-tutor:education-tutor-research: creates the comprehensive input for this skill
- moai-tutor:education-learning-project: stores the generated material in materials/ and updates progress
- Reference:
references/cdn-libraries.md— CDN library stack SSOT
When not to use this skill
- 0-JS single-file business report(status, finance, incident, PR) →
moai-officer:doc-html-report - presentation slides →
moai-officer:doc-pptx - documents for printing and submission (.docx) →
moai-officer:doc-docx
Korean copy quality gate (required)
The Korean text produced by this skill passes a mandatory pre-distribution gate:
moai-coworker:ai-slop-reviewer— First-pass general AI slop review (banned words, structural patterns, rhythm)moai-writer:korean-humanize— Second-pass precision Korean copyediting (40+ pattern SSOT, meaning-preserving)
The two gates catch headline-vs-em-dash contrast, particles, noun-ending fragments, and the "from A to B" transition formula S1 pattern. We do not distribute output directly without passing the gates.
Visual quality gate (mandatory)
[HARD] Once rendering is complete, open the output HTML in a browser, measure the following 4 axes, and report PASS/FAIL. It is a mandatory step of the same grade as the Korean copy gate above — if it is good writing but unreadable, it is not learning material.
Common 4 axes — Judged by DOM measurement after rendering. A visual skim does not count as a substitute.
| 축 | Measurement | Criterion | Grade |
|---|---|---|---|
| Body text size | Body node computed font-size |
≥16px (screen-reading basis). Supporting text and captions ≥14px | hard |
| Contrast ratio | WCAG contrast ratio based on relative luminance | Body text ≥4.5:1 · Large text ≥3:1 | hard |
| Text overflow | scrollHeight > clientHeight |
0건 | hard |
| Elements outside the output | Rendered text nodes outside the body container | 0 — such as page count, resolution, and fonts used Production metadata is not printed on screen(as HTML comments) | hard |
When using icons — Icons look like empty slots in the layout, so unless evidence is required, a few handy ones get reused.
- From the verbof the wording, choose (write → memo, stop → stop). Match the action the slot calls for, not the noun.
- Do not use the same icon more than 3 times in one document.
- If nothing fits, leave it empty. An empty slot is better than a wrong icon.
- [HARD] If an icon was used, include it in the PASS/FAIL evidence table. Report the slot wording, icon, and reason for choosing it side by side. Tautologies like "because an icon was needed" are not evidence, and if the reason cannot be written in one line, leave it empty.
These 4 axes are
doc-html-slide/references/deck-quality-rubric.mdfrom the hard-fail of only those corresponding to document type (continuous scroll) carried over. The pt lower bound (24pt) for projector projection is not applied to document type and is replaced by the screen-reading basis (16px).