myvibe-publish

MyVibe Publish

Web コンテンツ（HTML ファイル、ZIP アーカイブ、またはディレクトリ）を MyVibe に公開します。

前提条件

• Node.js 18 以降
• このスキルでスクリプトを実行するには、ネットワークアクセスが必要です。ネットワーク権限を有効にするため、Bash コマンドは常に sandbox_permissions=require_escalated を指定して実行してください。
• デプロイとスクリーンショットの生成には数分かかることがあります。公開コマンドには、10 分（600000ms）のタイムアウトを指定してください。

使い方

/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

オプション

オプション	エイリアス	説明
--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	公開設定: public または private（デフォルト: public）
--did <did>		バージョン更新用の Vibe DID（自動検出より優先）
--new		公開履歴を無視して、新しい Vibe を必ず作成

事前承認済みの認証情報

ユーザーのメッセージにアクセス認証情報（blocklet- で始まる文字列）が含まれている場合は、公開する前に保存してください。

node {skill_path}/scripts/save-token.mjs --token "<credential>" --hub <hub-url>

--hub パラメーターには、認証情報が属する MyVibe ハブを指定します。公開先のハブと一致するよう、必ず --hub を明示的に指定してください。ユーザーが公開コマンドまたはメッセージ内でカスタムハブ（--hub）を指定した場合は、ここでも同じ URL を使用してください。デフォルト値に依存しないでください。

これにより、認証情報は ~/.myvibe/ に保存され、以降の公開で自動的に使用されます。ブラウザー認証は実行されません。

ユーザーのメッセージに認証情報が含まれている場合は、すでに保存済みの認証情報があっても、必ずこの手順で抽出して保存してください。

ワークフローの概要

1. プロジェクトの種類を検出 → ビルドが不要な場合は、バックグラウンドでスクリーンショットの取得を開始
2. ビルド（必要な場合）→ 完了後、バックグラウンドでスクリーンショットの取得を開始
3. メタデータの分析 → タイトル、説明、タグを抽出
4. 公開の確認 → メタデータを表示し、ユーザーの確認を取得
5. 公開の実行 → スクリプトがスクリーンショットの結果を自動的に読み込み
6. 結果の返却 → 公開 URL を表示

最初のツール呼び出し — 依存関係の確認と情報の収集を並行して行います:

• Bash: test -d {skill_path}/scripts/node_modules || npm install --prefix {skill_path}/scripts
• 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}

---

ステップ 1：プロジェクトの種類を判定する

確認項目	プロジェクトの種類	次のステップ
HTML／ZIP を指定した --file	単一ファイル	→ スクリーンショットの開始後、ステップ 3 へ
index.html を含む dist/、build/、または out/ がある	ビルド済み	→ ステップ 2（再ビルドを確認）
ビルドスクリプトを含む package.json があり、出力がない	ビルド可能	→ ステップ 2（先にビルド）
複数の package.json またはワークスペース設定がある	モノレポ	→ ステップ 2（アプリを選択）
ルートに index.html があり、package.json がない	静的	→ スクリーンショットの開始後、ステップ 3 へ

ビルド不要なプロジェクトのスクリーンショットを開始する（run_in_background: true）：

ディレクトリをソースにする場合（--dir）：

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

単一ファイルをソースにする場合（--file）：

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

重要：ソースが単一の HTML ファイルの場合は --file を、ディレクトリの場合は --dir を使用してください。このフラグは公開設定の source.type と一致させる必要があります。これにより、両方のスクリプトでスクリーンショット結果ファイルのハッシュが同じように計算されます。

スクリーンショットのバックグラウンドタスクを開始した後、続行する前に TaskOutput（block: false を指定）を使ってタスクの出力を確認してください。出力に「agent-browser is not installed」または「Chromium is not installed」が含まれている場合：

1. agent-browser をインストールします：npm install -g agent-browser && agent-browser install
2. スクリーンショットコマンドを再実行します（上記と同じコマンドを run_in_background: true で実行）
3. TaskOutput（block: false）でもう一度確認し、実行中であることを確認します

これにより、メタデータの分析を進めている間に、スクリーンショットをバックグラウンドで正常に完了できます。

---

ステップ 2：ビルドする（必要な場合）

ロックファイルからパッケージマネージャーを判定し、package.json のスクリプトからビルドコマンドを判定します。

AskUserQuestion を使って確認します：

• ビルド済み：「再ビルドしますか、それとも既存の出力を使いますか？」
• ビルド可能：「公開前にビルドしますか？」
• モノレポ：「どのアプリを公開しますか？」

ビルド完了後、バックグラウンドでスクリーンショットを開始します（ステップ 1 と同じ確認を行います：TaskOutput に block: false を指定して agent-browser が利用可能か確認し、必要であればインストールしてから再試行）。その後、ステップ 3 に進みます。

---

ステップ 3：メタデータの分析

タイトルを生成する

MyVibe はタイトルからページ URL を生成します（例：「Interactive Solar System」→ interactive-solar-system）。そのため、タイトルは内容が伝わる具体的なものにする必要があります。

ステップ 1 - タイトル候補を抽出する：

• <title> タグの内容
• og:title メタの内容
• package.json の name フィールド
• 最初の <h1> の内容

ステップ 2 - 評価して生成する： 抽出したタイトルが一般的すぎる、または意味が不明確な場合（例：「Document」、「Untitled」、「index」、「app」、「React App」、「Vite App」、1 文字のみ、または「my-app」のようなパッケージ名形式）、次の情報をもとに、より適切なタイトルを生成します：

