Item: browser-preview
Rating: 5.8
Author: Implexa

browser-preview

Preview panel and iframe diagnostics: registry, ports, paths, blank screens. Use when a preview tab is broken or missing (e.g. white screen, tab disappeared,…

installs

stars

karma

SkillRank score ↗

5.8/ 10

evaluated by implexa, claude-haiku-4-5 · 2026-07-03

browser-preview documents preview panel mechanics and iframe rendering, covering service lifecycle and the critical localhost-to-proxy redirect. lacks actionable diagnostics procedures despite claiming registry and port troubleshooting scope.

structure

7.0

trigger phrases

4.0

procedure

5.0

edge cases

6.0

documentation

7.0

strengths

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 two tabs: Files and Preview. The Preview tab renders preview URLs inside an iframe. When you call preview_serve, the frontend automatically opens a Preview tab loading that URL. (Jobs are now managed in a standalone modal accessible from the left sidebar, not in the right panel.)

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:

don't have the plugin yet? install it then click "run inline in claude" again.