メニュー
读取网页内容，支持 SPA 页面自动检测与浏览器渲染降级。当普通 HTTP fetch 无法获取 Vue/React 等 SPA 页面的渲染数据时，自动通过 Playwright 浏览器获取完整内容。当用户需要读取网页数据、提取页面内容、或 WebFetch 工具返回空内容时使用。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | web-content-reader |
| description | 读取网页内容，支持 SPA 页面自动检测与浏览器渲染降级。当普通 HTTP fetch 无法获取 Vue/React 等 SPA 页面的渲染数据时，自动通过 Playwright 浏览器获取完整内容。当用户需要读取网页数据、提取页面内容、或 WebFetch 工具返回空内容时使用。 |
读取任意网页的渲染后内容。自动检测 SPA 页面，在 HTTP fetch 失败时降级到浏览器渲染。
首次使用前，在 skill 目录下执行：
cd skills/web-content-reader && npm install
浏览器渲染模式需要系统已安装 Chrome/Chromium。如果未安装，可通过 Playwright 安装：
npx playwright install chromium
本 Skill 完全独立，不依赖其他 Skill。如果系统已有 Playwright Skill 启动的浏览器实例，会自动复用以节省资源。
所有命令格式：
node skills/web-content-reader/tool.js <命令> '<JSON参数>'
先尝试 HTTP fetch，检测到 SPA 空壳时自动降级到浏览器渲染：
node skills/web-content-reader/tool.js read '{"url":"https://example.com"}'
已知是 SPA 页面时，跳过 fetch 直接用浏览器渲染：
node skills/web-content-reader/tool.js read '{"url":"https://spa-app.com","mode":"browser"}'
只需要静态 HTML 内容时：
node skills/web-content-reader/tool.js read '{"url":"https://example.com","mode":"fetch"}'
使用 CSS 选择器提取页面局部内容：
node skills/web-content-reader/tool.js read '{"url":"https://example.com","selector":".main-content"}'
# 纯文本（默认）
node skills/web-content-reader/tool.js read '{"url":"https://example.com","output":"text"}'
# 含 HTML
node skills/web-content-reader/tool.js read '{"url":"https://example.com","output":"html"}'
# 全部数据（含表格、链接、元信息）
node skills/web-content-reader/tool.js read '{"url":"https://example.com","output":"json"}'
浏览器模式下等待特定元素出现：
node skills/web-content-reader/tool.js read '{"url":"https://spa-app.com","mode":"browser","waitSelector":".data-loaded"}'
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
url | string | 必填 | 目标页面 URL |
mode | string | auto | auto：自动检测 / fetch：仅 HTTP / browser：仅浏览器 |
selector | string | - | CSS 选择器，提取页面特定区域 |
output | string | text | text：标题+文本 / html：含 HTML / json：全部数据 |
waitSelector | string | - | 浏览器模式下等待此选择器出现 |
timeout | number | 15000 | 浏览器渲染超时（ms） |
所有命令返回 JSON：
{
"result": {
"title": "页面标题",
"content": "提取的纯文本内容",
"html": "<div>...</div>",
"tables": [{"headers": ["列1"], "rows": [["值1"]]}],
"links": [{"text": "链接文本", "href": "https://..."}],
"meta": {"description": "...", "ogTitle": "...", "ogImage": "..."}
},
"method": "fetch|browser",
"url": "https://example.com",
"elapsed": 1234,
"error": null
}
output 参数控制 result 中返回的字段：
text：title + content + metahtml：以上 + htmljson：以上 + tables + links| 用户说 | 执行 |
|---|---|
| "读取这个页面的内容" / "帮我看看这个网页" | read '{"url":"..."}' |
| "这个页面 fetch 读不到数据" / "这是个 Vue 页面" | read '{"url":"...","mode":"browser"}' |
| "提取页面的表格数据" | read '{"url":"...","output":"json"}' |
| "只看 .content 区域的内容" | read '{"url":"...","selector":".content"}' |
| "获取页面的所有链接" | read '{"url":"...","output":"json"}' → 从 links 字段读取 |
当 Agent 使用 WebFetch 工具获取 URL 内容时，如果返回结果为空或明显是 SPA 空壳，应自动调用此 Skill：
node skills/web-content-reader/tool.js read '{"url":"<目标URL>","mode":"browser"}'
判断 WebFetch 结果需要降级的信号：
<div id="app"></div> 等框架占位符跨 IDE / 跨 LLM 的声明式工作流引擎，以 CLI 状态机形态运行。把多步任务、用户阻塞、条件循环、跨 LLM CLI 协作（claude / codex / caller）描述为一份 YAML，CLI 负责落盘、推进、崩溃恢复，所有推理交给 caller（你）或外部 LLM。当用户提到"workflow"、"流程"、"多步任务"、"跨 LLM 协作"、"用户确认环节"、"自动化 SOP"、"批量处理"、"恢复昨天的任务"，或意图需要 ≥3 个节点、需要审计、需要可重复 SOP 时使用。Python 3.10+，零运行时网络依赖。
skillix-hub 项目标准化 Skill 开发流程指南和脚手架工具。当用户要求创建新 Skill、 初始化 Skill 目录结构、或询问 Skill 开发规范时使用。提供 10 阶段完整生命周期： 需求命名、可行性分析、设计文档、讨论迭代、代码开发、单元测试、测试报告、技术文档、README 同步、docs 同步。
将知识材料编译为结构化 Wiki。AI 即编译器，Markdown-in Markdown-out，覆盖度追踪，增量编译。
本地知识资料索引与 Wiki 编译
第一性原理分析。将问题拆解到不可置疑的基础事实，系统挑战每一个假设，再从地基向上重建解决方案——而非依赖惯例或类比。适用于成本质疑、架构选型、根因分析、产品定义、约束破除、战略决策。
苏格拉底式批判性思维分析。自动识别需求分析、系统设计、技术选型、数据分析四类场景，智能决定快速结论（≤1问）或深度探索（≤5问），防止过度追问与草率结论。Socratic critical thinking for requirements, design review, tech research, and data analysis.