移入随包子技能 karpathy-output-ladder（全局 skills 里的原件已移出）

一、为什么
- 用户令：把这个技能复制进会话技能「当作子技能」，用法后续再定；
  随后又明确「并从 全局 skills 文件夹中移除」⇒ 全局那份已移出（移进归档，可原样移回）。

二、落在哪、怎么放
- 位置：references/karpathy-output-ladder/（与本包既有的随包子技能同形态：各自带 SKILL.md ＋ 自己的 references/assets）
- 内容：4 个文件（SKILL.md · references/ladder-workflow.md · references/ste100.md · assets/html-template/index.html）
  **逐字复制，一字未改**（md5 与原件逐个核对一致）

三、登记（只做到"找得到"，⛔ 不接线）
- references/01-文档索引.md 增一行「要把一个话题讲清楚（文字→图→互动页）」→ karpathy-output-ladder/SKILL.md，
  并在表下写明：**用法尚未接线**，不参与本包的钩子 / 判据 / 自动加载（用户原话「后续再看如何使用」）
- references/manifest.md 随生成器重算：66 → 70 份文件，语法失败 0

验收：selftest.py rc=0 PASS 99 / FAIL 0；全局 skills 顶层已无 karpathy-output-ladder；
会话技能内 4 个文件与原件 md5 逐个一致。

session-mechanism/references/01-文档索引.md

@@ -31,6 +31,11 @@
 | 对方甩来一句没头绪的话 | `02-功能优先协作协议.md` | — |
 | 只想要速查 | `99-速查清单.md` | — |
 | **问「这是什么、为什么这样」** | `architecture.md` | — |
+| **要把一个话题讲清楚（文字 → 图 → 互动页 三级递进）** | `karpathy-output-ladder/SKILL.md`（**随包子技能**） | — |
+
+> 📌 **`karpathy-output-ladder/` 是随包子技能**（2026-10-07 按用户令从全局 skills 移入本包 `references/`，内容逐字未改）。
+> ⚠️ **它的"用法"尚未接线**（用户原话「**后续再看如何使用**」）⇒ 现在只做到"**找得到**"：
+> 想用它时按上面那行跳过去读它自己的 `SKILL.md`；⛔ **不参与**本包的钩子/判据/自动加载。
 
 ## 二、🔴 文档四条规则（写文档／改文档时必守）
 

session-mechanism/references/karpathy-output-ladder/SKILL.md

