jscpd Code Migration Tracker
kucherenko/jscpd
Measures a code port between languages or frameworks with jscpd's function-level comparison, porting tests before code and tracking what is left unmatched.
Start a local app in the current user project, expose it through a tunnel, and return preview details in structured Markdown.
Install Live Preview
$ npx skills add vicoa-ai/vicoa --skill live-preview -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install vicoa-ai/vicoa live-preview --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/vicoa-ai/vicoa.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/live-preview .claude/skills/live-preview && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "live-preview" agent skill from https://github.com/vicoa-ai/vicoa/tree/main/skills/live-preview into .claude/skills/live-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "live-preview", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/vicoa-ai/vicoa/tree/main/skills/live-previewType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add vicoa-ai/vicoa --skill live-preview -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install vicoa-ai/vicoa live-preview --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vicoa-ai/vicoa.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/live-preview .agents/skills/live-preview && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "live-preview" agent skill from https://github.com/vicoa-ai/vicoa/tree/main/skills/live-preview into .agents/skills/live-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "live-preview", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add vicoa-ai/vicoa --skill live-preview -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install vicoa-ai/vicoa live-preview --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vicoa-ai/vicoa.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/live-preview .cursor/skills/live-preview && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "live-preview" agent skill from https://github.com/vicoa-ai/vicoa/tree/main/skills/live-preview into .cursor/skills/live-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "live-preview", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/vicoa-ai/vicoa.git --path skills/live-preview--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add vicoa-ai/vicoa --skill live-preview -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install vicoa-ai/vicoa live-preview --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vicoa-ai/vicoa.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/live-preview .gemini/skills/live-preview && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "live-preview" agent skill from https://github.com/vicoa-ai/vicoa/tree/main/skills/live-preview into .gemini/skills/live-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "live-preview", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install vicoa-ai/vicoa live-previewInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add vicoa-ai/vicoa --skill live-preview -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/vicoa-ai/vicoa.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/live-preview .github/skills/live-preview && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "live-preview" agent skill from https://github.com/vicoa-ai/vicoa/tree/main/skills/live-preview into .github/skills/live-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "live-preview", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add vicoa-ai/vicoa --skill live-preview -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install vicoa-ai/vicoa live-preview --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vicoa-ai/vicoa.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/live-preview .opencode/skills/live-preview && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "live-preview" agent skill from https://github.com/vicoa-ai/vicoa/tree/main/skills/live-preview into .opencode/skills/live-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "live-preview", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
live-preview- GitHub stars
- 504
- Token cost
- ~755 tokens
- SKILL.md length
- 371 words
- Files
- 2
- Skills in repo
- 3
- Repo updated
- First seen
- Licence
- AGPL-3.0
At a glance
Start a local app in the current user project, expose it through a tunnel, and return preview details in structured Markdown.
- Works in 6 steps: Resolve runtime plan → Handle local port and app process → Verify local readiness → …
- The user asks for a preview URL
- SKILL.md covers 1) Resolve runtime plan, 2) Handle local port and app…, 3) Verify local readiness and 4) Start tunnel, plus 2 more sections
- Calls cloudflared and ngrok
What it does
Live Preview is an agent skill from vicoa-ai/vicoa. 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.
Its SKILL.md is about 760 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `reference/output-contract.md`).
It sits in Documents & Office, covering Markdown. It works with Flutter, Next.js, Python and TypeScript. The repository describes itself as: Vicoa is the agentic IDE for running a team of coding agents from desktop, mobile, VPS. Open-source, self-hostable. The licence is AGPL-3.0.
When your agent uses it
- The user asks for a preview URL
- Shareable localhost
- Mobile/web preview
Example prompts
- “/live-preview”
Requirements
- Pre-approved tools (allowed-tools): Read, Glob, Grep, LS, Bash
Workflow steps
6 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 96000b9. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves these tools, so the agent can use them without asking each time:
ReadGlobGrepLSBash
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
cloudflaredngrok
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Live Preview loads about 755 tokens when it runs. Until then it costs about 63 tokens; SKILL.md has 371 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check: notes
The automated check noted patterns worth knowing about, such as sudo or a known installer.
- NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
allowed-tools: Read, Glob, Grep, LS, Bash
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from vicoa-ai/vicoa at commit 96000b9, republished under its AGPL-3.0 licence (© vicoa-ai). 371 words, ~755 tokens.
Download SKILL.mdSave it as
.claude/skills/live-preview/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- 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.
- allowed-tools
- Read, Glob, Grep, LS, Bash
- argument-hint
- [optional: run command | port | provider]
- disable-model-invocation
- true
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
messagewhether 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.
Show full SKILL.md (174 more words)Show less
4) Start tunnel
- Try Cloudflare first:
cloudflared tunnel --url http://127.0.0.1:<port>. - Parse
https://*.trycloudflare.comfrom output. - If unavailable or failed, try ngrok (
ngrok http <port>) and read URL fromhttp://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
messageconcise 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.
© vicoa-ai, AGPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file in skills/live-preview of vicoa-ai/vicoa.
- SKILL.md
- reference/output-contract.md
Open the folder on GitHubat commit 96000b9
Compare with similar skills
Live Preview next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Live Preview this skillvicoa-ai/vicoa | 504 | — | ~755 | Automated safety check: Notes | AGPL-3.0 | |
| jscpd Code Migration Trackerkucherenko/jscpd | 6.4k | — | ~5k | Automated safety check: Pass | MIT | |
| Grix Pre Push Checksaskie/grix | 153 | — | ~831 | Automated safety check: Pass | Custom licence | |
| Engine Whats Newflutter/flutter | 179k | — | ~978 | Automated safety check: Pass | BSD-3-Clause | |
| App Store Screenshots GeneratorParthJadhav/app-store-screenshots | 7.2k | — | ~16k | Automated safety check: Pass | MIT | |
| Mobilerun Docs Referencedroidrun/mobilerun | 9.6k | — | ~943 | Automated safety check: Pass | MIT |
Similar skills
Grix Pre Push Checks
askie/grix
Select and run the smallest sufficient validation set for Grix changes before push, review handoff, or completion.
Engine Whats New
flutter/flutter
Generates the "what's new" release summary and diff file for changes in the Flutter engine (//engine/src/flutter) between two releases (e.g., 3.47 vs 3.44).
App Store Screenshots Generator
ParthJadhav/app-store-screenshots
Scaffolds a Next.js editor for designing App Store and Google Play screenshots as ads and exporting them at every required size, for iOS, Mac and Android.
Mobilerun Docs Reference
droidrun/mobilerun
Answers questions about Mobilerun, the LLM-agent framework for automating Android and iOS devices, by pointing the agent to the right page of its v5 documentation.
Phoneagent
rounak/PhoneAgent
Control a connected iPhone, iOS simulator, Android emulator, or Android device from macOS through PhoneAgent's JSON-RPC bridge.
More from vicoa-ai/vicoa
Stack Preview
vicoa-ai/vicoa
Run the whole Vicoa stack (Postgres, backend, realtime server, web dashboard) from the current checkout and publish it at one public tunnel URL, so a branch can be reviewed from another machine or…
Vicoa CLI
vicoa-ai/vicoa
Operate Vicoa from the terminal with the vicoa CLI — list and inspect agent sessions (and their transcripts) across machines, start/resume/stop sessions, manage the task backlog with projects and…
Related
Categories
Questions about Live Preview
What does Live Preview do?
Start a local app in the current user project, expose it through a tunnel, and return preview details in structured Markdown. Live Preview is an agent skill from vicoa-ai/vicoa. Start a local app in the current user project, expose it through a tunnel, and return preview details in structured Markdown.
When should I use Live Preview?
Live Preview fits situations like: the user asks for a preview URL; shareable localhost; mobile/web preview.
How do I install Live Preview in Claude Code?
Run `npx skills add vicoa-ai/vicoa --skill live-preview -a claude-code`. Or copy the skill folder (skills/live-preview in vicoa-ai/vicoa) into .claude/skills/live-preview in your project. Claude Code loads it when a task matches its description.
How do I install Live Preview in Codex?
Run `npx skills add vicoa-ai/vicoa --skill live-preview -a codex`. Or copy the skill folder (skills/live-preview in vicoa-ai/vicoa) into .agents/skills/live-preview in your project. Codex loads it when a task matches its description.
Can I use Live Preview in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add vicoa-ai/vicoa --skill live-preview -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/live-preview, .gemini/skills/live-preview, .github/skills/live-preview and .opencode/skills/live-preview in your project.
What does Live Preview need to run?
Going by SKILL.md and its folder, Live Preview needs the command-line tools its instructions call (cloudflared and ngrok). Its frontmatter pre-approves these tools: Read, Glob, Grep, LS, Bash.
Does Live Preview access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Live Preview safe to install?
Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.
What licence does Live Preview use?
Live Preview is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Live Preview use?
About 755 tokens (SKILL.md is roughly 3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Live Preview?
Skills that share tags, products or a category with Live Preview: jscpd Code Migration Tracker (kucherenko/jscpd, 6.4k stars), Grix Pre Push Checks (askie/grix, 153 stars), Engine Whats New (flutter/flutter, 179k stars) and App Store Screenshots Generator (ParthJadhav/app-store-screenshots, 7.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Live Preview?
vicoa-ai (a GitHub organization) maintains it in vicoa-ai/vicoa, which has 504 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on October 10, 2026.
Source: vicoa-ai/vicoa on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.