Use when the task is to unpack a local reference repository into a Chinese structural topic page, update site navigation, stamp dates, and leave behind a reusable deconstruction note for the repo.
Use this skill when the user wants to turn a reference repository into a Chinese “庖丁解牛” topic page instead of leaving only scattered notes. 典型输入会提到：
默认目标是把一个本地参考仓库沉淀成三类产物：
reference/.../our/ 下的分析笔记或延续既有笔记site/topic-*.html + site/md/*.md 的结构专题页reference/ 下；优先使用本地代码和文档，不先假设外网信息。优先读这些入口：
README.mdapps/、packages/、plans/、docs/reference/.../our/目标不是穷举文件，而是找出 4 到 6 个稳定层次，例如：
不要写成文件清单。要先决定这页想回答什么问题，例如：
页面结构必须围绕这个主问题展开。
如果 reference/.../our/ 已有同主题笔记，优先续写或吸收它；没有再新建。
分析稿里至少要有：
在 site/ 下新建或更新 topic-*.html，并同步创建 site/md/*.md。
默认页面要求：
topic-cc-unpacked-zh.html 这种分节页面，而不是纯概念短页不要只放表格！ 每个结构层小节都要配可视化组件，让读者一眼能看懂结构关系。
为每个专题页创建 site/data/{topic}-overview.json，结构如下：
{
“meta”: { “updated”: “YYYY-MM-DD”, “source”: “reference/...” },
“section_key”: {
“title”: “小节标题”,
“description”: “一句话概括”,
“items”: [
{ “id”: “...”, “name”: “...”, “icon”: “🚀”, “color”: “#f97316”, “description”: “...”, “path”: “...” }
]
}
}
参考 site/js/superset-overview.js，为每个小节创建独立组件类：
组件模式：
class SectionCards {
constructor(mount, dataUrl) {
this.mount = mount
this.dataUrl = dataUrl
}
async init() {
const res = await fetch(this.dataUrl)
this.data = await res.json()
this.render()
}
render() {
// 用 this.data 生成 HTML
}
}
在 site/css/style.css 末尾添加专用样式块：
/* ========== {Topic} Overview 可视化组件 ========== */
.{topic}-section { ... }
.{topic}-cards-grid { ... }
.{topic}-app-card { ... }
核心样式要点：
--card-color 实现动态配色@media (max-width: 600px) 切换单列在页面小节中替换表格为挂载点：
<div id=”{topic}-section-mount”
class=”{topic}-overview-mount”
data-json=”data/{topic}-overview.json”
role=”region”
aria-label=”小节描述”></div>
然后在页脚添加脚本引用：
<script src=”js/{topic}-overview.js”></script>
每个小节至少具备以下之一：
| 小节类型 | 推荐可视化 |
|---|---|
| 产品壳 / 应用列表 | 彩色卡片网格 + 目录观察区 |
| 引擎 / 核心概念 | 概念链图 + 洞察框 |
| 子系统 / 模块 | 左边框彩色卡片 |
| 公式 / 步骤 | 编号步骤 + 结果说明 |
| 层次结构 | 堆叠层级图 |
禁止：连续放多个枯燥表格而不加可视化组件。
至少检查这些位置是否需要接线：
site/index.htmlsite/topic-paoding-jieniu.htmlsite/topic-agent.htmlsite/js/app.js 里的侧栏site/md/*.md如果旧入口只是概念页，而新页是更具体的承载页，优先让新页占据导航位。
所有新专题页都要带日期：
<meta name=”page:updated” content=”YYYY-MM-DD”>更新时间站点页脚日期由全站脚本注入，但页面元数据仍要显式填写。
如果这次改动属于用户可见的站点结构、专题、技能或产品定位调整，顺手更新：
.claude/plans/likecode-model-freedom-roadmap.md记录新增专题、导航调整、技能沉淀等关键结果。
meta-agent，要把概念落到具体文件和结构层上完成后至少做这些检查：
python3 tools/check_site_md_parity.pysite/js/app.js，执行 node --check site/js/app.jsnode --check site/js/{new}.jsrg 复查旧入口文案是否还有漏改完成一次”解构专题”后，默认应当留下：
site/data/{topic}-overview.jsonsite/js/{topic}-overview.js