preview-sync

编程

自动将文件同步到 GitHub 仓库,以便在 GitHub Pages 上进行预览。当代理生成需要通过网页界面预览的文件(markdown、HTML、图片)时使用。在请求如"同步此文件以预览"、"更新预览"、"上传到预览站点",或代理完成撰写应通过网页访问的文档/报告/文章时触发。

热度1000Star2Update2026-02-21
暂无实践

SKILL.md

前往 Source
namedescription
preview-syncAutomatically sync files to GitHub repository for preview on GitHub Pages. Use when Agent generates files (markdown, HTML, images) that need to be previewed on a web interface. Triggers on requests like "sync this file to preview", "update preview", "upload to preview site", or when Agent completes writing documents/reports/articles that should be accessible via web.

Preview Sync Skill

Sync local files to GitHub repository for automatic preview deployment on GitHub Pages.

Quick Start

preview-sync /path/to/file.md [agent-name]

Example:

preview-sync /tmp/report.md kira

This will:

  1. Copy file to project directory
  2. Commit and push to GitHub
  3. Trigger GitHub Actions deployment
  4. File appears at preview site in 1-2 minutes

Configuration

Skill reads configuration from ~/.openclaw/openclaw.json:

{
  "skills": {
    "entries": {
      "preview-sync": {
        "enabled": true,
        "previewRepo": "username/repo-name",
        "agentName": "default-agent-name"
      }
    }
  }
}

Fields:

  • previewRepo: GitHub repository (format: username/repo)
  • agentName: Default agent name (can be overridden via command line)

Project Structure

Files are organized by agent:

project-root/public/agents/
├── kira/     # Kira's files
├── ha/       # Ha's files
└── hen/      # Hen's files

Adding a new agent:

mkdir project-root/public/agents/new-agent
preview-sync /path/to/file.md new-agent

No code changes needed.

Supported File Types

  • Markdown (.md): Rendered with GFM syntax, code highlighting
  • HTML (.html): Rendered in iframe sandbox
  • Images (.png, .jpg, .gif, .svg, .webp): Direct display
  • Code files (.js, .py, .java): Plain text display

Workflow

  1. Agent generates a file (document, report, article)
  2. Call preview-sync with file path and agent name
  3. Script copies file to project directory
  4. Git commit and push to GitHub
  5. GitHub Actions builds and deploys
  6. File accessible on preview site in 1-2 minutes

Script Location

The main script is at scripts/preview-sync.sh.

For installation, see install.sh.

For script details, see scripts/preview-sync.sh.

常见问题

preview-sync 是什么?
preview-sync 是一个 AI Agent Skill(智能体技能)。自动将文件同步到 GitHub 仓库,以便在 GitHub Pages 上进行预览。当代理生成需要通过网页界面预览的文件(markdown、HTML、图片)时使用。在请求如"同步此文件以预览"、"更新预览"、"上传到预览站点",或代理完成撰写应通过网页访问的文档/报告/文章时触发。
preview-sync 怎么用?
你可以在 Skill Hub 中国下载 preview-sync 的 SKILL.md 文件,放入你的项目目录中。AI Agent(如 Claude Code)会自动识别并加载该 Skill,按照其中定义的规则和流程来辅助你完成任务。目前已有 1 篇实践案例可供参考。
preview-sync 有哪些实践案例?
目前 Skill Hub 中国收录了 1 篇 preview-sync 的实践案例,涵盖真实项目中的使用场景、操作步骤和踩坑记录。你可以在本页面的「热门实践」区域查看完整列表。
preview-sync 和 skill-creator 有什么区别?
preview-sync 和 skill-creator 都属于「编程」类别的 AI Skill。preview-sync 主要用于自动将文件同步到 GitHub 仓库,以便在 GitHub Pages 上进行预览。当代理生成需要通过网页界面预览的文件。skill-creator 则侧重于指导用户如何创建、组织和打包高效的 Skills。你可以根据具体场景选择最合适的 Skill。