myvibe-publish

SKILL.md

MyVibe Publish

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

Usage

# Publish a ZIP file
/myvibe:myvibe-publish --file ./dist.zip

# Publish a single HTML file
/myvibe:myvibe-publish --file ./index.html

# Publish a directory (auto-zip)
/myvibe:myvibe-publish --dir ./dist

# Import and publish from URL
/myvibe:myvibe-publish --url https://example.com/my-app

# Publish to specific myvibe instance
/myvibe:myvibe-publish --file ./dist.zip --hub https://custom-hub.com

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://staging.myvibe.so/)
--title <title> -t Project title
--desc <desc> Project description
--visibility <vis> -v Visibility: public or private (default: public)

Workflow

CRITICAL: You MUST read reference files before starting analysis

Before starting any analysis, you MUST use the Read tool to read:

  • references/metadata-analysis.md - Detailed metadata extraction and tags matching workflow

Workflow Overview

  1. Detect Project Type → determine if build is needed
  2. Build (if needed) → compile the project
  3. Metadata Analysis → extract title, description, tags, screenshot
  4. Confirm Publish → show metadata, get user confirmation
  5. Execute Publish → upload to MyVibe

IMPORTANT: Step 3 (Metadata Analysis) is ALWAYS required, including after build.

1. Detect Project Type

Determine what type of project this is and what the publish target will be.

Target directory: --dir if specified, otherwise current working directory.

Project Type Detection

Check Project Type Next Step
--file with HTML file Single HTML → Step 3 (analyze the HTML file)
--file with ZIP file ZIP Archive → Step 3 (extract and analyze)
Has dist/index.html, build/index.html, or out/index.html Pre-built → Step 2 (confirm rebuild or use existing)
Has package.json with build script, no output folder Buildable → Step 2 (build first)
Has multiple package.json files or workspace config Monorepo → Step 2 (select app, then build)
Has index.html at root, no package.json Static → Step 3 (analyze root directory)
Cannot determine Unknown → Step 3 (analyze as-is)

Output format:

Project Type Detection:
- Type: [type]
- Reason: [why this type was detected]
- Publish target: [directory or file path]
- Next step: [Step 2: Build / Step 3: Metadata Analysis]

2. Build Decision (for Pre-built/Buildable/Monorepo projects)

Detect Build Configuration

Package Manager (from lock files):

Lock File Package Manager
pnpm-lock.yaml pnpm
yarn.lock yarn
bun.lockb or bun.lock bun
package-lock.json npm
None npm (default)

Build Command (from package.json scripts):

  • Priority: build:prod > build:production > build

Output Directory (from config files):

Config File Expected Output
vite.config.* dist
next.config.* .next or out
webpack.config.* dist
astro.config.* dist
nuxt.config.* .output
None recognized Check dist, build, out in order

Show Analysis & Confirm Build

Present the analysis to user:

Project Analysis:
- Type: [framework] project
- Package Manager: [pm]
- Build Command: [pm] run build
- Output Directory: [dir]

Warnings (if any):
- Missing .env file (.env.example exists)
- Large files detected (> 10MB)

For Pre-built projects (existing build output found), use AskUserQuestion:

Question: "Found existing build output in [dir]/. Rebuild to ensure latest?"
Header: "Build"
Options:
  - Label: "Rebuild & Publish"
    Description: "Run build again, then publish [dir]/"
  - Label: "Use Existing"
    Description: "Publish existing [dir]/ without rebuilding"
  - Label: "Publish Source"
    Description: "Skip output folder, publish source as-is"

For Buildable projects (no build output), use AskUserQuestion:

Question: "Proceed with build before publishing?"
Header: "Build"
Options:
  - Label: "Build & Publish"
    Description: "Run build, then publish [output_dir]/"
  - Label: "Publish Source"
    Description: "Skip build, publish source as-is"

Execute Build (if confirmed)

cd [project_dir] && [pm] install && [pm] run build

On build failure:

  • Analyze error output
  • Offer to help fix common issues (missing dependencies, config errors)
  • User can choose to fix and retry, or publish source as-is

After build completes: Proceed to Step 3: Metadata Analysis with the build output directory as the publish target.

Monorepo Handling

When multiple package.json files detected, use AskUserQuestion:

Question: "Monorepo detected. Which app would you like to publish?"
Header: "App"
Options:
  - Label: "[apps/web]"
    Description: "[framework] detected in apps/web"
  - Label: "[apps/admin]"
    Description: "[framework] detected in apps/admin"
  - Label: "Other"
    Description: "Specify a different path"

After selecting and building the app, proceed to Step 3: Metadata Analysis.

3. Metadata Analysis

CRITICAL: This step is MANDATORY for ALL project types, including after build.

