social-push

Original source / Raw SKILL.md

---
name: social-push
description: 使用 agent-browser 帮用户将内容发到社交媒体上。当用户需要发布内容、推送文章、上传文章、发帖到社交平台时使用此 skill。
disable-model-invocation: false
allowed-tools: Bash(agent-browser:*), Bash(jq:*), Bash(osascript:*) ,Read
---

用户输入 $ARGUMENTS

# Social-push Skill
你需要使用 bash 运行 agent-browser，并参考 references 中对应平台的 workflow，帮助用户将文章、图片上传到对应的社交平台上

# Rules
1. 打开用户浏览器：`open -na "Google Chrome" / "Microsoft Edge" --args --remote-debugging-port=9222`, 确保用户打开的浏览器支持远程调试
2. 使用 `agent-browser --auto-connect` 自动连接用户的浏览器
3. 最终操作只能是**暂存草稿**，禁止自动点击"发布"按钮，由用户自行确认发布
4. 每步操作后用 `agent-browser snapshot -i` 确认元素 ref，因为页面状态变化可能导致 ref 编号变化

# Core Workflow
1. 确认发布信息 调用 AskUserQuestion tool：目标平台（还是**添加新平台**）、内容类型、内容来源（文件路径/直接输入/ai 创作）、标题、话题标签
2. 简单了解 `agent-browser --help` 可用命令
3. 读取 references 中对应平台和内容类型的 workflow
4. 严格按照 workflow 中的步骤逐步执行


# Self-evolution

## fix and verify Workflow
网页交互可能发生变化，references 下面的 workflow 可能失效，按以下步骤修复：
1. 运行 `agent-browser snapshot` 查看当前页面的详细元素
2. 当查找失败，运行 `agent-browser eval "js"` 查看具体 html 元素
3. 验证正确的交互路径后，编辑 references 下对应的 workflow 文件进行修正

## 添加新的社交平台
当用户询问需要新添加一个平台时候，按以下步骤添加：
1. 参考 references 下已有的 workflow 作为模板
2. 用 `agent-browser --help` 查看可用命令 和 agent-browser 的 skill
3. 只有当启动浏览器，完整一步一步测试新的平台交互路径，确保每步操作正确
4. 才能在 references 目录下创建新平台的 workflow 文件，并在下方 References 中添加链接



# References

## 小红书
- `小红书图文` ：查看[小红书图文](./references/小红书图文.md)发布简短文章图文时候需要的 workflow
- `小红书长文` ：查看[小红书长文](./references/小红书长文.md)用户发送长文本时候需要的 workflow

## X (Twitter)
- `X推文` ：查看[X推文](./references/X推文.md)发布推文时候需要的 workflow

## 微博 (Weibo)
- `微博` ：查看[微博](./references/微博.md)发布微博时候需要的 workflow

## 微信公众号
- `微信公众号文章` ：查看[微信公众号文章](./references/微信公众号文章.md)发布公众号文章时候需要的 workflow

## 掘金
- `掘金文章` ：查看[掘金文章](./references/掘金文章.md)发布掘金文章并自动保存草稿的 workflow

## Linux.do
- `LinuxDo发帖` ：查看[LinuxDo发帖](./references/LinuxDo发帖.md)发布帖子（含类别与标签选择）的 workflow


---

## Referenced Files

> The following files are referenced in this skill and included for context.

### references/小红书图文.md

```markdown
## 上传图文 workflow

1. 打开发布图文的网站：`agent-browser --auto-connect open "https://creator.xiaohongshu.com/publish/publish?source=official&from=tab_switch&target=image"`
2. 查看交互：`agent-browser snapshot -i`
3. 上传文件：`agent-browser upload @e1 "{图片路径}"`
4. 插入标题：`agent-browser fill @e1 "{标题}"`
5. 插入正文：`agent-browser fill ".ProseMirror" "{正文内容}"`
6. 添加话题：`agent-browser type ".ProseMirror" "#{话题}"`，然后 `agent-browser press "Enter"` 确认
7. 暂存草稿离开：`agent-browser click @e13`

# 注意
标题不要超过 20 字符









```

### references/小红书长文.md