@@ -0,0 +1,101 @@
+---
+name: karpathy-output-ladder
+description: "Produce layered explanations that climb Karpathy's LLM output ladder. Rung 1 is tight ASD-STE100 controlled plain text. Rung 2 is a diagram that marks the least-certain part. Rung 3 is a single self-contained interactive HTML page. Use when the user asks to explain, teach, show, or make a visual of a topic and wants the answer to escalate from words to diagram to interactive page, or references Karpathy output ladder or writing hierarchy. Combines controlled prose, diagramming, and standalone HTML delivery in one workflow."
+agent_created: true
+---
+
+# Karpathy Output Ladder (Rungs 1–3)
+
+## Overview
+
+Turn any "explain / teach / show me" request into a three-step escalation, in order of
+expressiveness and effort:
+
+- **Rung 1 — Controlled text.** A short, unambiguous explanation written to the ASD-STE100
+  controlled-English rules (see `references/ste100.md`).
+- **Rung 2 — Diagram.** One SVG or Mermaid diagram that shows the structure, **with the
+  single most uncertain or assumption-heavy part visibly flagged**.
+- **Rung 3 — Interactive page.** One self-contained HTML file (inline CSS + JS, no external
+  dependencies) that lets the reader explore the topic through tabs, accordions, or toggles.
+
+Each rung builds on the previous one. A diagram that contradicts the text, or an HTML page
+that drops the flagged uncertainty, is a failed deliverable. Always deliver rungs in
+sequence and carry the "least-certain" marker up the ladder.
+
+## When to Use
+
+Trigger this skill when the user:
+
+- Asks to explain, teach, clarify, or "show" a concept, mechanism, or process.
+- Says "make a diagram / chart / visual" alongside an explanation.
+- Wants a standalone HTML explainer, interactive page, or long-scroll infographic.
+- References Karpathy's output ladder, the "writing hierarchy", or "rungs" of LLM output.
+- Wants a topic rendered at increasing fidelity (words → picture → interactive).
+
+If the user wants only one rung (e.g. "just a diagram"), still apply the relevant rung's
+rules below, but skip the others.
+
+## Workflow
+
+### Rung 1 — Controlled text (always first)
+
+Write the explanation before drawing anything. Follow `references/ste100.md`:
+
+- Procedural (instruction) sentences: ≤ 20 words. Descriptive sentences: ≤ 25 words.
+- Each paragraph: ≤ 6 sentences.
+- Prefer active voice. Use one word for one meaning. Keep noun clusters ≤ 3 words.
+- Use approved verbs (check, start, stop, use, show, open, close, set, get, make, …).
+- No metaphors, no hype words, no double negatives.
+
+Output a compact block of 3–8 sentences that a non-expert can parse. This block becomes the
+caption / intro for Rung 2 and the summary panel for Rung 3.
+
+### Rung 2 — Diagram with a "least-certain" flag
+
+Pick the single diagram that carries the idea:
+
+- **Flow / process / decision** → Mermaid `flowchart` or `sequenceDiagram`.
+- **State machine / lifecycle** → Mermaid `stateDiagram-v2`.
+- **Spatial / custom / branded** → hand-written inline SVG (viewBox `0 0 680 …`).
+
+Rules:
+
+- One concept per diagram. Label every node in plain words.
+- **Mark the least-certain part**: dashed border + a `⚠ least certain` tag, or a muted
+  color, so the reader sees where the explanation is weakest. This is mandatory, not
+  optional — it is the core discipline of the ladder.
+- Keep it minimal; do not decorate.
+
+If the diagram would need more than ~12 nodes to be honest, split it or fall back to text.
+
+### Rung 3 — Self-contained interactive HTML
+
+Copy `assets/html-template/index.html` as the starting point. Then:
+
+- Keep everything inline: `<style>` in `<head>`, `<script>` at end of `<body>`. No CDN,
+  no `<link href>`, no build step. The file must open from `file://` with zero network.
+- Structure the page: a one-line title, the Rung-1 summary, the Rung-2 diagram (embed the
+  SVG/Mermaid), then interactive sections (tabs or accordion) that expand each part.
+- Add at least one real interaction: tab switch, accordion open/close, hover reveal, or a
+  scroll-triggered fade. Prefer subtle motion over spectacle.
+- Keep the "least-certain" flag visible in the page (a callout box that links to the
+  diagram's dashed node).
+- Include `<meta name="viewport" content="width=device-width, initial-scale=1">` and a
+  dark/light-safe color scheme.
+- Target a single file under ~80 KB. If larger, move sample data out or trim.
+
+Deliver the HTML file via `present_files` so the user gets a live preview.
+
+## Acceptance Checklist
+
+- [ ] Rung 1 text obeys the STE100 length and voice rules.
+- [ ] Rung 2 diagram exists and flags exactly one least-certain part.
+- [ ] Rung 3 HTML is one self-contained file, opens offline, and surfaces the flag.
+- [ ] The three rungs agree with each other (no contradictions).
+
+## Resources
+
+- `references/ste100.md` — Verified ASD-STE100 rules, approved-verb list, official PDF link,
+  before/after examples. Load this whenever writing Rung 1 text.
+- `references/ladder-workflow.md` — Deeper notes on diagram choice and HTML conventions.
+- `assets/html-template/index.html` — Copy-ready self-contained interactive page scaffold.

session-mechanism/references/karpathy-output-ladder/assets/html-template/index.html

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Topic — Interactive Explainer</title>
+<style>
+  :root{
+    --bg:#ffffff; --panel:#f5f6f8; --text:#1b1f24; --muted:#6b7280;
+    --accent:#2563eb; --line:#d8dce3; --warn:#d97706; --warn-bg:#fff7ed;
+  }
+  @media (prefers-color-scheme: dark){
+    :root{
+      --bg:#0f1115; --panel:#171a21; --text:#e6e8ec; --muted:#9aa3af;
+      --accent:#5b8cff; --line:#2a2f39; --warn:#f59e0b; --warn-bg:#2a2113;
+    }
+  }
+  *{box-sizing:border-box}
+  body{margin:0;background:var(--bg);color:var(--text);
+    font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;}
+  header{padding:28px 20px 16px;border-bottom:1px solid var(--line);}
+  header h1{margin:0 0 4px;font-size:24px}
+  header p{margin:0;color:var(--muted);font-size:14px}
+  main{max-width:760px;margin:0 auto;padding:20px}
+  .summary{background:var(--panel);border:1px solid var(--line);border-radius:12px;
+    padding:16px;margin:16px 0}
+  .summary h2{margin:0 0 8px;font-size:15px;color:var(--mcent);text-transform:uppercase;
+    letter-spacing:.04em;color:var(--muted)}
+  .diagram{margin:16px 0}
+  .diagram svg{width:100%;height:auto;display:block}
+  /* Tabs */
+  .tabs{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 8px}
+  .tab{padding:8px 14px;border:1px solid var(--line);background:var(--panel);
+    color:var(--text);border-radius:8px;cursor:pointer;font-size:14px}
+  .tab[aria-selected="true"]{border-color:var(--accent);color:var(--accent);font-weight:600}
+  .panel{display:none;border:1px solid var(--line);border-radius:10px;padding:16px;
+    background:var(--panel)}
+  .panel.active{display:block;animation:fade .3s ease}
+  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
+  /* Accordion */
+  details{border:1px solid var(--line);border-radius:10px;padding:0 14px;margin:8px 0;
+    background:var(--panel)}
+  details summary{cursor:pointer;padding:12px 0;font-weight:600;list-style:none}
+  details summary::-webkit-details-marker{display:none}
+  details[open] summary{color:var(--accent)}
+  details p{margin:0 0 12px;color:var(--text)}
+  /* Least-certain callout */
+  .warn{background:var(--warn-bg);border:1px solid var(--warn);border-radius:10px;
+    padding:12px 14px;margin:18px 0;color:var(--text)}
+  .warn b{color:var(--warn)}
+  footer{color:var(--muted);font-size:13px;padding:16px 20px 40px;
+    border-top:1px solid var(--line);max-width:760px;margin:0 auto}
+  a{color:var(--accent)}
+</style>
+</head>
+<body>
+<header>
+  <h1>Topic Title</h1>
+  <p>One-line plain-language subtitle.</p>
+</header>
+<main>
+  <!-- Rung 1: STE100 summary, paste verbatim -->
+  <section class="summary">
+    <h2>Rung 1 — Plain summary</h2>
+    <p>Write 3–8 short sentences here. Active voice. One idea per sentence.
+       No metaphors. This is the controlled-English core of the explainer.</p>
+  </section>
+
+  <!-- Rung 2: diagram with least-certain flag -->
+  <section class="diagram">
+    <h2 style="font-size:15px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em">Rung 2 — Diagram</h2>
+    <svg viewBox="0 0 680 220" role="img" aria-label="topic diagram">
+      <rect x="20" y="80" width="150" height="56" rx="10" fill="none"
+            stroke="var(--accent)" stroke-width="2"/>
+      <text x="95" y="113" text-anchor="middle" fill="var(--text)">Step A</text>
+      <line x1="170" y1="108" x2="250" y2="108" stroke="var(--line)" stroke-width="2"/>
+      <rect x="250" y="80" width="150" height="56" rx="10" fill="none"
+            stroke="var(--accent)" stroke-width="2"/>
+      <text x="325" y="113" text-anchor="middle" fill="var(--text)">Step B</text>
+      <!-- least-certain node: dashed + muted -->
+      <line x1="400" y1="108" x2="480" y2="108" stroke="var(--line)" stroke-width="2"
+            stroke-dasharray="6 4"/>
+      <rect x="480" y="80" width="170" height="56" rx="10" fill="none"
+            stroke="var(--warn)" stroke-width="2" stroke-dasharray="6 4" opacity="0.85"/>
+      <text x="565" y="108" text-anchor="middle" fill="var(--warn)">Uncertain</text>
+      <text x="565" y="156" text-anchor="middle" fill="var(--warn)" font-size="12">⚠ least certain</text>
+    </svg>
+  </section>
+
+  <!-- Rung 3: interactive tabs -->
+  <div class="tabs" role="tablist">
+    <button class="tab" role="tab" aria-selected="true" data-target="p1">Part 1</button>
+    <button class="tab" role="tab" aria-selected="false" data-target="p2">Part 2</button>
+    <button class="tab" role="tab" aria-selected="false" data-target="p3">Part 3</button>
+  </div>
+  <div class="panel active" id="p1"><p>Expand Part 1 here. Keep it short and factual.</p></div>
+  <div class="panel" id="p2"><p>Expand Part 2 here.</p></div>
+  <div class="panel" id="p3"><p>Expand Part 3 here.</p></div>
+
+  <!-- Accordion for detail drilling -->
+  <details>
+    <summary>Deep dive: how it works</summary>
+    <p>Put the mechanism breakdown here. One paragraph per <code>details</code>.</p>
+  </details>
+
+  <!-- Least-certain callout (must surface the flagged node) -->
+  <div class="warn">
+    <b>⚠ Least certain:</b> State the one assumption or missing measurement here. Link it to
+    the dashed node in the diagram above.
+  </div>
+</main>
+<footer>
+  Sources / verify: <a href="https://www.asd-ste100.org/assets/files/ASD-STE100_ISSUE9.pdf">ASD-STE100 Issue 9 (PDF)</a>
+</footer>
+<script>
+  document.querySelectorAll('.tab').forEach(function(t){
+    t.addEventListener('click', function(){
+      document.querySelectorAll('.tab').forEach(function(x){x.setAttribute('aria-selected','false')});
+      document.querySelectorAll('.panel').forEach(function(p){p.classList.remove('active')});
+      t.setAttribute('aria-selected','true');
+      document.getElementById(t.dataset.target).classList.add('active');
+    });
+  });
+</script>
+</body>
+</html>

session-mechanism/references/karpathy-output-ladder/references/ladder-workflow.md

@@ -0,0 +1,55 @@
+# Ladder Workflow — Deeper Notes (Rungs 2 & 3)
+
+Companion to SKILL.md. Use when a diagram or HTML page needs more than the baseline rules.
+
+## Rung 2 — Diagram selection
+
+| If the topic is… | Use | Why |
+|---|---|---|
+| Steps, branches, decisions | Mermaid `flowchart TD` | Fast, readable, no layout code |
+| Interaction over time | Mermaid `sequenceDiagram` | Shows actors + order |
+| States + transitions | Mermaid `stateDiagram-v2` | Lifecycle clarity |
+| Spatial, branded, custom | Inline SVG (`viewBox 0 0 680 …`) | Full control of look |
+
+Mermaid tips:
+- Keep node text short; use `"text"` quotes when labels have punctuation.
+- Avoid `graph` with more than ~12 nodes; split instead.
+- Render Mermaid by emitting the fenced block for the chat, OR embed via a tiny Mermaid
+  runtime only if the HTML page needs live rendering (rare — prefer pre-rendered SVG).
+
+SVG tips:
+- Start every SVG with `viewBox="0 0 680 H"`. No fixed width/height in px.
+- Use a small palette: 2 strokes + 1 accent + 1 muted (for the uncertain part).
+- The "least-certain" node: `stroke-dasharray="6 4"` + `opacity="0.7"` + a `⚠ least certain`
+  label. This is the non-negotiable marker.
+
+## The "least-certain" flag — discipline
+
+For every explanation there is one weakest link: an assumption, a missing measurement, a
+contested cause. Find it and mark it on the diagram and in the HTML callout. Do not soften it
+with "may" everywhere — mark the one real gap, state the others as plain facts. This is what
+separates the ladder from a normal infographic.
+
+## Rung 3 — Self-contained HTML conventions
+
+Hard rules:
+- One `.html` file. Inline `<style>`, inline `<script>`. No `http(s)` asset references.
+- Must work from `file://` with Wi-Fi off.
+- `<meta name="viewport" content="width=device-width, initial-scale=1">` required.
+
+Layout pattern (matches `assets/html-template/index.html`):
+1. `<header>`: title + one-line subtitle.
+2. Summary panel: the Rung-1 STE100 text, verbatim.
+3. Diagram block: embed the SVG (or a static rendered image of the Mermaid).
+4. Interactive section: tab bar or accordion that expands each concept.
+5. Callout: "⚠ Least certain" box linked to the diagram's dashed node.
+6. Footer: sources / "verify at <link>".
+
+Interaction budget: pick ONE primary interaction (tabs OR accordion) + one micro-animation
+(hover lift, or fade-in on scroll). More than that is noise.
+
+Color: define CSS variables for bg / text / accent / muted at top of `<style>`; support dark
+and light by reading `prefers-color-scheme` or by shipping a manual theme toggle. Never hard
+code `#000`/`#fff` only.
+
+Size: keep under ~80 KB. If sample data bloats it, trim to 2–3 examples.

session-mechanism/references/karpathy-output-ladder/references/ste100.md

@@ -0,0 +1,65 @@
+# ASD-STE100 — Verified Reference
+
+Source standard for **Rung 1 (controlled text)** of the Karpathy output ladder. These facts
+were cross-checked across multiple public sources (Skybrary, CEUR-WS Vol-3990, IBM
+mcp-context-forge "Agent Prose Standard", tessl.io, skillsafe.ai, wpnews.pro). The single
+canonical source is the official issue PDF.
+
+## What it is
+
+- **ASD-STE100** = "Simplified Technical English", an international controlled-writing
+  standard for aerospace / defence technical documentation.
+- Maintained by ASD (AeroSpace and Defence Industries Association of Europe).
+- Goal: make technical text unambiguous so non-native readers and machines parse it the same
+  way every time. This is exactly why Karpathy puts it at Rung 1 of LLM output.
+
+## Current issue (Issue 9) — verified shape
+
+- **53 writing rules** organized into **9 sections**.
+- **Dictionary**: ~875 approved words (with approved meanings) plus ~1400 non-approved words
+  that the standard tells you to avoid or replace.
+- Official publication: **434 pages**.
+- Canonical PDF (Issue 9):
+  `https://www.asd-ste100.org/assets/files/ASD-STE100_ISSUE9.pdf`
+
+> Treat the PDF as the source of truth for edge cases. The rules below are the high-signal
+> subset that covers ~90% of LLM-generated prose.
+
+## Core writing rules (apply to Rung 1)
+
+| Rule | Limit / form |
+|---|---|
+| Procedural sentence (instructions) | ≤ 20 words |
+| Descriptive sentence | ≤ 25 words |
+| Sentences per paragraph | ≤ 6 |
+| Voice | Active preferred ("Open the file", not "The file is opened") |
+| Word meaning | One word, one meaning — never reuse a word for two senses |
+| Noun clusters | ≤ 3 words ("fuel pump" ok; "fuel pump pressure sensor module" no) |
+| Instructions | Imperative / command form ("Check the value", not "You should check the value") |
+| Banned forms | No double negatives, no metaphors, no vague qualifiers ("very", "somewhat") |
+
+## Approved-verb discipline
+
+STE100 approves a small set of verbs and tells you to use them instead of synonyms. The
+high-signal approved verbs for LLM output:
+
+`check · start · stop · use · show · open · close · set · get · make · keep · move · press ·
+turn · remove · add · test · verify · allow · prevent`
+
+When in doubt, rewrite the sentence around one of these verbs.
+
+## Before / after (from IBM Agent Prose Standard examples)
+
+- ❌ "It is recommended that the user should endeavour to make sure the configuration is
+  appropriately set up prior to commencing the operation."
+- ✅ "Before you start, check the configuration."
+
+- ❌ "The subsystem may, under certain conditions, exhibit a failure mode that is not
+  immediately observable."
+- ✅ "The subsystem can fail without a warning. Check it often."
+
+## Using this in the skill
+
+Load this file whenever writing Rung 1. After drafting, self-audit against the table: if any
+sentence breaks a word limit or the voice rule, rewrite before moving to Rung 2. Do not
+"fix" meaning to hit the limit — cut or split instead.

session-mechanism/references/manifest.md

@@ -1,13 +1,13 @@
 # manifest · 包内文件清单
 
-> 生成方式：逐文件 `compile()` / `json.loads` ＋ md5 ｜ **最近一次全量重算：2026-10-07 00:33 （作业规矩 03/04 两处悬空引用修掉（原『参考 01』已并入 02/03））**
+> 生成方式：逐文件 `compile()` / `json.loads` ＋ md5 ｜ **最近一次全量重算：2026-10-07 01:26 （移入随包子技能 karpathy-output-ladder（全局 skills 原件已移出）＋ 索引登记）**
 > ⚠️ **2026-10-05 局部增量**：`references/pitfalls.md`（P0-77 拆条 ＋ P0-73/P0-77 压缩）与
 > `scripts/goalctl.py`（`--switch-goal` 确认闸 ＋ 旧目标归档）两行的 md5/大小已按当天实测值更新；**其余行仍是 10-04 基线**。
 > ⛔ 本表**不含** `install.log`（运行日志）与 `references/manifest.md`（自引用，写完即失真）。
 > ⚠️ **provenance 列里的 `skills/multi-session-collab/…`、`skills/workbuddy-session-forensics/…` 已是历史路径**
 >    —— 那两个目录 2026-10-01 已移到 `<工作区>/归档/技能-退役-20261001/`（⛔ 不在技能根了）。
 
-文件总数：**66** ｜ 语法 / 结构检查失败：**0**
+文件总数：**70** ｜ 语法 / 结构检查失败：**0**
 
 ## ✅ 已完成 · 2026-10-05 「目标唯一性 ＋ 换目标需确认」（用户口径落地）
 
@@ -120,7 +120,7 @@
 | `assets/design-tokens.css` | 6364 | `0668feb3a4729f1022e579ac0c5d2569` | — |
 | `install.py` | 37297 | `55603c2e739e7b531998f5563f15f789` | ok |
 | `references/00-动手前必过.md` | 7181 | `33bc86e442ccd4fcbb930c79c4ad0641` | — |
-| `references/01-文档索引.md` | 3604 | `825999a411e2a4f6b740063f81c01b03` | — |
+| `references/01-文档索引.md` | 4159 | `ea4185d568b94d7aa915f84f259b9773` | — |
 | `references/02-功能优先协作协议.md` | 35529 | `9122a6715bde02ab549805d69866d1cf` | — |
 | `references/03-回复排版-核心块.md` | 7538 | `1b34438e21db640d17b97a4a2522a249` | — |
 | `references/04-决策方法论.md` | 35566 | `eb5bdf8f100beb8eacb9f20b042df86c` | — |
@@ -133,6 +133,10 @@
 | `references/dsh-decision-method/素材库-U-用户决策.md` | 24597 | `94c9e860148f4265f1e21e5322346f94` | — |
 | `references/dsh-decision-method/素材库-反例-X.md` | 5712 | `8bce93e8c1ce71d17e6d33aa9a2d7724` | — |
 | `references/forensics.md` | 6067 | `1fb6deca9bb05bebe950d4f4e3adf043` | — |
+| `references/karpathy-output-ladder/SKILL.md` | 5252 | `f1e3b07003bbc544db52d32c122e6faf` | — |
+| `references/karpathy-output-ladder/assets/html-template/index.html` | 5883 | `b95c39d2cd41d8c0f21d4007e7ef3cef` | — |
+| `references/karpathy-output-ladder/references/ladder-workflow.md` | 2684 | `d49840707d19302d8f61f4e1d7f4ea2e` | — |
+| `references/karpathy-output-ladder/references/ste100.md` | 3022 | `fdbe3271c21a3c17f326d1e71de33b0d` | — |
 | `references/pitfalls.md` | 311254 | `d321a71e38dd246b8014b4c9100b12c7` | — |
 | `references/rules.md` | 8106 | `95af3566066d27c3c224ce681a82efc1` | — |
 | `references/supervise-persistence.md` | 34394 | `95c5c7b75acf8c2240eec7d267a51ded` | — |