菜单
把任意主题（技术概念、框架、API、产品、算法、流程等）讲成新手能一口气读懂的「深度讲解」内容，输出可为 HTML 长页、Markdown 文章或其它格式。核心方法是「懂→用→慎」三幕递进动线：先用生活类比建立直觉，再给真实应用，最后才讲限制与风险，并按主题类型自适应选节。当用户要求新手向解读、通俗讲解、生活化比喻、把文档讲清楚、调整讲解顺序、消除重复章节、或做成可分享的 explainer 时触发。关键词：深度讲解、新手向、通俗解读、生活类比、讲解动线、explainer、递进结构、把概念讲清楚。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
从 PRD 文档或产品描述自动生成高保真移动端 App 原型 HTML 页面。Use when the user provides a PRD, product requirements doc, feature description, or app idea and wants to generate high-fidelity mobile app prototypes, create UI mockups, visualize product features as mobile screens, or build interactive HTML prototypes. Also triggers on "原型图", "高保真原型", "mockup", "app prototype", "UI 设计稿", "手机界面", "移动端原型", or when user pastes product requirements and asks for visual output. Covers the full pipeline — UX analysis, interface planning, UI design, HTML implementation with iPhone 15 Pro device frames.
根据产品说明、页面描述、模块功能、数据库表结构、字段清单、业务规则推理出 RESTful API 接口设计文档，包含接口名称、HTTP 方法、路径、入参、出参、校验规则和 Mermaid 流程图。当用户提到"推理接口"、"设计接口"、"API 文档"、"接口设计"、"推断接口"、"帮我设计接口"、"推导 API"、"根据表结构生成接口"时使用此技能。也适用于用户给出页面、模块、表结构或碎片化需求，需要产出接口文档的场景。
将完整的HTML网页设计稿（含CSS、图片资源）转化为微信小程序原生页面（WXML/WXSS/JS）。Use when the user wants to: (1) Convert an HTML design/mockup to a WeChat Mini Program page, (2) Transform web frontend code to WXML/WXSS, (3) Port a web UI layout to mini-program with 1:1 visual fidelity, (4) Generate mini-program pages from HTML/CSS snippets or screenshots. 特别注意小程序顶部导航栏（自定义/系统默认）和底部tabBar的配置差异，项目使用Skyline渲染器。
根据用户提供的页面地址（URL 或路由路径）为该页面生成完整的 Playwright e2e 测试，覆盖页面上所有可见功能（筛选、表格、按钮、弹窗、跳转、导出等）。先询问使用真实 API 还是 Mock 数据两种模式，再读取组件源码推断功能点，最后生成并运行测试。适用于用户说“给这个页面生成 e2e”“测一下 /xxx 页的功能”“写 playwright 测试”“为 xxx 页补 e2e”等场景。
将 spec 或需求拆解为有序、可执行的任务列表。当用户有一份 spec 需要落地、感觉任务太大无从下手、需要评估工作量、或需要编排并行工作时使用。触发词：拆任务、任务拆解、出计划、实施计划、排期、task list、plan。
在编码之前生成结构化的规格文档。当用户要求写 spec、设计功能、规划新项目，或需求模糊时使用（如"我想做一个X"、"帮我设计Y"）。触发词：写spec、写规格、需求不清晰、新功能设计、帮我设计、技术方案、spec。
| name | explainer-narrative-flow |
| description | 把任意主题（技术概念、框架、API、产品、算法、流程等）讲成新手能一口气读懂的「深度讲解」内容，输出可为 HTML 长页、Markdown 文章或其它格式。核心方法是「懂→用→慎」三幕递进动线：先用生活类比建立直觉，再给真实应用，最后才讲限制与风险，并按主题类型自适应选节。当用户要求新手向解读、通俗讲解、生活化比喻、把文档讲清楚、调整讲解顺序、消除重复章节、或做成可分享的 explainer 时触发。关键词：深度讲解、新手向、通俗解读、生活类比、讲解动线、explainer、递进结构、把概念讲清楚。 |
| argument-hint | [主题 / 文档URL / 文件路径] [可选：输出格式与受众] |
| allowed-tools | WebFetch, Bash, Read, Write |
把一个主题讲成读者能一口气读懂的内容。不是复述资料，而是按读者的认知顺序组织：先建立直觉，再给真实应用，最后才讲限制与风险。
主题不限：技术概念、框架、API、产品、算法、设计模式、工作流程都适用。输出格式不限：HTML 长页、Markdown 文章、幻灯文稿等。
第一幕 · 懂 先让读者明白「这是什么、为什么存在」
第二幕 · 用 再让读者看到「能拿它做什么、怎么用」
第三幕 · 慎 最后才讲「有什么限制、坑、代价」
为什么顺序不能乱：读者先「懂」才有兴趣，再看「能干嘛」才有动力，最后才接受「有什么坑」。把限制/成本提前，会在价值感建立之前劝退读者。
可以增减、改名、合并具体小节，但三幕的先后不可颠倒。
三幕之下放哪些小节，取决于主题类型。先判断类型，再挑菜单：
| 主题类型 | 第一幕·懂 | 第二幕·用 | 第三幕·慎 |
|---|---|---|---|
| 纯概念/原理（如一致性模型、加密原理） | 是什么 + 生活类比 + 关键机制 | 在真实系统里怎么体现 + 常见误区 | 局限/边界条件 + 总结 |
| 工具/API/框架 | 是什么 + 生活类比 | 真实例子 + 快速上手 + 配置定制 | 机制限制 + 注意事项 + 总结 |
| 产品/功能 | 是什么 + 生活类比 | 典型用法场景 + 上手步骤 | 适用边界 + 费用/限制 + 总结 |
| 流程/方法论 | 是什么 + 为什么需要 | 分步走 + 真实案例 | 常见坑 + 适用/不适用 + 总结 |
| 多概念对比 | 各是什么 + 生活类比（统一映射） | 各自适用场景 + 决策树 | 误用风险 + 总结 |
默认全菜单（适合工具/产品类）：是什么 → 生活类比 → 真实例子 → 快速上手 → 配置定制 → 机制限制 → 注意事项 → 总结。各节写法见 references/narrative-structure.md。
没有「快速上手命令」「配置开关」「费用」的主题（如纯概念），删掉对应小节，不要硬凑。
WebFetch 抓取（含文档索引页补充）；只提取动线各节需要的事实并标注来源。explainer_[主题].{html,md}。本技能只负责内容结构与讲解顺序，不绑定任何特定技能或仓库。若环境中已有网页排版/HTML 生成类技能，可复用其骨架。
删节、合并、调序后必做：