```markdown

## 上传长文 workflow

1. 打开发布图文的网站：`agent-browser --auto-connect open "https://creator.xiaohongshu.com/publish/publish?source=official&from=tab_switch&target=article"`
2. 查看交互：`agent-browser snapshot -i`
3. 进入长文：`agent-browser click @e1`
4. 插入标题：`agent-browser fill @e11 "{标题}"`
5. 将要上传文件内容保存到剪切板：`cat "{文件路径}" | pbcopy`
6. 点击正文编辑框：`agent-browser click ".ProseMirror"`
7. 将剪切板内容粘贴到正文：`agent-browser press "Meta+v"`
8. 替换 Markdown 图片引用

--

8. 一键排版：`agent-browser click @e13`
2. 查看交互：`agent-browser snapshot -i`
9. 下一步：`agent-browser click @e15`
2. 查看交互：`agent-browser snapshot -i`
10. 在描述框输入简介：`agent-browser type ".ProseMirror" "{简介内容}"`
11. 添加话题：`agent-browser type ".ProseMirror" " #{话题}"`，然后 `agent-browser press "Enter"` 确认
12. 暂存草稿离开：`agent-browser click @e13`

## 元素参考

### 编辑页面（点击"新的创作"后）

| 元素 | 选择器 | 功能 |
|------|--------|------|
| 标题框 | `@e11` | 输入标题 |
| 正文框 | `.ProseMirror` | 输入正文内容 |
| 上传图片 | `@e9` | 工具栏第9个按钮 |
| 一键排版 | `@e13` | 格式化文章 |
| 暂存离开 | `@e14` | 保存草稿 |

### 发布设置页面（点击"下一步"后）

| 元素 | 功能 |
|------|------|
| ".ProseMirror" | 描述/简介输入框 |
| ".ProseMirror" | 话题按钮 |
| @e13 | 暂存离开 |
| @e14 | 发布按钮（禁止自动点击） |


## 图片上传

### 方法一：直接粘贴图片

```bash
# 1. 将图片复制到剪贴板（macOS）
osascript -e 'set the clipboard to (read (POSIX file "{图片绝对路径}") as «class PNGf»)'

# 2. 点击正文编辑框
agent-browser click ".ProseMirror"

# 3. 粘贴图片
agent-browser press "Meta+v"
```

### 方法二：替换 Markdown 图片引用

粘贴 Markdown 文本后，将 `![alt](path)` 替换为真实图片：

```bash
# 1. 找到包含图片引用的段落并选中
agent-browser eval "
const ps = document.querySelectorAll('.ProseMirror p');
for (let i = 0; i < ps.length; i++) {
  if (ps[i].innerText.startsWith('![')) {
    const range = document.createRange();
    range.selectNodeContents(ps[i]);
    const sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    break;
  }
}
"

# 2. 删除选中的图片引用文本
agent-browser press "Backspace"

# 3. 将真实图片复制到剪贴板并粘贴
osascript -e 'set the clipboard to (read (POSIX file "{图片路径}") as «class PNGf»)'
agent-browser press "Meta+v"
```

重复以上步骤处理所有图片引用。

```

### references/X推文.md

```markdown
## 发布推文 workflow

1. 打开 X 发布页面：`agent-browser --auto-connect open "https://x.com/compose/post"`
2. 查看交互：`agent-browser snapshot -i`
3. 输入推文内容：`agent-browser fill @e6 "{推文内容}"`
4. （可选）上传图片：点击 @e9 "添加照片或视频"，或使用 `agent-browser upload @e10 "{图片路径}"`
5. 等待上传完成：`agent-browser wait 2000`
6. 查看当前状态：`agent-browser snapshot -i`
7. 保存草稿：`agent-browser click @e4` （草稿按钮）
8. 提示用户手动确认发布，不自动点击"发帖"按钮

## 元素参考

| 元素 | 功能 |
|------|------|
| @e4 | 草稿 |
| @e6 | 帖子文本输入框 |
| @e9 | 添加照片或视频 |
| @e10 | 文件上传 |
| @e11 | 添加 GIF |
| @e19 | 发帖按钮（禁止自动点击） |

## 注意事项

- 推文字数限制：普通用户**280 字符**，Premium 用户更多
- 图片支持格式：JPG、PNG、GIF，最多 4 张图片
- 添加话题标签：直接在推文内容中加入 `#话题`

