Skip to content
Back to skills

Live Preview

ASecurity

Start a local app in the current user project, expose it through a tunnel, and return preview details in structured Markdown. Use when the user asks for a preview URL, public URL, shareable localhost, mobile/web preview, or tunnel setup.

  • 489 stars
  • 0 votes
  • 0 copies
  • 0 views
  • Added October 1, 2026
developmentgobashapi

Works with

  • api

Security analysis

A100/100

Pro scans all 2 files and shows the line behind each finding

Scanned October 1, 2026

npx -y skills add vicoa-ai/vicoa --skill live-preview --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Live Preview?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Live Preview
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/vicoa-ai-live-preview/badge)](https://www.skillsdirectory.com/skills/vicoa-ai-live-preview)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
---
name: live-preview
description: Start a local app in the current user project, expose it through a tunnel, and return preview details in structured Markdown. Use when the user asks for a preview URL, public URL, shareable localhost, mobile/web preview, or tunnel setup.
argument-hint: "[optional: run command | port | provider]"
disable-model-invocation: true
allowed-tools: Read, Glob, Grep, LS, Bash
---

Create and report a live preview endpoint for the current repository.

Use arguments:
- Raw arguments: `$ARGUMENTS`
- First argument: `$0`
- Second argument: `$1`

Follow this workflow.

## 1) Resolve runtime plan
- Prefer explicit user arguments for run command, port, and tunnel provider.
- Otherwise infer a dev/start command from project files (e.g., `package.json`, `pyproject.toml`, `requirements.txt`, `Cargo.toml`, `go.mod`) and repository docs.
- Prefer loopback bind target (`127.0.0.1`).

## 2) Handle local port and app process
- Before starting a new service, check whether the target port is already in use.
- If port is free, start the app in background and capture PID.
- If port is occupied, inspect the owning process command/cwd.
- If the process appears to be the same project and same service (matching repository path and compatible run command), reuse that existing service and keep the same port.
- If the process is different (other project or different service), choose one alternate port and start a new service once.
- Include in `message` whether the preview reused an existing service or started a new one.

## 3) Verify local readiness
- Probe `http://127.0.0.1:<port>` for up to 60 seconds.
- Treat any HTTP response as reachable preview surface.
- If unreachable, return an error result in the structured Markdown format.

## 4) Start tunnel
- Try Cloudflare first: `cloudflared tunnel --url http://127.0.0.1:<port>`.
- Parse `https://*.trycloudflare.com` from output.
- If unavailable or failed, try ngrok (`ngrok http <port>`) and read URL from `http://127.0.0.1:4040/api/tunnels`.
- If both fail due to cloudflare or ngrok not installed, install them and try again. 
- If tunnel setup fails, return an error result that includes a concrete install/action hint.

## 5) Emit structured Markdown result
- Print final output as Markdown bullets only, with `*` at the beginning of each line.
- Extract the tunnel URL from provider output and include it as `public_url`.
- Include exactly these fields, one per line:
* status: ok or error
* provider: cloudflare, ngrok, or none
* local_url: local URL such as http://127.0.0.1:3000
* port: numeric local port
* pid: process id or null
* message: short actionable summary
* public_url: tunnel URL or null
- Do not print secrets.
- Keep `message` concise and actionable.

## 6) Keep lifecycle predictable
- Keep preview processes running unless the user asked for one-shot verification only.
- If user asked to stop/cleanup, terminate local app and tunnel processes and return success result in the same structured Markdown format.

Files in this skill

  • SKILL.md2.9 KB
  • reference/output-contract.md504 B

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…