SuperAPI AI Directory
Partner中文AI newsFavorites
Skillslearning-material

learning-material

Writing & research

View repository

Updated 10-15 21:04

About this skill

Learning Material Renderer (Learning Material)

Overview

tutor-researchIt receives the comprehensive version (or any learning content) of a single HTML learning materialand renders it. 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 — a pure text lesson has 0 JS). It shares html-report's design tokens and fonts to maintain visual consistency, but it is a separate renderer that does not touch html-report's 0-JS principle.

Trigger Keywords

learning material, study material, study notes, HTML learning material, diagram, diagram, visualization, chart, code highlighting, formula, summary material

Input

Argument Required Description
content ✓ Learning content (tutor-research comprehensive version recommended, general Markdown also possible)
topic ✓ Learning topic (used in the title and filename)
level — Target level (beginner/elementary/intermediate/advanced) — adjusts depth of explanation
output_path — Default value <cwd>/materials/<slug>-<YYYYMMDD>.html

Learning Material Structure (Sections)

Follows a fixed skeleton that enhances learning effectiveness. Omit empty sections.

  1. Header — topic · target level · creation date
  2. Learning Objectives — what you can do after finishing this material (checklist)
  3. At a Glance (Diagram) — concept relationship diagram/flow/sequence mermaid diagram
  4. Core Concepts — definition per concept + rich explanation + formulas/charts when needed
  5. Examples · Code — step-by-step examples, code highlighting, comments
  6. Common Points of Confusion / Comparison — A vs B table, common mistakes
  7. Review Points — key summary + self-check questions
  8. 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 it) library CDN. Other assets inline.
  • :root Design tokens are moai-content:html-report의 references/design-tokens.mdused as is (Anthropic-inspired palette).
  • Fonts follow the explainer mapping: body Noto Sans KR · headings Noto Serif KR · code JetBrains Mono (references/cdn-libraries.md see the Fonts section).
  • @media print Includes blocks (for printing and 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">after conversion to , 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 appear as the mermaid source in <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>

All CDN URLs and initialization snippets (ECharts/KaTeX/highlight.js/AOS/alternatives) are in references/cdn-libraries.md refer to.

Output

  • single .html learning 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 from 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 tables 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 (prevents 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 html-report — this renderer is separate, and business reports use the 0-JS html-report.
  • The accuracy of the learning content depends on the input (tutor-research sources). Mark unverified content in the material as "needs verification".

Related skills

  • moai-tutor:tutor-research: creates the input synthesis for this skill
  • moai-tutor: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-content:html-report
  • presentation slides → moai-office:pptx-designer
  • documents for printing and submission (.docx) → moai-office:docx-generator