Browser Preview

When users report broken preview tabs, blank screens, or missing browser previews, this skill knows exactly what to check. It reads the actual registry files at `/data/previews.json` and `/data/preview_history.json` to diagnose what's running versus what crashed. More importantly, it prevents the classic mistake of telling users to visit localhost URLs that they can't actually reach from their browser. It also catches the absolute path gotcha that breaks static assets when served through the reverse proxy. Think of it as the troubleshooting manual for Claude's iframe preview system, with step-by-step debugging that actually works.

skills.sh installs: 4.6K
GitHub stars: 32
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add starchild-ai-agent/official-skills --skill browser-preview --agent claude-code

Installs into .claude/skills of the current project.

Files

logo.png

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:

SKILL.md on GitHub