```

### references/微博.md

```markdown
## 发布微博 workflow

1. 打开微博主页：`agent-browser --auto-connect open "https://weibo.com"`
2. 查看交互元素：`agent-browser snapshot -i`
3. 点击输入框（可选）：`agent-browser click @e{输入框ref}`
4. 填写微博内容：`agent-browser fill @e{输入框ref} "{微博内容}"`
5. （可选）上传图片：`agent-browser upload "input[type='file']" "{图片路径}"`
6. （可选）添加话题：在内容中直接输入 `#话题#` 格式（前后都需要 # 号）
7. 查看当前状态：`agent-browser snapshot -i`
8. 提示用户手动点击"发送"按钮确认发布，不自动点击

## 元素参考

| 元素 | 功能 | 说明 |
|------|------|------|
| @e36 | 微博内容输入框 | "有什么新鲜事想分享给大家？" |
| @e37/e38 | 发送按钮 | 输入内容后会被激活 |
| input[type='file'] | 文件上传元素 | 用于上传图片和视频 |

## 注意事项

- **微博字数限制**：普通用户 140 字，会员用户 2000 字
- **图片支持格式**：JPG、PNG、GIF、HEIF、HEIC，最多 9 张图片
- **视频支持格式**：MP4、M4V、MKV、FLV
- **话题标签格式**：`#话题内容#` （前后都需要 # 号）
- **元素 ref 变化**：每次操作后用 `agent-browser snapshot -i` 重新确认元素编号
- **无草稿功能**：微博的简单发布框没有保存草稿功能，只能通过不点击发送按钮来保留内容

## 常见问题

1. **元素 ref 变化**：每次操作后用 `agent-browser snapshot -i` 重新确认元素编号
2. **上传失败**：检查图片格式和大小，单张图片不超过 5MB
3. **内容被限制**：微博有敏感词过滤，发布前建议用户自行检查
4. **图片上传后出现 Choose File 按钮**：这是正常现象，表示文件上传功能已被触发

```

### references/微信公众号文章.md

```markdown
## 发布微信公众号文章 workflow

1. 打开公众号后台：`agent-browser --auto-connect open "https://mp.weixin.qq.com/"`
2. 等待加载：`agent-browser --auto-connect wait --load networkidle`
3. 点击"文章"新建：`agent-browser --auto-connect eval "document.querySelector('.new-creation__menu-title').click()"`
4. 等待编辑器加载：`agent-browser --auto-connect wait --load networkidle`
5. 填写标题：`agent-browser --auto-connect fill @e4 "{标题}"`
6. 点击作者框并选择默认作者：`agent-browser --auto-connect click @e5`，然后 `agent-browser --auto-connect find text "{作者名}" click`
7. 点击正文编辑区：`agent-browser --auto-connect click "#ueditor_0"`
8. 输入正文内容：`agent-browser --auto-connect keyboard type "{正文内容}"`（分段用 `agent-browser --auto-connect press "Enter"` 换行）
9. 查看交互：`agent-browser --auto-connect snapshot`
10. 添加封面（hover 触发菜单）：`agent-browser --auto-connect find text "拖拽或选择封面" hover`
11. 点击"从图片库选择"：`agent-browser --auto-connect eval "document.querySelector('#js_cover_null .js_imagedialog').click()"`
12. 上传封面图片：`agent-browser --auto-connect upload "input[type=file][accept*='image/bmp']" "{图片路径}"`
13. 等待上传：`agent-browser --auto-connect wait 2000`
14. 点击"下一步"：`agent-browser --auto-connect click @e26`
15. 点击"确认"完成裁剪：`agent-browser --auto-connect click @e21`
16. 声明原创：`agent-browser --auto-connect find text "未声明" click`，协议已勾选则直接 `agent-browser --auto-connect click @e24`
17. 保存草稿：`agent-browser --auto-connect click @e14`（"保存为草稿"按钮）
18. 提示用户在公众号后台确认后手动发布，不自动点击"发表"按钮

## 元素参考

