myvibe-publish

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

MyVibe Publish

MyVibe 发布

Publish web content (HTML file, ZIP archive, or directory) to MyVibe.

将网页内容（HTML文件、ZIP压缩包或目录）发布到MyVibe。

Usage

使用方法

bash

/myvibe:myvibe-publish --file ./dist.zip      # Publish ZIP
/myvibe:myvibe-publish --file ./index.html    # Publish HTML
/myvibe:myvibe-publish --dir ./dist           # Publish directory
/myvibe:myvibe-publish --url https://example.com/app  # Import from URL
/myvibe:myvibe-publish --dir ./dist --new     # Force new Vibe
/myvibe:myvibe-publish --dir ./dist --did z2qaXXX    # Update specific Vibe

bash

/myvibe:myvibe-publish --file ./dist.zip      # 发布ZIP包
/myvibe:myvibe-publish --file ./index.html    # 发布HTML文件
/myvibe:myvibe-publish --dir ./dist           # 发布目录
/myvibe:myvibe-publish --url https://example.com/app  # 从URL导入发布
/myvibe:myvibe-publish --dir ./dist --new     # 强制创建新的Vibe
/myvibe:myvibe-publish --dir ./dist --did z2qaXXX    # 更新指定Vibe

Options

选项

Option	Alias	Description
`--file <path>`	`-f`	Path to HTML file or ZIP archive
`--dir <path>`	`-d`	Directory to compress and publish
`--url <url>`	`-u`	URL to import and publish
`--hub <url>`	`-h`	MyVibe URL (default: https://www.myvibe.so/)
`--title <title>`	`-t`	Project title
`--desc <desc>`		Project description
`--visibility <vis>`	`-v`	Visibility: public or private (default: public)
`--did <did>`		Vibe DID for version update (overrides auto-detection)
`--new`		Force create new Vibe, ignore publish history

选项	别名	描述
`--file <path>`	`-f`	HTML文件或ZIP压缩包的路径
`--dir <path>`	`-d`	待压缩并发布的目录
`--url <url>`	`-u`	待导入并发布的URL
`--hub <url>`	`-h`	MyVibe的URL（默认值：https://www.myvibe.so/）
`--title <title>`	`-t`	项目标题
`--desc <desc>`		项目描述
`--visibility <vis>`	`-v`	可见性：公开或私有（默认值：公开）
`--did <did>`		用于版本更新的Vibe DID（覆盖自动检测）
`--new`		强制创建新的Vibe，忽略发布历史

Workflow Overview

工作流程概述

Detect Project Type → if no build needed, start screenshot in background
Build (if needed) → then start screenshot in background
Metadata Analysis → extract title, description, tags
Confirm Publish → show metadata, get user confirmation
Execute Publish → script auto-reads screenshot result
Return Result → show publish URL

First tool call - execute in parallel:

```
Read
```
: source file or main files in directory

Bash

git remote get-url origin 2>/dev/null || echo "Not a git repo"

Bash

node {skill_path}/scripts/utils/fetch-tags.mjs --hub {hub}

检测项目类型 → 如果无需构建，在后台启动截图任务
构建（如有需要）→ 之后在后台启动截图任务
元数据分析 → 提取标题、描述、标签
确认发布 → 展示元数据，获取用户确认
执行发布 → 脚本自动读取截图结果
返回结果 → 展示发布URL

首次工具调用 - 并行执行：

```
Read
```
: 源文件或目录中的主文件

Bash

git remote get-url origin 2>/dev/null || echo "Not a git repo"

Bash

node {skill_path}/scripts/utils/fetch-tags.mjs --hub {hub}

Step 1: Detect Project Type

步骤1：检测项目类型

Check	Project Type	Next Step
`--file` with HTML/ZIP	Single File	→ Start screenshot, then Step 3
Has `dist/` , `build/` , or `out/` with index.html	Pre-built	→ Step 2 (confirm rebuild)
Has `package.json` with build script, no output	Buildable	→ Step 2 (build first)
Multiple `package.json` or workspace config	Monorepo	→ Step 2 (select app)
Has `index.html` at root, no `package.json`	Static	→ Start screenshot, then Step 3

Start screenshot for non-build projects (run_in_background: true):

For directory source (

--dir

bash

node {skill_path}/scripts/utils/generate-screenshot.mjs --dir {publish_target} --hub {hub}

For single file source (

--file

bash

node {skill_path}/scripts/utils/generate-screenshot.mjs --file {publish_target} --hub {hub}

IMPORTANT: Use

--file

when the source is a single HTML file, and

--dir

when it is a directory. The flag must match the

source.type

in the publish config so that both scripts calculate the same hash for the screenshot result file.

检查项	项目类型	下一步
带HTML/ZIP的 `--file` 参数	单个文件	→ 启动截图，然后进入步骤3
存在包含index.html的 `dist/` 、 `build/` 或 `out/` 目录	预构建完成	→ 步骤2（确认是否重新构建）
存在带构建脚本的 `package.json` ，但无输出目录	可构建项目	→ 步骤2（先执行构建）
存在多个 `package.json` 或工作区配置	单体仓库（Monorepo）	→ 步骤2（选择要发布的应用）
根目录存在 `index.html` ，但无 `package.json`	静态项目	→ 启动截图，然后进入步骤3

为非构建项目启动截图（run_in_background: true）：

对于目录源（

--dir

）：

bash

node {skill_path}/scripts/utils/generate-screenshot.mjs --dir {publish_target} --hub {hub}

对于单个文件源（

--file

）：

bash

node {skill_path}/scripts/utils/generate-screenshot.mjs --file {publish_target} --hub {hub}

重要提示：当源为单个HTML文件时使用

--file

，当源为目录时使用

--dir

。该标志必须与发布配置中的

source.type

匹配，这样两个脚本才能为截图结果文件计算相同的哈希值。

Step 2: Build (if needed)

步骤2：构建（如有需要）

Detect package manager from lock files, build command from package.json scripts.

Use

AskUserQuestion

to confirm:

Pre-built: "Rebuild or use existing output?"
Buildable: "Build before publishing?"
Monorepo: "Which app to publish?"

After build completes, start screenshot in background, then proceed to Step 3.

从锁文件检测包管理器，从package.json脚本中获取构建命令。

使用

AskUserQuestion

确认：

预构建完成："重新构建还是使用现有输出？"
可构建项目："发布前是否执行构建？"
单体仓库："要发布哪个应用？"

构建完成后，在后台启动截图任务，然后进入步骤3。

Step 3: Metadata Analysis

步骤3：元数据分析

Extract title

提取标题

Priority:

<title>

→

og:title

→ package.json name → first

<h1>

优先级：

<title>

→

og:title

→ package.json名称 → 第一个

<h1>

标签

Generate description (50-150 words, story-style)

生成描述（50-150字，故事风格）

Cover: Why (motivation) → What (functionality) → Journey (optional)

Sources: conversation history, README.md, source code, package.json, git log

Guidelines:

Natural, conversational tone
Focus on value and story, not technical specs
Avoid generic "A web app built with React"

涵盖：原因（动机）→ 内容（功能）→ 历程（可选）

来源：对话历史、README.md、源代码、package.json、git日志

指导原则：

自然、口语化的语气
聚焦价值和故事，而非技术规格
避免使用通用表述如"使用React构建的网页应用"

Extract githubRepo

提取githubRepo

From git remote or package.json repository field. Convert SSH to HTTPS format.

从git远程仓库或package.json的repository字段获取。将SSH格式转换为HTTPS格式。

Match tags

匹配标签

Fetch tags:

node {skill_path}/scripts/utils/fetch-tags.mjs --hub {hub}

Tag Type	Match Method
techStackTags	Match package.json dependencies against tag slug
platformTags	From conversation context (Claude Code, Cursor, etc.)
modelTags	From conversation context (Claude 3.5 Sonnet, GPT-4, etc.)
categoryTags	Infer from project (game libs → game, charts → viz)

获取标签：

node {skill_path}/scripts/utils/fetch-tags.mjs --hub {hub}

标签类型	匹配方式
techStackTags	将package.json中的依赖项与标签别名匹配
platformTags	来自对话上下文（如Claude Code、Cursor等）
modelTags	来自对话上下文（如Claude 3.5 Sonnet、GPT-4等）
categoryTags	从项目推断（如游戏库→游戏，图表→可视化）

Step 4: Confirm Publish

步骤4：确认发布

Display metadata and use

AskUserQuestion

Publishing to MyVibe:
──────────────────────
Title: [value]

Description:
[50-150 word story]

GitHub: [URL or "Not detected"]
Cover Image: [Will be included if ready]

Tags: Tech Stack: [...] | Platform: [...] | Category: [...] | Model: [...]

Options: "Publish" / "Edit details"

展示元数据并使用

AskUserQuestion

：

即将发布到MyVibe：
──────────────────────
标题: [值]

描述:
[50-150字的故事]

GitHub: [URL或"未检测到"]
封面图片: [准备就绪后将包含]

标签: 技术栈: [...] | 平台: [...] | 分类: [...] | 模型: [...]

选项："发布" / "编辑详情"

Step 5: Execute Publish

步骤5：执行发布

Check dependencies: If

scripts/node_modules

missing, run

npm install

first. No need to check screenshot background task result - the publish script automatically waits for and reads the screenshot result. Execute publish directly:

Pass config via stdin:

bash

node {skill_path}/scripts/publish.mjs --config-stdin <<'EOF'
{
  "source": { "type": "dir", "path": "./dist", "did": "z2qaXXXX" },
  "hub": "https://www.myvibe.so",
  "metadata": {
    "title": "My App",
    "description": "Story description here",
    "visibility": "public",
    "githubRepo": "https://github.com/user/repo",
    "platformTags": [1, 2],
    "techStackTags": [3, 4],
    "categoryTags": [5],
    "modelTags": [6]
  }
}
EOF

```
did
```
optional - for explicit version updates

coverImage

auto-read from

/tmp/myvibe-screenshot-{hash}.json

Screenshot result file cleaned up after publish

检查依赖：如果

scripts/node_modules

缺失，先在scripts目录中运行

npm install

。 无需等待截图后台任务结果 - 发布脚本会自动等待并读取截图结果。直接执行发布：

通过标准输入传递配置：

bash

node {skill_path}/scripts/publish.mjs --config-stdin <<'EOF'
{
  "source": { "type": "dir", "path": "./dist", "did": "z2qaXXXX" },
  "hub": "https://www.myvibe.so",
  "metadata": {
    "title": "My App",
    "description": "Story description here",
    "visibility": "public",
    "githubRepo": "https://github.com/user/repo",
    "platformTags": [1, 2],
    "techStackTags": [3, 4],
    "categoryTags": [5],
    "modelTags": [6]
  }
}
EOF

```
did
```
为可选参数 - 用于明确的版本更新

coverImage

自动从

/tmp/myvibe-screenshot-{hash}.json

读取

发布完成后会清理截图结果文件

Step 6: Return Result

步骤6：返回结果

After publish script completes, check the script output for these messages:

发布脚本完成后，检查脚本输出中的以下消息：

Success Message

成功消息

Always include the Vibe URL in your response:

Published successfully!
🔗 [URL]

响应中必须包含Vibe URL：

发布成功！
🔗 [URL]

Upgrade Prompt (Important)

升级提示（重要）

The script prints an upgrade prompt when updating an existing Vibe without version history enabled:

📦 Previous version overwritten. Want to keep version history?
   Upgrade to Creator → {hub}/pricing

You MUST include this upgrade information in your response to the user if the script output contains it. This helps free-tier users discover the version history feature.

当在未启用版本历史的情况下更新现有Vibe时，脚本会打印升级提示：

📦 已覆盖旧版本。是否要保留版本历史？
   升级到Creator版 → {hub}/pricing

如果脚本输出包含此提示，必须将该升级信息包含在给用户的响应中。 这有助于免费版用户发现版本历史功能。

Error Handling

错误处理

Error	Action
Dependencies missing	Run `npm install` in scripts directory
401/403 Auth error	Token auto-cleared, re-run to authorize
Build failed	Analyze error, offer fix, or publish source as-is
Screenshot failed	Skip coverImage, proceed without it
agent-browser missing	Run `npm install -g agent-browser && agent-browser install`
Private mode is only available for Creator and Studio users	See "Private Mode Error Handling" below

错误	操作
依赖缺失	在scripts目录中运行 `npm install`
401/403授权错误	自动清除令牌，重新运行以重新授权
构建失败	分析错误，提供修复方案，或直接发布源文件
截图失败	跳过coverImage，继续发布
agent-browser缺失	运行 `npm install -g agent-browser && agent-browser install`
私有模式仅对Creator和Studio用户可用	参见下方"私有模式错误处理"

Private Mode Error Handling

私有模式错误处理

When publishing with

visibility: private

fails with "Private mode is only available for Creator and Studio users", use

AskUserQuestion

to let the user choose:

Question: "Private publishing requires a Creator or Studio subscription. How would you like to proceed?"

Option	Label	Description
1	Publish as Public	Your Vibe will be visible to everyone. You can change this later after upgrading.
2	View Upgrade Options	Open the pricing page to explore subscription plans with private publishing.

Actions based on selection:

Option 1: Re-run publish with
```
visibility: "public"
```
, inform user the Vibe is now public
Option 2: Display the pricing URL
```
{hub}/pricing
```
and stop the publish flow

当使用

visibility: private

发布失败并提示"私有模式仅对Creator和Studio用户可用"时，使用

AskUserQuestion

让用户选择：

问题： "私有发布需要Creator或Studio订阅。您希望如何继续？"

选项	标签	描述
1	以公开模式发布	您的Vibe将对所有人可见。升级后您可以稍后更改此设置。
2	查看升级选项	打开定价页面查看支持私有发布的订阅方案。

根据选择执行操作：

选项1：使用
```
visibility: "public"
```
重新运行发布，告知用户Vibe现在为公开状态
选项2：显示定价URL
```
{hub}/pricing
```
并终止发布流程

Notes

注意事项

Always analyze content for meaningful title/description - never use directory names
Confirm with user before publishing
Default hub: https://www.myvibe.so/
Tags cached 7 days locally
Publish history in
```
~/.myvibe/published.yaml
```
for auto version updates
Use
```
--new
```
to force new Vibe instead of updating

始终分析内容以提取有意义的标题/描述 - 切勿使用目录名称
发布前需获得用户确认
默认hub：https://www.myvibe.so/
标签在本地缓存7天
发布历史存储在
```
~/.myvibe/published.yaml
```
中，用于自动版本更新
使用
```
--new
```
参数强制创建新的Vibe而非更新现有版本