橙长知识库 · 网页读书笔记（长网页）
这个 Skill 做什么
生成单文件 HTML 长网页读书笔记（可滚动 + 左侧栏目导航 + 阅读进度条）：
- 长网页流式布局：内容纵向滚动，栏目高度自然撑开，无溢出裁切风险
- 10 大固定栏目：封面 → 速览 → 框架 → 逐条拆解 → 模型库 → 纠错 → 金句 → 行动清单 → 复盘 → 延伸
- 侧边目录导航：sticky 侧栏（桌面）/ 顶部折叠（移动端），IntersectionObserver 高亮当前栏目
- 阅读进度条 + 返回顶部，原生 JS，无外部依赖
- 浅色/深色双主题：右上角按钮切换，浅色（暖米纸张，默认）+ 深色（深夜书房），localStorage 记忆
- 设计语言：暖米纸张质感（
#f5efe2底 +#fffdf6卡 +#3a3228墨棕）+ 多色强调（主橙#e0783a/ 深橙#b5532a/ 金#c9a44a/ 青#2f5d6a），衬线标题 + 非衬线正文
工作流
Step 1 · 提取内容
→ python references/epub_extract.py 电子书.epub 输出目录
→ 产出 book.txt（纯文本）+ meta.txt（书名/作者/目录）
Step 2 · 生成栏目内容
→ Read references/prompt.md，按 10 栏目深度拆解（100% 忠于原著）
Step 3 · 套模板填充
→ 拷贝 assets/template.html 为《书名》作者.html
→ Read references/layouts.md，逐栏目粘贴骨架 + 填充内容
Step 4 · 校验 + 交付
→ 结构校验（见下）→ 浏览器预览 → present_files 交付
命名硬规则
| 规则 | 说明 | 示例 |
|---|---|---|
| 书名号 | 《 开头 》 紧跟作者，无空格、无 · |
《书名》作者.html |
| 作者名 | 用户提供为准；多作者用 、 |
《书名》作者甲、作者乙.html |
| 禁止 | 不得命名 index.html |
❌ |
栏目规范（10 大固定栏目）
| # | 栏目 | section.id | 定位 |
|---|---|---|---|
| 1 | 封面 Hero | hero | 书名/作者/定位/核心一句话 + 标签 |
| 2 | 全书速览 | tldr | 一句话读懂 + 3 核心观点 |
| 3 | 核心框架全景 | framework | 全书核心结构图（SVG） |
| 4 | 逐条拆解（主体） | habits | 每单元：定义→模型→案例→金句→实践 |
| 5 | 核心模型工具库 | models | 可复用模型卡片墙 |
| 6 | 认知误区与正解 | misconceptions | ❌误区 vs ✓正解 |
| 7 | 金句摘录墙 | quotes | 6-10 句原文金句 |
| 8 | 落地行动清单 | actions | 分阶段可勾选行动 |
| 9 | 复盘标准 | review | 合格/进阶量化标准 |
| 10 | 延伸阅读 + 页脚 | more | 相关书目 + 品牌页脚 |
> 目录由 JS 依据 section.section 的 data-title 自动生成，只需保证每个 section 的 id + data-title 正确即可。
硬规则
- 忠于原著：金句逐字引用，概念/模型与原著一致，不扩写不编造
- 类名唯一来源：
assets/template.html是唯一类名来源，新增组件必须先加 CSS - 中文排版：数字与量词不加空格（
7大习惯）；书名用《》 - 锚点一致：目录项（JS 自动生成）与 section.id 一一对应
- 复用边界：skill 只写通用规范，单本书内容不写入 skill 文件
- 数字字体：序号、编号、水印、大字号一律用
var(--serif)，不另设字体族；
等宽等高由body的font-variant-numeric:tabular-nums lining-nums全局继承，
无需在单个选择器重复声明
Step 4 结构校验
三项结构校验（可用 grep 快速自查）：
1. 标签闭合：grep -c "<section" 与 "</section>" 相等；无孤立 </div>
2. 锚点齐全：10 个 section.id 齐全，且顺序与栏目表一致
3. 内容完整：栏目 4（habits）内 habit-card 数 = 核心单元数
资源文件导览
web-booknote-skill/
├── SKILL.md ← 你正在读
├── README.md ← 简介
├── assets/
│ └── template.html ← 长网页模板（全部组件 CSS + 导航/进度条 JS）
└── references/
├── prompt.md ← 栏目化深度拆解提示词（Step 2 Read）
├── layouts.md ← 栏目 HTML 骨架（Step 3 粘贴时 Read）
└── epub_extract.py ← EPUB 文本提取脚本（Step 1）
