admin
f2691e9368
一、为什么
- 用户令：把这个技能复制进会话技能「当作子技能」，用法后续再定；
随后又明确「并从 全局 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 逐个一致。
2.6 KiB
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
graphwith 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 certainlabel. 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
.htmlfile. Inline<style>, inline<script>. Nohttp(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):
<header>: title + one-line subtitle.- Summary panel: the Rung-1 STE100 text, verbatim.
- Diagram block: embed the SVG (or a static rendered image of the Mermaid).
- Interactive section: tab bar or accordion that expands each concept.
- Callout: "⚠ Least certain" box linked to the diagram's dashed node.
- Footer: sources / "verify at ".
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.