# browser-preview

Walks the agent through a broken Preview tab: service registry, ports, and static asset paths that 404 behind the proxy.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 4600 installs · ★ 29
- Author: Starchild-ai-agent
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/Starchild-ai-agent/official-skills/tree/HEAD/browser-preview/SKILL.md
- Updated: 2026-10-22
- HTML: https://affpapa.org/en/nevibecode/skills/browser-preview

## What it does

This skill kicks in when the preview panel breaks: white screen, tab gone, assets returning 404, service not loading. It gives the agent a fixed order of steps. First read the running-service registry at `/data/previews.json`, then the history at `/data/preview_history.json`, then check the port with `curl` server-side. If the process died but the registry entry is still there, the skill says to recreate it with `preview_stop` and `preview_serve`.

The rule it drills hardest: users cannot reach `localhost` or `127.0.0.1`. Previews go through a reverse proxy, so the only URL worth handing over is `/preview/{id}/`. The second common break is absolute paths in static files. Because everything is served under the `/preview/{id}/` prefix, the browser asks for `/static/app.js` from the domain root and gets a 404. The skill tells the agent to check every place a path can hide: `src` and `href` attributes, `fetch()` calls, CSS `url()`, JS string literals, and bundler config like `publicPath` and `base`.

It also forbids poking around workspace folders such as `preview/` or `output/` with `ls` and `find`. Those hold user data, not service state. The registry, the history file, and the `preview_serve` and `preview_stop` tools are the only sources of truth. If the RUNNING SERVICES list looks empty while the port still answers, the frontend lost sync — recreating the service forces it to register the tab again.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Starchild-ai-agent/official-skills --skill browser-preview -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/browser-preview/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/browser-preview/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add Starchild-ai-agent/official-skills --skill browser-preview -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/browser-preview/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add Starchild-ai-agent/official-skills --skill browser-preview -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/browser-preview/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Starchild-ai-agent/official-skills browser-preview
```

2. **Manually: put the files in place**
- File: `.github/skills/browser-preview/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add Starchild-ai-agent/official-skills --skill browser-preview -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Starchild-ai-agent/official-skills --path browser-preview
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/browser-preview/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Starchild-ai-agent/official-skills --skill browser-preview -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/Starchild-ai-agent/official-skills/tree/HEAD/browser-preview/SKILL.md

## When to use it
- figure out why the Preview tab shows a white screen
- track down 404s on static assets after starting a preview
- recreate a service when the process died but the registry entry stayed
- bring back a closed Preview tab through the RUNNING SERVICES list
- keep preview state separate from user files in the workspace

## Example prompts
- the preview won't load, check the registry and tell me what's running
- the Preview tab disappeared, bring the service back
- static files are 404ing, check the paths in HTML and JS

## Similar
- [flutter-add-widget-preview](https://affpapa.org/en/nevibecode/skills/flutter-add-widget-preview.md) — skill · 36800 installs
- [browser-debugging](https://affpapa.org/en/nevibecode/skills/browser-debugging.md) — skill · 540 installs
- [browser-trace](https://affpapa.org/en/nevibecode/skills/browser-trace.md) — skill · 3000 installs
- [mcp](https://affpapa.org/en/nevibecode/skills/mcp.md) — skill · 5800 installs
- [remotion-studio](https://affpapa.org/en/nevibecode/skills/remotion-dev-remotion-studio.md) — skill · 177200 installs
- [build-mcp-app](https://affpapa.org/en/nevibecode/skills/build-mcp-app.md) — skill · 6458 installs

From the same set: [starchild-ai-agent/official-skills](https://affpapa.org/en/nevibecode/by/starchild-ai-agent/official-skills.md) — 18 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md