Skills

browser-preview

Installation
Summary

Browser preview panel for rendering and managing iframe-based service previews in the right sidebar.

  • Automatically opens a Browser tab when preview_serve returns a URL; each service gets one tab accessible via the ⋮ menu showing running services
  • Preview URLs use reverse proxy format /preview/{id}/ — users cannot access localhost or 127.0.0.1 directly; always direct them to the preview URL or Browser panel
  • Static assets must use relative paths (./static/app.js, ./api/data) instead of absolute paths (/static/app.js), which break under the /preview/{id}/ proxy prefix
  • Diagnose issues by checking the registry (/data/previews.json), verifying port responses server-side, and consulting history (/data/preview_history.json) when services aren't running
SKILL.md

Browser Preview

You already know preview_serve and preview_stop. This skill fills the gap: what happens after preview_serve returns a URL — how the user actually sees it.

What is the Preview Panel

The frontend has a right-side panel with three tabs: Files, Preview, and Jobs. The Preview tab renders preview URLs inside an iframe. When you call preview_serve, the frontend automatically opens a Preview tab loading that URL.

Key facts:

  • Each preview_serve call creates one Preview tab
  • URL format: https://<host>/preview/{id}/
  • Preview panel has a ⋮ menu (top-right) showing "RUNNING SERVICES" list
  • Preview tab can be closed by the user without stopping the backend service
  • Backend service stopping → Preview tab shows an error page

⚠️ CRITICAL: Never Tell Users to Access localhost

The user's browser CANNOT access localhost or 127.0.0.1. These addresses point to the server container, not the user's machine. The preview architecture uses a reverse proxy:

Related skills

More from starchild-ai-agent/official-skills

Installs
4.2K
Repository
starchild-ai-ag…l-skills
GitHub Stars
13
First Seen
Mar 13, 2026
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykPass