Desktop Local Preview

Open localhost apps in the desktop preview rail.

Skill metadata

Source	Bundled (installed by default)
Path	skills/software-development/desktop-local-preview
Version	1.0.0
Author	VibeOS
License	MIT
Platforms	macos, windows, linux
Tags	desktop, preview, localhost, webview, ship, internet
Related skills	ship-web-service, internet-starter, browser-e2e, browser-network-assert, design-to-code-loop

Reference: full SKILL.md

信息

The following is the complete skill definition that VibeOS loads when this skill is triggered. This is what the agent sees as instructions when the skill is active.

Desktop Local Preview

Use the existing Electron right-rail preview (<webview>) for localhost dev servers — no second chat UI. Agents surface a clickable preview link; users also run /preview or the command palette.

When to Use

• After starting Next/Vite/uvicorn locally in a desktop session
• Ship loop step between health check and browser-e2e
• User asks to “show the site in the app”

Prerequisites

• VibeOS Desktop with chat open
• Server on loopback only (localhost / 127.0.0.1 / ::1)
• Prefer vibeos project servers --expect <port> --health first

How to Run

User (desktop)

/preview                 → http://127.0.0.1:3000/
/preview 8000            → http://127.0.0.1:8000/
/preview http://127.0.0.1:5173/

Command palette: Open local preview (ports 3000 / 8000 / 5173 Vite).

Agent (message)

Emit a markdown preview chip so the desktop opens the rail:

[Preview: app](#preview/http%3A%2F%2F127.0.0.1%3A3000%2F)

Helper form: #preview/ + encodeURIComponent(url).

Also OK: status-stack chips from tool output that mention localhost URLs (already auto-detected).

Quick Reference

Action	Surface
Slash	/preview [port|url]
Palette	Open local preview
Markdown	[Preview:…](#preview/<urlencoded-url>)
External browser	Cmd/Ctrl+click status chip / openPreviewInBrowser

Procedure

1. Confirm port free/listening (vibeos project servers).
2. Start server in background via terminal.
3. Open preview (/preview or markdown link).
4. Assert health (browser-network-assert) and optional UI smoke (browser-e2e).

Pitfalls

• Non-loopback hosts are rejected by the desktop IPC guard.
• Do not embed a second chat surface — only the preview pane.
• iframe is wrong for Vite/HMR; the app uses <webview> already.

Verification

• Preview rail shows the page title/heading.
• Reload and DevTools work from the preview titlebar.
• Health URL still returns ok after design patches.