Follow references/metadata-analysis.md completely. Each step MUST output results:

  1. Extract metadata (title, description, githubRepo)
  2. Fetch and match tags
  3. Generate screenshot

If screenshot fails, skip coverImage and let server auto-generate.

4. Confirm Publish

Present all extracted metadata to the user:

Publishing to MyVibe:
──────────────────────
Title: [extracted title]

Description:
[generated story, 50-150 words]

Visibility: public
Source: [directory path]

GitHub: [repo URL or "Not detected"]
Cover Image: [screenshot URL or "Will be auto-generated"]

Tags (auto-detected):
- Tech Stack: [matched tag names, e.g., "React, TypeScript, Vite"]
- Platform: [matched tag names or "None"]
- Category: [suggested category or "None"]
- Model: [detected AI models or "None"]

Use AskUserQuestion to confirm:

Question: "Confirm publish with these details?"
Header: "Publish"
Options:
  - Label: "Publish"
    Description: "Publish with the metadata shown above"
  - Label: "Edit details"
    Description: "Modify title, description, tags, or other fields"

If user selects "Edit details", collect corrections via follow-up questions.

5. Execute Publish

Only after user confirmation in Step 4, execute the publish script.

Dependency Check Strategy:

  1. Check if skills/myvibe-publish/scripts/node_modules directory exists
  2. If not exists: run npm install first
  3. If publish fails with module errors: run npm install and retry

Method 1: Using Config File (Recommended for full metadata)

Write a YAML config file with all metadata, then publish:

# Write config file in current directory
# File: ./publish-config.yaml
source:
  type: dir
  path: ./dist
hub: https://staging.myvibe.so
metadata:
  title: My App
  description: A cool web application
  visibility: public
  coverImage: https://...
  githubRepo: https://github.com/user/repo
  platformTags: [1, 2]
  techStackTags: [3, 4, 5]
  categoryTags: [6]
  modelTags: [7]
# Publish using config file
node skills/myvibe-publish/scripts/publish.mjs --config ./publish-config.yaml

The config file is automatically deleted after successful publish.

Method 2: Command Line Arguments (Simple cases)

# Publish a directory
node skills/myvibe-publish/scripts/publish.mjs \
  --dir ./dist \
  --hub https://staging.myvibe.so \
  --title "My App" \
  --desc "A cool app" \
  --visibility public

# Publish a file
node skills/myvibe-publish/scripts/publish.mjs \
  --file ./dist.zip \
  --hub https://staging.myvibe.so \
  --title "My App"

# Import from URL
node skills/myvibe-publish/scripts/publish.mjs \
  --url https://example.com/my-app \
  --hub https://staging.myvibe.so

Script Output:

On success:

Published successfully!
URL: https://staging.myvibe.so/{userDid}/{vibeDid}

6. Return Result

  • On success: Show the published URL to the user
  • On failure: Show the error message and suggest solutions

Error Handling

Error Handling
Dependencies not installed Run npm install in scripts directory
401/403 Authorization error Token will be cleared automatically, re-run to authorize again
Upload failed Show error message, suggest checking file format
Conversion failed Show conversion error from API
Network error Suggest retry
Build failed Analyze error, offer to help fix, or publish source as-is
Missing dependencies Run [pm] install first
Config error Check framework config files
Screenshot failed Skip coverImage, proceed without it
agent-browser not installed Run npm install -g agent-browser && agent-browser install
agent-browser Chromium missing Run agent-browser install (or --with-deps on Linux)
Tags fetch failed Use expired cache if available, or skip tag matching
Image upload failed Skip coverImage, proceed without it

Authorization

The script handles authorization automatically:

  • First run opens browser for user to authorize
  • Token is saved for future use
  • On 401/403 errors, token is cleared and user needs to re-authorize on next run

Notes

  • Always analyze content before publishing to generate meaningful title/description
  • Never use directory names as title - they are often meaningless
  • Confirm with user before executing publish
  • Default hub is https://staging.myvibe.so/
  • Local build detection is preprocessing only; server has its own build pipeline
  • Be conservative: if project type is uncertain, publish as-is and let server handle
  • --dir specifies target directory and requires full metadata analysis
  • --file specifies single file and also requires metadata analysis and screenshot generation
  • Build detection should not block publishing
  • Tags are cached locally for 7 days to avoid repeated API calls
  • All auto-detected metadata should be shown as "suggestions" - user can modify
  • If screenshot fails, skip coverImage and let server auto-generate
  • Use config file method when publishing with extended metadata (tags, coverImage, etc.)
Weekly Installs
10
Installed on
claude-code9
opencode8
gemini-cli8
cursor7
codex6
antigravity6