--title </code></td><td><code>-t</code></td><td>Project title</td></tr><tr><td><code>--desc <desc></code></td><td></td><td>Project description</td></tr><tr><td><code>--visibility <vis></code></td><td><code>-v</code></td><td>Visibility: public or private (default: public)</td></tr><tr><td><code>--did <did></code></td><td></td><td>Vibe DID for version update (overrides auto-detection)</td></tr><tr><td><code>--new</code></td><td></td><td>Force create new Vibe, ignore publish history</td></tr></tbody></table><h2>Workflow Overview</h2><ol><li><strong>Detect Project Type</strong> → if no build needed, start screenshot in background</li><li><strong>Build</strong> (if needed) → then start screenshot in background</li><li><strong>Metadata Analysis</strong> → extract title, description, tags</li><li><strong>Confirm Publish</strong> → show metadata, get user confirmation</li><li><strong>Execute Publish</strong> → script auto-reads screenshot result</li><li><strong>Return Result</strong> → show publish URL</li></ol><p><strong>First tool call - execute in parallel:</strong></p><ul><li><code>Read</code>: source file or main files in directory</li><li><code>Bash</code>: <code>git remote get-url origin 2>/dev/null || echo "Not a git repo"</code></li><li><code>Bash</code>: <code>node {skill_path}/scripts/utils/fetch-tags.mjs --hub {hub}</code></li></ul><hr><h2>Step 1: Detect Project Type</h2><table><thead><tr><th>Check</th><th>Project Type</th><th>Next Step</th></tr></thead><tbody><tr><td>-------</td><td>-------------</td><td>-----------</td></tr><tr><td><code>--file</code> with HTML/ZIP</td><td><strong>Single File</strong></td><td>→ Start screenshot, then Step 3</td></tr><tr><td>Has <code>dist/</code>, <code>build/</code>, or <code>out/</code> with index.html</td><td><strong>Pre-built</strong></td><td>→ Step 2 (confirm rebuild)</td></tr><tr><td>Has <code>package.json</code> with build script, no output</td><td><strong>Buildable</strong></td><td>→ Step 2 (build first)</td></tr><tr><td>Multiple <code>package.json</code> or workspace config</td><td><strong>Monorepo</strong></td><td>→ Step 2 (select app)</td></tr><tr><td>Has <code>index.html</code> at root, no <code>package.json</code></td><td><strong>Static</strong></td><td>→ Start screenshot, then Step 3</td></tr></tbody></table><p><strong>Start screenshot for non-build projects</strong> (run_in_background: true):</p><p>For directory source (<code>--dir</code>):</p><pre><code>node {skill_path}/scripts/utils/generate-screenshot.mjs --dir {publish_target} --hub {hub}
</code></pre><p>For single file source (<code>--file</code>):</p><pre><code>node {skill_path}/scripts/utils/generate-screenshot.mjs --file {publish_target} --hub {hub}
</code></pre><p>IMPORTANT: Use <code>--file</code> when the source is a single HTML file, and <code>--dir</code> when it is a directory. The flag must match the <code>source.type</code> in the publish config so that both scripts calculate the same hash for the screenshot result file.</p><p><strong>After starting the screenshot background task</strong>, use <code>TaskOutput</code> (with <code>block: false</code>) to check the task output before proceeding. If the output contains "agent-browser is not installed" or "Chromium is not installed":</p><ol><li>Install agent-browser: <code>npm install -g agent-browser && agent-browser install</code></li><li>Re-run the screenshot command (same command as above, run_in_background: true)</li><li>Check again with <code>TaskOutput</code> (block: false) to confirm it's running</li></ol><p>This ensures the screenshot can complete successfully in the background while you continue with metadata analysis.</p><hr><h2>Step 2: Build (if needed)</h2><p>Detect package manager from lock files, build command from package.json scripts.</p><p>Use <code>AskUserQuestion</code> to confirm:</p><ul><li><strong>Pre-built</strong>: "Rebuild or use existing output?"</li><li><strong>Buildable</strong>: "Build before publishing?"</li><li><strong>Monorepo</strong>: "Which app to publish?"</li></ul><p>After build completes, start screenshot in background (same check as Step 1: use <code>TaskOutput</code> block: false to verify agent-browser is available, install if needed, then retry), then proceed to Step 3.</p><hr><h2>Step 3: Metadata Analysis</h2><h3>Extract title</h3><p>Priority: <code><title></code> → <code>og:title</code> → package.json name → first <code><h1></code></p><h3>Generate description (50-150 words, story-style)</h3><p>Cover: <strong>Why</strong> (motivation) → <strong>What</strong> (functionality) → <strong>Journey</strong> (optional)</p><p>Sources: conversation history, README.md, source code, package.json, git log</p><p>Guidelines:</p><ul><li>Natural, conversational tone</li><li>Focus on value and story, not technical specs</li><li>Avoid generic "A web app built with React"</li></ul><h3>Extract githubRepo</h3><p>From git remote or package.json repository field. Convert SSH to HTTPS format.</p><h3>Match tags</h3><p>Fetch tags: <code>node {skill_path}/scripts/utils/fetch-tags.mjs --hub {hub}</code></p><table><thead><tr><th>Tag Type</th><th>Match Method</th></tr></thead><tbody><tr><td>----------</td><td>--------------</td></tr><tr><td><strong>techStackTags</strong></td><td>Match package.json dependencies against tag slug</td></tr><tr><td><strong>platformTags</strong></td><td>From conversation context (Claude Code, Cursor, etc.)</td></tr><tr><td><strong>modelTags</strong></td><td>From conversation context (Claude 3.5 Sonnet, GPT-4, etc.)</td></tr><tr><td><strong>categoryTags</strong></td><td>Infer from project (game libs → game, charts → viz)</td></tr></tbody></table><hr><h2>Step 4: Confirm Publish</h2><p>Display metadata and use <code>AskUserQuestion</code>:</p><pre><code>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: [...]
</code></pre><p>Options: "Publish" / "Edit details"</p><hr><h2>Step 5: Execute Publish</h2><p><strong>Check dependencies</strong>: If <code>scripts/node_modules</code> missing, run <code>npm install</code> first.</p><p>The publish script automatically reads the screenshot result file. Execute publish directly:</p><p>Pass config via stdin:</p><pre><code>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
</code></pre><ul><li><code>did</code> optional - for explicit version updates</li><li><code>coverImage</code> auto-read from <code>/tmp/myvibe-screenshot-{hash}.json</code></li><li>Screenshot result file cleaned up after publish</li></ul><hr><h2>Step 6: Return Result</h2><p>After publish script completes, <strong>check the script output</strong> for these messages:</p><h3>Success Message</h3><p>Always include the Vibe URL in your response:</p><pre><code>Published successfully!
🔗 [URL]
</code></pre><h3>Upgrade Prompt (Important)</h3><p>The script prints an upgrade prompt when updating an existing Vibe without version history enabled:</p><pre><code>📦 Previous version overwritten. Want to keep version history?
Upgrade to Creator → {hub}/pricing
</code></pre><p><strong>You MUST include this upgrade information in your response to the user if the script output contains it.</strong> This helps free-tier users discover the version history feature.</p><hr><h2>Error Handling</h2><table><thead><tr><th>Error</th><th>Action</th></tr></thead><tbody><tr><td>-------</td><td>--------</td></tr><tr><td>Dependencies missing</td><td>Run <code>npm install</code> in scripts directory</td></tr><tr><td>401/403 Auth error</td><td>Token auto-cleared, re-run to authorize</td></tr><tr><td>Build failed</td><td>Analyze error, offer fix, or publish source as-is</td></tr><tr><td>Screenshot failed</td><td>Skip coverImage, proceed without it</td></tr><tr><td>agent-browser missing</td><td>Run <code>npm install -g agent-browser && agent-browser install</code></td></tr><tr><td>Script execution failed (network/sandbox)</td><td>Check if network permissions are enabled. Add <code>sandbox_permissions=require_escalated</code> and retry</td></tr><tr><td>Private mode is only available for Creator and Studio users</td><td>See "Private Mode Error Handling" below</td></tr></tbody></table><h3>Private Mode Error Handling</h3><p>When publishing with <code>visibility: private</code> fails with "Private mode is only available for Creator and Studio users", use <code>AskUserQuestion</code> to let the user choose:</p><p><strong>Question:</strong> "Private publishing requires a Creator or Studio subscription. How would you like to proceed?"</p><table><thead><tr><th>Option</th><th>Label</th><th>Description</th></tr></thead><tbody><tr><td>--------</td><td>-------</td><td>-------------</td></tr><tr><td>1</td><td>Publish as Public</td><td>Your Vibe will be visible to everyone. You can change this later after upgrading.</td></tr><tr><td>2</td><td>View Upgrade Options</td><td>Open the pricing page to explore subscription plans with private publishing.</td></tr></tbody></table><p><strong>Actions based on selection:</strong></p><ul><li><strong>Option 1</strong>: Re-run publish with <code>visibility: "public"</code>, inform user the Vibe is now public</li><li><strong>Option 2</strong>: Display the pricing URL <code>{hub}/pricing</code> and stop the publish flow</li></ul><h2>Notes</h2><ul><li>Always analyze content for meaningful title/description - never use directory names</li><li>Confirm with user before publishing</li><li>Default hub: https://www.myvibe.so/</li><li>Tags fetched fresh from API on each publish</li><li>Publish history in <code>~/.myvibe/published.yaml</code> for auto version updates</li><li>Use <code>--new</code> to force new Vibe instead of updating</li></ul></div>
</div>
</div>
<div id="tab-versions" class="detail-content">
<div class="detail-section">
<h2>版本历史</h2>
<p style="margin-bottom:12px;font-size:14px;color:#94a3b8;">共 1 个版本</p>
<ul class="version-list">
<li>
<div>
<span class="version-tag">v1.0.0</span>
<span style="font-size:11px;color:#5b6abf;margin-left:8px;background:#eef0ff;padding:1px 8px;border-radius:10px;">当前</span> </div>
<div style="font-size:12px;color:#94a3b8;">
2026-03-29 00:15 安全 安全 </div>
</li>
</ul>
</div>
</div>
<div id="tab-security" class="detail-content">
<div class="detail-section">
<h2>安全检测</h2>
<div class="sec-grid"> <div class="sec-card">
<h4>腾讯云安全 (Keen)</h4>
<div class="sec-status sec-safe">
安全，无风险 </div>
<a href="https://tix.qq.com/search/skill?keyword=f1ebfb6e9bb7e5deb98b61c4f982f26e" target="_blank">查看报告</a> </div>
<div class="sec-card">
<h4>腾讯云安全 (Sanbu)</h4>
<div class="sec-status sec-safe">
安全，无风险 </div>
<a href="https://static.cloudsec.tencent.com/html-report-v2/2026/05/25/395043_a8e2ef70593fd54acf80856715d22725.html?q-sign-algorithm=sha1&q-ak=AKID8JMG1bzBC1dz96qNhssfFftujT1NCoFi&q-sign-time=1781385353%3B1812921353&q-key-time=1781385353%3B1812921353&q-header-list=host&q-url-param-list=&q-signature=d3df9da5db019d84e9202fbb836ea86c6c8a4b3b" target="_blank">查看报告</a> </div>
</div>
</div>
</div>
<!-- Recommended Skills -->
<div style="margin-top:24px;">
<h2 style="font-size:18px;font-weight:600;margin-bottom:16px;">🔗 相关推荐</h2>
<div class="rec-grid">
<div class="rec-card">
<span class="badge-cat" style="margin-bottom:8px;display:inline-block;">content-creation</span>
<h3><a href="/s/ai-ppt-generator">Baidu Wenku AIPPT</a></h3>
<div class="rec-owner">ide-rea</div> <div class="rec-desc">使用百度文库 AI 智能生成 PPT，自动根据内容选择模板。</div>
<div class="rec-stats">
<span style="color:#f39c12;">★ 66</span>
<span style="color:#5b6abf;">📥 46,215</span>
</div>
</div>
<div class="rec-card">
<span class="badge-cat" style="margin-bottom:8px;display:inline-block;">content-creation</span>
<h3><a href="/s/admapix">AdMapix</a></h3>
<div class="rec-owner">fly0pants</div> <div class="rec-desc">广告情报与应用数据分析助手，支持搜索广告素材、分析应用排名、下载量、收入及市场洞察，用于广告素材和竞品分析。</div>
<div class="rec-stats">
<span style="color:#f39c12;">★ 295</span>
<span style="color:#5b6abf;">📥 136,509</span>
</div>
</div>
<div class="rec-card">
<span class="badge-cat" style="margin-bottom:8px;display:inline-block;">content-creation</span>
<h3><a href="/s/youtube-api-skill">YouTube</a></h3>
<div class="rec-owner">byungkyu</div> <div class="rec-desc">使用托管OAuth集成YouTube Data API，支持搜索视频、管理播放列表、获取频道数据及评论互动，适用于用户需要时使用此技能。</div>
<div class="rec-stats">
<span style="color:#f39c12;">★ 142</span>
<span style="color:#5b6abf;">📥 41,084</span>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded',function(){
document.querySelectorAll('.detail-tab').forEach(function(btn){
btn.addEventListener('click',function(e){
var tab = this.getAttribute('data-tab');
document.querySelectorAll('.detail-tab').forEach(function(b){b.classList.remove('active')});
document.querySelectorAll('.detail-content').forEach(function(c){c.classList.remove('active')});
this.classList.add('active');
var el = document.getElementById('tab-'+tab);
if(el) el.classList.add('active');
});
});
});
</script>
<div class="footer">
<p>Skill工具集 © 2026</p>
</div></body>
</html> |