| 元素 | 功能 |
|------|------|
| `.new-creation__menu-title` | 新建文章入口 |
| `@e4` | 标题输入框 |
| `@e5` | 作者输入框 |
| `#ueditor_0` | 正文编辑区 |
| `#js_cover_null .js_imagedialog` | 封面"从图片库选择"按钮 |
| `input[type=file][accept*='image/bmp']` | 图片库上传 file input |
| `@e12` / "发表" | 发表按钮（禁止自动点击） |
| `@e14` / "保存为草稿" | 保存草稿按钮 |

## 注意事项

- 正文编辑器是 UEditor，不是 ProseMirror，需用 `keyboard type` 输入，不能用 `fill`
- 封面上传需先 hover 到封面区域触发菜单，再选择"从图片库选择"
- 图片库弹窗有两个 `input[type=file]`，封面上传用 `accept*='image/bmp'` 的那个
- 原创声明弹窗中协议默认已勾选，直接点确定即可
- 作者框点击后会出现"最近填写"下拉，直接点击选项即可
- 仅保存草稿，由用户手动确认发布

```

### references/掘金文章.md

```markdown
## 发布掘金文章 workflow

1. 打开掘金新建草稿页：`agent-browser --auto-connect open "https://juejin.cn/editor/drafts/new?v=2"`
2. 等待页面加载：`agent-browser --auto-connect wait --load networkidle`
3. 查看交互元素：`agent-browser --auto-connect snapshot -i`
4. 填写标题：`agent-browser --auto-connect fill @e1 "{标题}"`
5. 重新查看交互元素：`agent-browser --auto-connect snapshot -i`
6. 输入正文（CodeMirror 编辑器）：`agent-browser --auto-connect fill ".CodeMirror textarea" "{正文内容}"`
7. 输入换行触发编辑器状态同步：`agent-browser --auto-connect press Enter`
8. 等待自动保存：`agent-browser --auto-connect wait 2000`
9. 查看当前状态：`agent-browser --auto-connect snapshot`
10. 确认页面出现“保存成功”，并提示用户草稿已保存
11. 禁止自动点击 `发布` 按钮，由用户手动确认发布

## 元素参考

| 元素 | 功能 | 说明 |
|------|------|------|
| `@e1` | 标题输入框 | placeholder 为“输入文章标题...” |
| `.CodeMirror textarea` | 正文编辑输入框 | 掘金编辑器底层 textarea，适合用 `fill` 写入长文本 |
| `发布` 按钮 | 最终发布 | 仅允许用户手动点击 |

## 注意事项

- 该页面正文区在 `snapshot -i` 中可能出现重复 `textbox` ref，优先用 `.CodeMirror textarea` 选择器
- 每次页面状态变化后都要重新执行 `agent-browser --auto-connect snapshot -i`，避免 ref 失效
- 默认行为是自动保存草稿，不执行发布动作

```

### references/LinuxDo发帖.md

```markdown
## 发布 Linux.do 帖子 workflow

1. 打开 Linux.do 首页：`agent-browser --auto-connect open "https://linux.do/"`
2. 查看交互元素：`agent-browser --auto-connect snapshot -i`
3. 点击 `新建话题` 按钮进入编辑器（ref 以 snapshot 为准）
4. 再次查看交互元素：`agent-browser --auto-connect snapshot -i`
5. 填写标题：`agent-browser --auto-connect fill @标题输入框 "{标题}"`
6. 选择类别（必选）：
   `agent-browser --auto-connect click @类别下拉框`
   `agent-browser --auto-connect snapshot -i`
   `agent-browser --auto-connect click @目标类别选项`
7. 添加标签（建议至少 1 个）：
   `agent-browser --auto-connect click @标签下拉框`
   `agent-browser --auto-connect snapshot -i`
   `agent-browser --auto-connect fill @标签搜索框 "{标签1}"`
   `agent-browser --auto-connect press Enter`
8. 多标签时，重复第 7 步（每个标签输入后回车确认）
9. 输入正文：`agent-browser --auto-connect fill @正文输入框 "{内容}"`
10. 查看当前状态：`agent-browser --auto-connect snapshot -i`
11. 仅保存草稿或停留编辑页，不自动点击 `创建话题`：
    - 可选：点击 `保存并关闭`（保存草稿）
    - 或保持页面停留，提示用户手动确认并点击 `创建话题`

