skill
noesis-tutorial
Skill that generates designed HTML learning notes — constructivist technical-editorial style, self-contained pages, bilingual (EN/中文), real-data worked examples
Set up
Skills are installed by placing their folder where your agent loads skills.
The download comes from github.com/Kelinop/noesis-tutorial itself, not from our server, so what you get is exactly what its author published.
Install instructions come from the README
README
synced Oct 23, 2026Live preview
This is what the skill produces. Every example is a standalone HTML file — click to open it in your browser (rendered via htmlpreview):
| # | Example | Topic | Highlights |
|---|---|---|---|
| 01 | KMP (English) — flagship | Complete KMP teaching | English language & implementation template, all components |
| 02 | Two's complement | 补码 | Punch cards, carry trace, clock-face hook |
| 03 | Virtual memory | 虚拟内存 | Memory map, nested tree, exploded frame, TLB gauge |
| 04 | TCP handshake | TCP 握手 | Swimlanes, state diagram, ASCII header, dialogue |
| 05 | KMP — 408 exam points | KMP 全 408 考点 | Interactive stepper, causal chain, ratio bar |
| 06 | Maxwell's equations | 麦克斯韦方程组 | Poster header, timetable, archive cards, stair groups |
| 07 | Photoelectric effect | 光电效应 | Gauge, red circle, dialogue, SVG apparatus |
The six Chinese examples together cover every component in the visual system; the English example demonstrates the same system in English.
What it produces
| Feature | Description |
|---|---|
| Standalone HTML | Zero build tools. One external dependency: Google Fonts CDN. Open in any browser. |
| Causal-chain teaching | Problem → Pressure → Failed approach → Essence hook → Mechanism (real-data worked examples) → Tradeoff → Definition → System impact |
| Visual system | Layer-based color model (L0–L5), 20° axis, plate mounting, gauges, punch cards, swimlanes, trace grids, dialogues, stair groups — 40+ encoded components |
| Exam-point depth | 408 postgrad entrance exams: positioning, derivations, traps, speed tricks, related topics |
| Quality gate | 13-item checklist enforced before every delivery |
Install
This is an Agent Skill (SKILL.md + references/). Copy the repository into your agent's skills directory:
# Claude Code / Claude Desktop
cp -r noesis-tutorial ~/.claude/skills/
# Cursor, Windsurf, or other agents that read .claude/skills
cp -r noesis-tutorial .claude/skills/
Any agent that reads SKILL.md can use it — the skill is just rules and examples.
Activation
The skill auto-activates when a request matches the frontmatter description:
name: noesis-tutorial
description: Use when the user asks for technical tutorials, concept explanations,
learning notes, or exam-point study material, to be delivered as HTML learning pages.
当用户请求技术教程、概念讲解、学习笔记或考点精讲，需交付 HTML 学习页面时使用。
Or invoke it explicitly by name.
Usage
Ask for a technical topic as a learning page:
"Write a complete study note on KMP with full exam points"
"Explain how TCP's three-way handshake works, as an HTML page"
「写一份虚拟内存的学习笔记，要 HTML 页面」
The agent runs the 7-step workflow in SKILL.md:
Research → Causal chain → Essence hook → Structure → Diagrams → HTML → Quality checklist
Then verifies against the 13-item checklist. Pages are standalone — open the HTML directly in a browser.
Repository layout
noesis-tutorial/
├── SKILL.md # Workflow: when to use, 7-step creation, teaching architecture, 13-item checklist
├── references/
│ ├── visual-system.md # Design philosophy: layer model, axis, geometry semantics, composition
│ ├── style-guide.md # Tokens + component specs — the rule source for every class name
│ ├── example-*.html × 6 # Chinese example pages — component coverage & teaching samples
│ ├── example-kmp.en.html # English flagship example (component-heavy, complete teaching notes)
│ └── example-coverage.md # Component × example coverage matrix
├── README.md # This file
├── README.zh-CN.md # 简体中文版本
└── LICENSE # MIT License
Execution inputs: SKILL.md + visual-system.md + style-guide.md + examples + coverage matrix.
License
MIT © Kelinop