Releases: BFRKQSB7/html-guide-skill
Release list
v2.4.0 — 摘要卡防溢出自动缩字号 + 内容长度上限文档
v2.4.0 — 摘要卡不再因文字过多而重叠
摘要卡固定 1200×630，之前正文过长会把要点/结论挤进注释与页脚区造成文字重叠（且无法自动缩小）。
修复
assets/card-template.html新增 防溢出自动缩字号（幂等脚本）：- 正文超出可用高度时，按 0.05 档整体缩小 大标题 / 小标题（结论）/ 要点 / 注释 字号
- 块面积随字号同步缩小（相对行高 + margin/padding 按比例缩放）
- 缩到「正文收在 meta 之下、注释之上、卡片底内」为止；正常短内容一个字节都不动
- 覆盖全部 6 种布局（data / quote / masthead / grid / poster / steps），保留原 steps 铺满逻辑
实测上限（data 布局 · 中文 · 有注释）
| 元素 | 上限 |
|---|---|
| 大标题 h1 | ≤4 行 ≈64 字（第 5 行就挤进注释区） |
| 结论 concl | ≈180 字 |
| 每条要点 | ≈105 字（3 行） |
| 全部要点总行数 | ≤8 |
| 标题+结论+要点总字数 | ≈800 自动缩到最小档仍装下；再往上需删减 |
文档
- 模板头部注释 +
SKILL.md§6.3 补充内容长度上限与自动缩字号说明 - 全部阈值经无头 Chrome DOM 几何实测（OCR 判重叠不可靠，改用几何检测）
Co-Authored-By: Claude Sonnet 4.6 noreply@anthropic.com
v2.3.0 — headless 导出 PDF + 技能介绍页 GitHub Pages 托管
更新
- SKILL.md：交付环节新增 headless 导出 PDF 选项（
chrome --headless=new --print-to-pdf）——真实渲染打印样式、免弹窗，适合自动化导出，与「严禁自动弹出浏览器」规则一致 - 新增
index.html技能介绍页：由 html-guide 自身生成的单文件介绍（能力/硬规则/工作流/9 套主题/产出物），README 顶部加入在线预览链接，托管于 GitHub Pages - README 版本徽章更新至 v2.3.0（v2.2.3 功能 + v2.2.4 清理合并折叠）
v2.2.2 — 摘要卡 steps 字号 bug + prompt 代码块横向溢出修复
修复
- 摘要卡 steps 布局 fit() 只放大第一个步骤：
querySelector("li span")只选中第一行，导致第一步字号被撑大、其余步骤不变 —— 改为querySelectorAll统一放大全部步骤 - prompt 代码块长行横向溢出：
lang-text块默认不换行，长行（如 117 字符的提示词模板）拖出横向滚动条、观感「崩坏」—— 新增pre code.lang-text{white-space:pre-wrap}，长行自动换行（真正代码保持默认）
完善
- design-system §4.3：补充
lang-text用法说明（纯文本/prompt 块长行自动换行） - design-system §4.36 + structure-guide：非常见外语缩写（TL;DR / EOL 等）首现同样用
.term注记
v2.2.1 — 清理发布文件本机个性化信息
修复
- 移除发布文件中的本机个性化信息：README 安装路径从本机绝对路径改为通用
%USERPROFILE%环境变量；代理端口示例统一为占位符 - 同步清理 v1.0.0 ~ v2.0.9 历史 Release 正文中的本机路径与端口
v2.2.0 — 长图居中放大 + 摘要卡 2× 高清 + A4 --scale + 否定性主张证据纪律
更新
- 长图（Step 6.1）：正文列居中 + 放大字号填满页面；覆盖主题规则须
!important（防正文窄条靠左） - 摘要卡（Step 6.3）：
--force-device-scale-factor=2高清导出（2400×1260） - A4 分页（Step 6.2 / make_a4.py）：新增
--scale倍率参数（分享建议 1.5× → 1191×1684） - 调研纪律：
search-guide.md§2.6 否定性主张先穷尽再断言 +SKILL.mdStep 3 第 6 条 / Step 5 证据自检
v2.1.0 — 9 套主题 + 摘要卡 6 布局 + A4 分页
新增
- 9 套设计师血统主题：新增
swiss（Müller-Brockmann 瑞士国际主义 · 瑞士红 · 网格）、book（Tschichold 书卷 · 版心比例 · 段首缩进两字） - 摘要卡 6 布局：
assets/card-template.html重构为data（数据）/quote（观点对角引号）/masthead（头条编辑）/grid（数据网格 KPI）/poster（海报宣言+论据行）/steps（步骤，正文自动适配铺满）× 9 风格 scripts/make_a4.py：一键把成品页分成多张同尺寸 A4 图（表格不切 / 段落跨页 / 作者页脚 / 末页居中 / 标题防爆）
完善
- design-system §2.3 专业排版原则（Butterick / Tufte data-ink / Warde 水晶杯 / Vignelli 可辩护）+ §4.37 卡片布局选择
- structure-guide 专业领域版式速查（学术/法律/财经/工程/产品 → 主题映射）
安装：下载本 Release 的 Source code (zip)，解压后放到 ~/.claude/skills/html-guide（目录内直接是 SKILL.md）。
v2.0.9 — 主题切换默认跟随系统
更新
- 主题切换默认跟随系统：打开页面默认按
prefers-color-scheme跟随系统深浅色，不再读取 / 写入 localStorage 记忆上次选择 - 点击右上角 ☀️/🌙 仍可手动切换（浅色 → 深色 → 跟随系统），但只对当前会话生效，刷新 / 重开即恢复跟随系统
- 背景：生成的是单文件文档，常分发给他人在各自设备打开——作者自己调试时点过深浅色，不应影响读者每次打开看到的主题
- README 功能表「深浅色切换」同步更新
安装
把 html-guide 文件夹放入 ~/.claude/skills/
（Windows: %USERPROFILE%\.claude\skills\），或用 Claude Code 的 /plugin 安装本仓库。
首次使用前复制 user-config.example.md 为 user-config.md 并填本机代理。
验证
无头 Chrome 渲染确认：加载后 <html> 无 data-theme（即跟随系统）、按钮处于「跟随系统」态、目录 / 锚点 / 高亮全部正常、无 JS 报错；check_html.py 0 error 0 warning。
v2.0.8 — user-config 扩展功能偏好
更新
- user-config 扩展「功能偏好」：除了网络代理，本机个性化配置现在还能控制生成页面的功能开关。六项默认全开，写
off即生成时省略对应元素：theme-toggle（深浅色切换按钮）/print-btn（打印按钮）/to-top（回到顶部）/kbar（Ctrl+K 跳转）/progress（阅读进度条）/toc（侧边目录）
- SKILL.md 撰写原则补：生成前读
user-config.md功能偏好裁剪；骨架 JS 对缺失元素自带守卫，不会报错 - 映射表见
user-config.example.md；user-config.md仍不入库
安装
把 html-guide 文件夹放入 ~/.claude/skills/
（Windows: %USERPROFILE%\.claude\skills\），或用 Claude Code 的 /plugin 安装本仓库。
首次使用前复制 user-config.example.md 为 user-config.md 并填本机代理。
验证
去掉 #toTop / #kbar 元素后 headless 渲染：JS 异常 0，其余功能（进度条、主题、打印）完好。
v2.0.7 — 功能按钮 tooltip 规范 + 回顶按钮更明显
更新
- 共享
.btn-tip组件：修复主题按钮 tooltip 被按钮宽度压成竖排的问题（width:max-content保证单行），右对齐按钮右缘防出屏，max-width兜底超长折行 - 打印按钮加 tooltip「打印 / 导出 PDF」；
title属性移除（避免 CSS tooltip 与原生 title 双提示）；回顶按钮title移除 - 规则固化（design-system §4.31 + SKILL.md 自检）：只给含义不直观的图标按钮加简短提示（主题切换、打印），意义自明的图标（搜索、复制、回顶 ↑）不加，文字尽可能简短
- 回顶按钮更明显：主色描边 + 浅底 + 主色箭头，悬停填充主色，深浅色下都醒目
安装
把 html-guide 文件夹放入 ~/.claude/skills/
（Windows: %USERPROFILE%\.claude\skills\），或用 Claude Code 的 /plugin 安装本仓库。
首次使用前复制 user-config.example.md 为 user-config.md 并填本机代理。
验证
CDP 实测：主题 tooltip 宽度 130px 单行（非 38px 竖排）、打印 tooltip「打印 / 导出 PDF」悬停出现、print/to-top 的 title 均为空、按钮右缘在视口内。
v2.0.6 — 主题按钮悬浮说明防溢出
更新
- 悬浮说明防溢出：tooltip 由居中改为右对齐按钮右缘（
right:0），右上角悬停时不再向右侧溢出屏幕（上一版 v2.0.5 提示文字过长，最右侧看不全） - 文案删短为三态短说明：「跟随系统 · 点击切浅色」「浅色 · 点击切深色」「深色 · 点击切跟随系统」
max-width:min(70vw,16rem)+white-space:normal兜底换行，超长也不出屏
安装
把 html-guide 文件夹放入 ~/.claude/skills/
（Windows: %USERPROFILE%\.claude\skills\），或用 Claude Code 的 /plugin 安装本仓库。
首次使用前复制 user-config.example.md 为 user-config.md 并填本机代理。
验证
CDP 实测：right:0 生效（tooltip 右缘 = 按钮右缘，按钮右缘 729 < 视口 758）、max-width 256px、文案 14 字符、悬停 opacity 1。