/vibelink-push

Share the current project via Vibelink.

What this skill does

1. Analyzes the project to detect name, description, and technologies
2. Detects if this is a remix of another vibelink project
3. Starts the dev server (if applicable)
4. Takes a screenshot of the running app (if browser tools available)
5. Creates or updates vibelink.json metadata
6. Zips the project (excluding node_modules, .git, etc.)
7. Uploads to vibelink.to
8. Returns the shareable link

Instructions

When the user runs /vibelink-push, follow these steps:

Step 1: Analyze the project

Look for these files to understand the project:

• package.json - for name, description, dependencies
• README.md - for description
• vibelink.json - existing metadata (if any)
• Source files - to detect technologies

Detect technologies by looking at:

• Dependencies in package.json (React, Vue, Svelte, etc.)
• File extensions (.ts, .tsx, .py, .rs, etc.)
• Config files (tailwind.config.js, vite.config.ts, etc.)

Step 2: Check for existing vibelink.json and detect remixes

Check if vibelink.json exists and examine it:

Case A: No vibelink.json exists

• This is a new project
• Generate a new projectId
• Ask user for name, description, author

Case B: vibelink.json exists with NO forkedFrom field

• This is the original project being updated
• Keep the same projectId
• Update metadata if needed

Case C: vibelink.json exists WITH a forkedFrom field, but same author

• This is the user's own remix being updated
• Keep the same projectId
• Update metadata if needed

Case D: vibelink.json exists and project is in ~/vibelinks/ directory

• This was downloaded from vibelink - it's a remix!
• MUST generate a NEW projectId (never overwrite someone else's project)
• Set forkedFrom to the original projectId
• Ask user: "This looks like a remix of {originalName}. What do you want to call your version?"
• Suggest a name like "{originalName} Remix" or let them choose

Step 3: Check for existing project ID

For NEW projects:

• Do NOT generate a project ID - the server will generate one
• The server returns the generated ID in the response

For UPDATES (when vibelink.json already has a projectId and you have a saved token):

• Use the existing projectId from vibelink.json
• Include the saved author token

Step 4: Try to capture a preview screenshot

If browser automation tools (mcp__claude-in-chrome__*) are available:

1. Detect the dev server command and port from package.json scripts or common patterns
2. Start the dev server in the background
3. Wait for it to be ready (check if port is listening)
4. Navigate to localhost:{port} using mcp__claude-in-chrome__navigate
5. Take a screenshot using mcp__claude-in-chrome__computer with action: "screenshot"
6. Save the screenshot to ./vibelink-preview.png
7. Stop the dev server

If browser tools are not available or the app can't be started, skip this step.

Step 5: Create the zip

Create a zip file excluding:

• node_modules/
• .git/
• dist/
• build/
• .next/
• __pycache__/
• *.pyc
• .env (but include .env.example if it exists)
• .DS_Store
• vibelink-upload.zip (previous upload)

Use: zip -r vibelink-upload.zip . -x "node_modules/*" -x ".git/*" ...

Step 6: Upload to vibelink.to

Determine if this is a NEW project or UPDATE:

Check if vibelink.json has a projectId AND you have a saved token in ~/.vibelink-tokens/{projectId}:

• If BOTH exist: this is an UPDATE
• Otherwise: this is a NEW project

Upload the project using curl:

For NEW projects (server generates the ID):

curl -X POST https://vibelink.to/upload \
  -F "metadata=@vibelink.json" \
  -F "zip=@vibelink-upload.zip" \
  -F "preview=@vibelink-preview.png"  # only if preview exists

For UPDATES (include projectId and authorToken):

curl -X POST https://vibelink.to/upload \
  -F "projectId={projectId}" \
  -F "authorToken={token}" \
  -F "metadata=@vibelink.json" \
  -F "zip=@vibelink-upload.zip" \
  -F "preview=@vibelink-preview.png"  # only if preview exists

Handle the response:

The response JSON includes:

• projectId: The project's ID (server-generated for new projects)
• url: The shareable URL
• isUpdate: Whether this was an update
• authorToken: (Only for new projects) Save this!

On success (200):

1. Parse the JSON response to get the projectId
2. If response contains authorToken:
   • Create tokens directory: mkdir -p ~/.vibelink-tokens
   • Save token: echo "{token}" > ~/.vibelink-tokens/{projectId}
   • Update vibelink.json with the server-generated projectId
3. Display the shareable link

Error responses:

• 403 Forbidden: Invalid or missing author token for update
• 404 Not Found: Trying to update a project that doesn't exist
• 413 Payload Too Large: Project exceeds 100MB limit
• 429 Rate Limited: Exceeded 100MB/hour upload limit

On successful upload, display:

For NEW projects:

✅ Uploaded to Vibelink!

Project: {name}
{Remixed from: {originalName} - if applicable}

🔗 https://vibelink.to/{projectId}

Share this link - anyone can open it in Claude Code!

🔑 Your author token has been saved to ~/.vibelink-tokens/{projectId}
   You'll need this token to update your project later.

For UPDATES:

✅ Updated on Vibelink!

Project: {name}

🔗 https://vibelink.to/{projectId}

Step 7: Clean up

Optionally remove the zip file after successful upload (keep vibelink.json).

Example vibelink.json - New project

{
  "name": "Weather Dashboard",
  "description": "A real-time weather dashboard with beautiful visualizations",
  "author": "alexstein",
  "projectId": "weather-dashboard-x7k2",
  "technologies": ["React", "TypeScript", "Tailwind CSS", "OpenWeather API"],
  "preview": {
    "type": "image",
    "src": "./vibelink-preview.png"
  }
}

Example vibelink.json - Remix

{
  "name": "Weather Dashboard Dark Mode",
  "description": "Added dark mode and hourly forecasts to the weather dashboard",
  "author": "friendname",
  "projectId": "weather-dashboard-dark-k9p2",
  "forkedFrom": "weather-dashboard-x7k2",
  "technologies": ["React", "TypeScript", "Tailwind CSS", "OpenWeather API"],
  "preview": {
    "type": "image",
    "src": "./vibelink-preview.png"
  }
}

Important notes

• Always ask for confirmation before uploading
• Don't include sensitive files (.env, credentials, etc.)
• NEVER overwrite someone else's project - always create a new ID for remixes
• If the project is in ~/vibelinks/, it was downloaded and is definitely a remix
• Give credit by setting forkedFrom when remixing
• Author tokens are stored in ~/.vibelink-tokens/ - these are needed to update projects
• If you lose your author token, you cannot update that project (create a new one instead)

Limits

Per-project size limit: 100MB

Vibelink is for small vibe-coded projects, not large repositories.

After creating the zip, check its size:

du -h vibelink-upload.zip

• Under 100MB: Good to go!
• Over 100MB: Stop and warn the user. Suggest:
  • Make sure node_modules, .git, dist, build are excluded
  • Remove large assets (videos, large images)
  • Consider if this project is too big for vibelink

Rate limit: 100MB per hour per user

Users can upload up to 100MB total per hour. If rate limited, they'll need to wait before uploading more.