## 元素参考（示例，实际以 snapshot 为准）

| 元素 | 功能 | 说明 |
|------|------|------|
| `textbox "输入标题，或在此处粘贴链接"` | 标题输入框 | 发帖标题 |
| `listbox "筛选条件：xxx"` | 类别下拉 | 必须选择一个有效类别 |
| `menuitemradio "开发调优/资源荟萃/..."` | 类别选项 | 点击具体类别 |
| `listbox "至少选择 1 个标签…"` | 标签入口 | 打开标签选择 |
| `searchbox "搜索…"` | 标签搜索框 | 输入标签名后回车 |
| `textbox "在此处输入..."` | 正文输入框 | Markdown 编辑区域 |
| `button "保存并关闭"` | 草稿按钮 | 安全结束，避免误发布 |
| `button "创建话题"` | 发布按钮 | 禁止自动点击 |

## 注意事项

- Linux.do 发帖通常要求先选类别，部分类别要求至少 1 个标签
- 类别/标签是动态列表，必须在展开后重新 `snapshot -i` 获取最新 ref
- 标签推荐做法：输入关键词 -> 回车确认；如果出现候选项，也可以直接点击候选项
- 遇到 Cloudflare `Just a moment...` 页面时，等待或改为从首页进入后再点 `新建话题`
- 严格遵守规则：最终只到草稿或待发布状态，不自动点击 `创建话题`

```



---

## Skill Companion Files

> Additional files collected from the skill directory layout.

### references/知乎想法.md

```markdown
## 发布知乎想法 workflow

1. 打开知乎首页：`agent-browser --auto-connect open "https://www.zhihu.com/"`
2. 查看交互元素：`agent-browser snapshot -i`
3. 点击"发想法"按钮：`agent-browser click @e25`（ref可能变化，需要从snapshot确认）
4. 查看发布界面：`agent-browser snapshot -i`
5. 填写标题：`agent-browser fill @e20 "{标题}"`
6. 输入想法内容：`agent-browser type ".public-DraftEditor-content" "{内容}"`
7. （可选）上传图片：点击工具栏图片按钮或使用剪贴板粘贴
   ```bash
   # 方法：将图片复制到剪贴板后粘贴
   osascript -e 'set the clipboard to (read (POSIX file "{图片路径}") as «class PNGf»)'
   agent-browser click ".public-DraftEditor-content"
   agent-browser press "Meta+v"
   ```
8. 查看当前状态：`agent-browser snapshot -i`
9. 关闭发布界面并自动保存草稿：`agent-browser press "Escape"`
10. 提示用户手动打开草稿箱确认并发布，不自动点击"发布"按钮

## 元素参考

| 元素 | 功能 | 说明 |
|------|------|------|
| @e25 | "发想法"按钮 | 首页上的按钮，ref可能变化 |
| @e20 | 标题输入框 | textarea，placeholder="标题" |
| .public-DraftEditor-content | 内容编辑区 | contenteditable div，使用Draft.js编辑器 |
| @e27 | 发布按钮 | 输入内容后从disabled变为enabled |

## 注意事项

- 标题是必填的，需要在发布前填写
- 内容编辑区使用Draft.js编辑器，是一个contenteditable的div
- 按Escape键会关闭发布界面，内容会自动保存到草稿箱
- 草稿可以在"草稿箱"链接中查看和继续编辑
- 图片可以通过剪贴板粘贴的方式上传
- 元素ref会随页面状态变化，每步操作后建议使用`agent-browser snapshot -i`确认

## 登录问题

如果无法直接使用agent-browser登录知乎，使用以下方法：

```bash
# 1. 启动Chrome调试模式
open "/Applications/Google Chrome for Testing.app" --args --remote-debugging-port=9222

# 2. 获取WebSocket地址
sleep 2 && curl -s http://localhost:9222/json/version

# 3. 连接到浏览器
agent-browser connect "ws://localhost:9222/devtools/browser/xxx"

# 4. 手动登录知乎后保存状态
agent-browser state save ~/my-state.json
```

## 草稿管理

- 按Escape键关闭发布界面后，内容会自动保存为草稿
- 可以通过首页右侧的"草稿箱"链接访问所有草稿
- 草稿可以继续编辑或直接发布

```