• プロジェクトが実際に何をするのか（ソースコード、README、会話のコンテキストから判断）
• ページの視覚的な内容と目的

タイトルの要件：

• 簡潔で内容が伝わる 2～6 語
• 技術ではなく、内容や目的を説明する（例：「Three.js Demo」ではなく「Interactive Solar System」）
• 意味を伝えるために不可欠な場合を除き、「app」、「demo」、「project」、「page」のような不要な語を入れない
• 英語の単語を使い、適切な大文字表記（タイトルケース）にする
• ユーザーが --title を明示的に指定した場合は、常にそのまま使用する

説明を生成する（50～150 語、ストーリー形式）

次の内容を取り上げます：理由（動機）→ 内容（機能）→ 経過（任意）

情報源：会話履歴、README.md、ソースコード、package.json、git log

ガイドライン：

• 自然で会話的なトーンにする
• 技術仕様ではなく、価値と背景に焦点を当てる
• 「React で構築したウェブアプリ」のような一般的な説明は避ける

githubRepo を抽出する

git remote または package.json の repository フィールドから取得します。SSH 形式の場合は HTTPS 形式に変換します。

タグの照合

タグを取得します：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	プロジェクトから推測します（ゲームライブラリ → ゲーム、チャート → 可視化）

---

ステップ 4：公開を確認する

メタデータを表示し、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: [...]

選択肢：「公開」／「詳細を編集」

---

ステップ 5：公開を実行する

公開スクリプトはスクリーンショットの結果ファイルを自動的に読み込みます。公開を直接実行します：

標準入力経由で設定を渡します：

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 から自動的に読み込まれます
• スクリーンショットの結果ファイルは公開後に削除されます

アクション失敗後の再試行

公開スクリプトの出力に retryHint: skip-upload が含まれている場合、または「Upload was successful. DID: ...」と表示されている場合は、公開コマンド全体を再実行しないでください。代わりに、出力にある DID と skipUpload を使用して、公開アクションのみを再試行します：

node {skill_path}/scripts/publish.mjs --config-stdin <<'EOF'
{
  "source": { "type": "dir", "path": "./dist", "skipUpload": true, "did": "<DID from error output>" },
  "hub": "https://www.myvibe.so",
  "metadata": {
    "title": "My App",
    "description": "Story description here",
    "visibility": "public"
  }
}
EOF

アップロード済みのコンテンツを再利用し、公開アクションのみを再試行するため、レコードの重複を防げます。

---

ステップ 6：結果を返す

公開スクリプトの実行後、スクリプトの出力に以下のメッセージがあるか確認します：

成功メッセージ

応答には必ず Vibe の URL と探索用プロンプトを含めてください：

Published successfully!
🔗 [URL]

🌐 Discover more creative Vibes → {hub}/explore

探索用 URL には同じ {hub} のベース URL（デフォルトは https://www.myvibe.so）を使用します。ユーザーがカスタムの --hub を指定した場合は、探索リンクにもそのハブを使用します。

アップグレードの案内（重要）

バージョン履歴を有効にせず既存の Vibe を更新すると、スクリプトはアップグレードの案内を出力します：

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

スクリプトの出力にこの案内が含まれている場合は、必ずこのアップグレード情報をユーザーへの応答に含めてください。 これにより、無料プランのユーザーがバージョン履歴機能を知ることができます。

---

エラー処理

エラー	対応
依存関係が不足している	scripts ディレクトリで npm install を実行します
401/403 認証エラー	トークンは自動的にクリアされます。再実行して認証してください
ビルド失敗	エラーを分析し、修正を提案するか、ソースをそのまま公開します
スクリーンショットの取得に失敗	coverImage を省略し、画像なしで続行します
agent-browser が見つからない	npm install -g agent-browser && agent-browser install を実行します
スクリプトの実行に失敗（ネットワーク／サンドボックス）	ネットワーク権限が有効になっているか確認します。sandbox_permissions=require_escalated を追加して再試行します
公開アクションに失敗（アップロードは成功）	エラー出力にある DID と skipUpload: true を使用して、アクションのみを再試行します
クラウドエージェントで認証がタイムアウト	https://www.myvibe.so/openclaw から公開プロンプトを取得するようユーザーに依頼します
プライベートモードは Creator および Studio ユーザーのみ利用可能	以下の「プライベートモードのエラー処理」を参照してください

プライベートモードのエラー処理

visibility: private での公開時に「Private mode is only available for Creator and Studio users」というエラーが発生した場合は、AskUserQuestion を使ってユーザーに選択肢を提示します：

質問：「プライベート公開には Creator または Studio のサブスクリプションが必要です。どのように進めますか？」

選択肢	ラベル	説明
1	公開として公開	Vibe は全員に表示されます。アップグレード後に設定を変更できます。
2	アップグレードの選択肢を表示	料金ページを開き、プライベート公開が利用できるサブスクリプションプランを確認します。

選択に応じた対応：

• 選択肢 1：visibility: "public" で公開を再実行し、Vibe が公開状態になったことをユーザーに伝えます
• 選択肢 2：料金ページの URL {hub}/pricing を表示し、公開フローを終了します

注意事項

• タイトルと説明にふさわしい内容を必ず分析し、ディレクトリ名は使用しないでください
• 公開前にユーザーの確認を取ってください
• デフォルトのハブ：https://www.myvibe.so/
• タグは公開のたびに API から最新のものを取得します
• 自動バージョン更新のため、公開履歴は ~/.myvibe/published.yaml に保存されます
• 更新ではなく新しい Vibe を作成するには --new を使用します