{"id":"ea21fe5c-410f-43c3-9dc4-e5c1407c1013","slug":"noesis-tutorial","kind":"skill","name":"noesis-tutorial","summary":"Skill that generates designed HTML learning notes — constructivist technical-editorial style, self-contained pages, bilingual (EN/中文), real-data worked examples","owner":"Kelinop","repoUrl":"https://github.com/Kelinop/noesis-tutorial","license":"MIT","licenseTier":"permissive","trust":"community","stars":0,"match":null,"fewStars":true,"format":"skill","createdAt":"2026-08-03T13:08:00.000Z","addedAt":"2026-10-21T13:24:01.312Z","logoUrl":"https://avatars.githubusercontent.com/u/312512198?u=421eeaece2baaf25591820e878853ee6c31a6463&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["browser-web","productivity","data-analytics"],"tags":["visual-design","tutorials"],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-23T05:54:04.024Z","sample":false,"url":"https://conduits.dev/tools/noesis-tutorial","language":"HTML","transports":["stdio"],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"<div align=\"center\">\n\n<pre style=\"font-family: 'IBM Plex Mono', monospace; line-height: 1.2;\">\n╔══════════════════════════════════════════════════════════════╗\n║                                                              ║\n║   ███╗   ██╗ ██████╗ ███████╗███████╗██╗███████╗            ║\n║   ████╗  ██║██╔═══██╗██╔════╝██╔════╝██║██╔════╝            ║\n║   ██╔██╗ ██║██║   ██║█████╗  ███████╗██║███████╗            ║\n║   ██║╚██╗██║██║   ██║██╔══╝  ╚════██║██║╚════██║            ║\n║   ██║ ╚████║╚██████╔╝███████╗███████║██║███████║            ║\n║   ╚═╝  ╚═══╝ ╚═════╝ ╚══════╝╚══════╝╚═╝╚══════╝            ║\n║                                                              ║\n║           T U T O R I A L   ·   S K I L L                    ║\n║                                                              ║\n╚══════════════════════════════════════════════════════════════╝\n</pre>\n\n<h3>Turn technical topics into designed engineering knowledge pages</h3>\n\n<p>Complete, runnable HTML learning notes in a <strong>constructivist technical-editorial style</strong>.<br>\nNot a textbook dump. Not a Markdown-to-HTML conversion.</p>\n\n<p>\n  <a href=\"LICENSE\"><img src=\"https://img.shields.io/badge/license-MIT-0f4c81?style=flat-square\" alt=\"License: MIT\"></a>\n  <img src=\"https://img.shields.io/badge/style-constructivist-1c1c1c?style=flat-square\" alt=\"Style: Constructivist\">\n  <img src=\"https://img.shields.io/badge/output-standalone_HTML-e63946?style=flat-square\" alt=\"Output: Standalone HTML\">\n  <img src=\"https://img.shields.io/badge/build-zero-b8863b?style=flat-square\" alt=\"Build: Zero\">\n</p>\n\n<p><a href=\"README.zh-CN.md\">简体中文</a> · <a href=\"#live-preview\">Live Preview</a> · <a href=\"#install\">Install</a> · <a href=\"#usage\">Usage</a></p>\n\n<br>\n\n<a href=\"https://htmlpreview.github.io/?https://github.com/Kelinop/noesis-tutorial/blob/main/references/example-kmp.en.html\">\n  <img src=\"assets/preview-kmp.png\" alt=\"KMP Algorithm — noesis-tutorial preview\" width=\"720\">\n</a>\n\n<p><em>KMP Algorithm: The Main-String Pointer Never Backtracks — <a href=\"https://htmlpreview.github.io/?https://github.com/Kelinop/noesis-tutorial/blob/main/references/example-kmp.en.html\">open in browser →</a></em></p>\n\n</div>\n\n---\n\n## Live preview\n\nThis is what the skill produces. Every example is a standalone HTML file — click to open it in your browser (rendered via [htmlpreview](https://htmlpreview.github.io/)):\n\n| # | Example | Topic | Highlights |\n|:---:|:---|:---|:---|\n| 01 | [KMP (English) — flagship](https://htmlpreview.github.io/?https://github.com/Kelinop/noesis-tutorial/blob/main/references/example-kmp.en.html) | Complete KMP teaching | English language & implementation template, all components |\n| 02 | [Two's complement](https://htmlpreview.github.io/?https://github.com/Kelinop/noesis-tutorial/blob/main/references/example-twos-complement.html) | 补码 | Punch cards, carry trace, clock-face hook |\n| 03 | [Virtual memory](https://htmlpreview.github.io/?https://github.com/Kelinop/noesis-tutorial/blob/main/references/example-virtual-memory.html) | 虚拟内存 | Memory map, nested tree, exploded frame, TLB gauge |\n| 04 | [TCP handshake](https://htmlpreview.github.io/?https://github.com/Kelinop/noesis-tutorial/blob/main/references/example-tcp.html) | TCP 握手 | Swimlanes, state diagram, ASCII header, dialogue |\n| 05 | [KMP — 408 exam points](https://htmlpreview.github.io/?https://github.com/Kelinop/noesis-tutorial/blob/main/references/example-kmp.html) | KMP 全 408 考点 | Interactive stepper, causal chain, ratio bar |\n| 06 | [Maxwell's equations](https://htmlpreview.github.io/?https://github.com/Kelinop/noesis-tutorial/blob/main/references/example-maxwell-equations.html) | 麦克斯韦方程组 | Poster header, timetable, archive cards, stair groups |\n| 07 | [Photoelectric effect](https://htmlpreview.github.io/?https://github.com/Kelinop/noesis-tutorial/blob/main/references/example-photoelectric-effect.html) | 光电效应 | Gauge, red circle, dialogue, SVG apparatus |\n\nThe six Chinese examples together cover every component in the visual system; the English example demonstrates the same system in English.\n\n## What it produces\n\n| Feature | Description |\n|:---|:---|\n| **Standalone HTML** | Zero build tools. One external dependency: Google Fonts CDN. Open in any browser. |\n| **Causal-chain teaching** | Problem → Pressure → Failed approach → Essence hook → Mechanism (real-data worked examples) → Tradeoff → Definition → System impact |\n| **Visual system** | Layer-based color model (L0–L5), 20° axis, plate mounting, gauges, punch cards, swimlanes, trace grids, dialogues, stair groups — **40+ encoded components** |\n| **Exam-point depth** | 408 postgrad entrance exams: positioning, derivations, traps, speed tricks, related topics |\n| **Quality gate** | 13-item checklist enforced before every delivery |\n\n<a name=\"install\"></a>\n## Install\n\nThis is an **Agent Skill** (`SKILL.md` + `references/`). Copy the repository into your agent's skills directory:\n\n```bash\n# Claude Code / Claude Desktop\ncp -r noesis-tutorial ~/.claude/skills/\n\n# Cursor, Windsurf, or other agents that read .claude/skills\ncp -r noesis-tutorial .claude/skills/\n```\n\nAny agent that reads `SKILL.md` can use it — the skill is just rules and examples.\n\n## Activation\n\nThe skill auto-activates when a request matches the frontmatter description:\n\n```yaml\nname: noesis-tutorial\ndescription: Use when the user asks for technical tutorials, concept explanations,\n  learning notes, or exam-point study material, to be delivered as HTML learning pages.\n  当用户请求技术教程、概念讲解、学习笔记或考点精讲，需交付 HTML 学习页面时使用。\n```\n\nOr invoke it explicitly by name.\n\n<a name=\"usage\"></a>\n## Usage\n\nAsk for a technical topic as a learning page:\n\n> **\"Write a complete study note on KMP with full exam points\"**\n>\n> **\"Explain how TCP's three-way handshake works, as an HTML page\"**\n>\n> **「写一份虚拟内存的学习笔记，要 HTML 页面」**\n\nThe agent runs the **7-step workflow** in `SKILL.md`:\n\n```\nResearch → Causal chain → Essence hook → Structure → Diagrams → HTML → Quality checklist\n```\n\nThen verifies against the **13-item checklist**. Pages are standalone — open the HTML directly in a browser.\n\n## Repository layout\n\n```\nnoesis-tutorial/\n├── SKILL.md                        # Workflow: when to use, 7-step creation, teaching architecture, 13-item checklist\n├── references/\n│   ├── visual-system.md            # Design philosophy: layer model, axis, geometry semantics, composition\n│   ├── style-guide.md              # Tokens + component specs — the rule source for every class name\n│   ├── example-*.html × 6          # Chinese example pages — component coverage & teaching samples\n│   ├── example-kmp.en.html         # English flagship example (component-heavy, complete teaching notes)\n│   └── example-coverage.md         # Component × example coverage matrix\n├── README.md                       # This file\n├── README.zh-CN.md                 # 简体中文版本\n└── LICENSE                         # MIT License\n```\n\n**Execution inputs**: `SKILL.md` + `visual-system.md` + `style-guide.md` + examples + coverage matrix.\n\n---\n\n## License\n\n[MIT](LICENSE) © Kelinop\n"}