wechat-article-viewer/          # 技能目录├── SKILL.md                    # 核心说明书（告诉 AI 怎么用）├── scripts/                    # 可执行脚本│   └── fetch_article.js        # 实际抓取逻辑├── references/                 # 参考文档│   └── browser_setup.md        # 浏览器配置说明└── assets/                     # 资源文件（本例不需要）

---name: wechat-article-viewerdescription: >  微信公众号文章完整阅读器。  Use when: 用户提供 mp.weixin.qq.com 链接，需要阅读/总结文章内容。  NOT for: 非微信链接的普通网页、需要登录的付费文章。---

## When to Run- 用户消息中包含 `mp.weixin.qq.com` 链接- 用户说“帮我读一下这篇公众号”“总结这篇文章”- 用户分享微信公众号文章并要求分析内容

## Workflow### Step 1: 检查浏览器环境检查本地是否有带调试端口的 Chrome 实例运行（默认端口 9222）：- 如果没有运行，提示用户启动方式：	```	/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \	    --remote-debugging-port=9222 \	    --user-data-dir=/tmp/chrome-debug-profile	```### Step 2: 连接浏览器并打开链接使用 Puppeteer 或 Chrome DevTools Protocol 连接到浏览器：- 打开目标 URL- 等待页面加载完成（等待 `.rich_media_content` 元素出现）### Step 3: 提取内容从渲染后的页面中提取：- 标题：`.rich_media_title`- 作者：`.profile_nickname`- 发布时间：`.publish_time`- 正文：`.rich_media_content`### Step 4: 返回结构化结果将提取的内容按以下格式返回给用户

## Output Format📰 **{标题}**✍️ 作者：{作者}📅 发布时间：{发布时间}---{正文内容（自动分段）}---🔗 原文链接：{url}

// scripts/check_browser.jsfunction checkBrowserConnection() {  // 返回详细的连接状态，而不是简单的 true/false  const status = {    connected: false,    has_debug_port: false,    has_wechat_login: false,    user_guidance: ""  };  // 1. 调试端口是否可连接？  if (!isPortOpen("localhost", 9222)) {    status.user_guidance = "请先启动带调试端口的 Chrome，命令见文档";    return status;  }  status.has_debug_port = true;  // 2. 浏览器是否能正常通信？  try {    const browser = connectToBrowser(9222);    status.has_debug_port = true;  } catch (e) {    status.user_guidance = "浏览器端口已占用但无法连接，请关闭其他调试进程";    return status;  }  // 3. 浏览器里有没有微信登录态？  if (!checkWechatCookie(browser)) {    status.user_guidance = "请在浏览器中先登录微信网页版 (https://wx.qq.com)";    return status;  }  status.has_wechat_login = true;  status.connected = true;  return status;}

// scripts/index.jsexport default async function run(action, params) {  try {    // 1. 参数校验    const { url } = params;    if (!url || !url.includes('mp.weixin.qq.com')) {      return {        success: false,        message: "请提供有效的微信公众号文章链接"      };    }    // 2. 检查浏览器环境    const browserStatus = checkBrowserConnection();    if (!browserStatus.connected) {      return {        success: false,        message: browserStatus.user_guidance,        retryable: true  // 告诉用户配置后可以重试      };    }    // 3. 抓取并渲染    const article = await fetchAndRenderArticle(url);    // 4. 返回结果    return {      success: true,      data: article    };  } catch (error) {    return {      success: false,      message: `执行失败：${error.message}`    };  }}

## Workflow1. 检查环境是否就绪2. 如未就绪，返回清晰配置指引3. 如已就绪，执行核心任务

## Workflow执行 `scripts/xxx.js` 获取数据

## Workflow1. 尝试方案 A（最快）2. 如果失败，尝试方案 B（更稳定但更慢）3. 如果仍失败，返回错误指引