myvibe-publish

What this skill does

# MyVibe Publish

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

## Prerequisites

- Node.js 18 or later
- All script executions in this skill require network access. Always run Bash commands with `sandbox_permissions=require_escalated` to ensure network permissions are enabled.
- The deployment and screenshot generation may take a few minutes. Use a 10-minute (600000ms) timeout for publish commands.

## 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
```

## 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 |

## Pre-authorized Credential

When the user provides an access credential (a string starting with `blocklet-`) in their message, **save it before publishing**:

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

The `--hub` parameter specifies which MyVibe hub the credential belongs to. **Always pass `--hub` explicitly** to match the target hub for publishing. If the user specifies a custom hub (via `--hub` in their publish command or message), use that same URL here. Do not rely on the default value.

This persists the credential to `~/.myvibe/` so all future publishes use it automatically. No browser auth will be triggered.

If the user's message contains a credential, always extract and save it in this step, even if one is already saved.

## Workflow Overview

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

**First tool call - check dependencies and gather info in parallel:**
- `Bash`: `test -d {skill_path}/scripts/node_modules || npm install --prefix {skill_path}/scripts`
- `Read`: source file or main files in directory
- `Bash`: `git remote get-url origin 2>/dev/null || echo "Not a git repo"`

After dependencies are confirmed, fetch tags:
- `Bash`: `node {skill_path}/scripts/utils/fetch-tags.mjs --hub {hub}`

---

## Step 1: Detect Project Type

| 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.

**After starting the screenshot background task**, use `TaskOutput` (with `block: false`) to check the task output before proceeding. If the output contains "agent-browser is not installed" or "Chromium is not installed":

1. Install agent-browser: `npm install -g agent-browser && agent-browser install`
2. Re-run the screenshot command (same command as above, run_in_background: true)
3. Check again with `TaskOutput` (block: false) to confirm it's running

This ensures the screenshot can complete successfully in the background while you continue with metadata analysis.

---

## Step 2: Build (if needed)

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 (same check as Step 1: use `TaskOutput` block: false to verify agent-browser is available, install if needed, then retry), then proceed to Step 3.

---

## Step 3: Metadata Analysis

### Generate title

MyVibe generates page URLs from the title (e.g. "Interactive Solar System" → `interactive-solar-system`), so the title must be meaningful and descriptive.

**Step 1 - Extract raw title candidates:**
- `<title>` tag content
- `og:title` meta content
- `package.json` name field
- First `<h1>` content

**Step 2 - Evaluate and generate:**
If the extracted title is generic or meaningless (e.g. "Document", "Untitled", "index", "app", "React App", "Vite App", single characters, or package-name-style like "my-app"), generate a better title based on:
- What the project actually does (from source code, README, conversation context)
- The visual content and purpose of the page

**Title requirements:**
- 2-6 words, concise and descriptive
- Describes the content/purpose, not the technology (e.g. "Interactive Solar System" not "Three.js Demo")
- No filler words like "app", "demo", "project", "page" unless essential to meaning
- English words, proper capitalization (Title Case)
- If `--title` was explicitly provided by user, always use it as-is

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

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"

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

### 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) |

---

## Step 4: Confirm Publish

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"

---

## Step 5: Execute Publish

The publish script automatically reads the screenshot result file. 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",
  "m