# Web Preview

Emit a hidden preview marker so the right-panel Browser tab opens a Load-preview card...

- Repository: https://github.com/kirodotdev/KiroCrew (4711 stars)
- Category: Engineering
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add kirodotdev/KiroCrew --skill web-preview -g -a claude-code -y`
Codex: `npx skills add kirodotdev/KiroCrew --skill web-preview -g -a codex -y`
Cursor: `npx skills add kirodotdev/KiroCrew --skill web-preview -g -a cursor -y`
Gemini CLI: `npx skills add kirodotdev/KiroCrew --skill web-preview -g -a gemini-cli -y`

## Description

Emit a hidden preview marker so the right-panel Browser tab opens a Load-preview card for a local server URL. Use whenever you start a dev or static server the user should see (Vite, Next, `npm run dev`, `python -m http.server`, etc.).

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Web Preview marker

KiroCrew's chat right-side panel has a **Browser** tab (+ menu → Browser)
that embeds a URL in a live iframe. When you start a local web server so the user
can preview a site/app, tell the dashboard which URL to load by emitting a single
hidden marker in your reply.

## The marker

Emit exactly this, on its own line, once the server is confirmed listening:

```
<!-- kirocrew:preview url="http://127.0.0.1:PORT" -->
```

The rest: https://github.com/kirodotdev/KiroCrew/blob/HEAD/src/kiro_crew/builtin_skills/web-preview/SKILL.md