New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Openhost Frontend Preview

by imbue-ai in imbue-ai/sculptor

Live, hot-reloading preview of the Sculptor WEB frontend from a phone or any browser, served through the OpenHost nginx /proxy front.

MITAuto-check passedFrontend & Design

Install Openhost Frontend Preview

skills CLI
$ npx skills add imbue-ai/sculptor --skill openhost-frontend-preview -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install imbue-ai/sculptor openhost-frontend-preview --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/imbue-ai/sculptor.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/openhost-frontend-preview .claude/skills/openhost-frontend-preview && rm -rf skills-src

Use ~/.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/

Facts

Skill name
openhost-frontend-preview
GitHub stars
238
Token cost
~1.7k tokens
SKILL.md length
841 words
Files
1
Skills in repo
29
Repo updated
First seen
Licence
MIT

At a glance

Live, hot-reloading preview of the Sculptor WEB frontend from a phone or any browser, served through the OpenHost nginx /proxy front.

  • Tasks that involve Cloud networking
  • SKILL.md covers When this applies — OpenHost…, How it works (read first), What surrounds a preview… and Run a preview, plus 2 more sections
  • Calls pnpm and just
  • Tasks that involve Frontend development

What it does

Openhost Frontend Preview is an agent skill from imbue-ai/sculptor. Live, hot-reloading preview of the Sculptor WEB frontend from a phone or any browser, served through the OpenHost nginx /proxy front. ONLY relevant when running INSIDE the openhost-deployed Sculptor (the container fronted by nginx on :5050, reachable at https://sculptor.<zone/) — NOT for local or Electron dev. Frontend-only: it reuses the single shared backend, so it previews UI/frontend changes, not a per-workspace backend. Invoke when iterating on the web UI and wanting to see it live in a browser through the…

Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Cloud networking, Frontend development and Authentication. It works with NGINX and Vite. The repository describes itself as: Build product with grounded, parallel coding agents. The licence is MIT.

When your agent uses it

  • Tasks that involve Cloud networking
  • Tasks that involve Frontend development
  • Tasks that involve Authentication

Example prompts

  • “/openhost-frontend-preview”

What it can do on your machine

Read from SKILL.md and the folder at commit f847102. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • pnpm
    • just

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.

    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

Openhost Frontend Preview loads about 1.7k tokens when it runs. Until then it costs about 141 tokens; SKILL.md has 841 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~141
When it runs · the whole SKILL.md, loaded when a task matches
~1.7k

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 passed

The automated check found no risky patterns in SKILL.md.

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 imbue-ai/sculptor at commit f847102, republished under its MIT licence (© imbue-ai). 841 words, ~1,659 tokens.

Download SKILL.mdSave it as .claude/skills/openhost-frontend-preview/SKILL.md (or your agent's skills folder).
name
openhost-frontend-preview
description
Live, hot-reloading preview of the Sculptor WEB frontend from a phone or any browser, served through the OpenHost nginx /proxy front. ONLY relevant when running INSIDE the openhost-deployed Sculptor (the container fronted by nginx on :5050, reachable at https://sculptor.<zone>/) — NOT for local or Electron dev. Frontend-only: it reuses the single shared backend, so it previews UI/frontend changes, not a per-workspace backend. Invoke when iterating on the web UI and wanting to see it live in a browser through the OpenHost SSO front.
user-invocable
true

OpenHost frontend live preview (/proxy/<port>/)

Run a Vite dev server (HMR) for the Sculptor web UI and reach it from any logged-in browser — including a phone — through the OpenHost nginx front, entirely behind OpenHost's owner SSO. Nothing is exposed publicly.

When this applies — OpenHost only

Use this ONLY inside the openhost-deployed Sculptor. Quick checks:

  • test -f /app/openhost-nginx.conf (the nginx front config), and
  • PID 1 is nginx: ps -p 1 -o args= -> nginx ... (backend is on loopback :5051).

If those are NOT true (local dev, Electron, a plain backend on :5050), this skill does not apply — use normal pnpm run dev / just frontend there instead.

How it works (read first)

  • nginx owns :5050 (the only port OpenHost proxies) and routes /proxy/<port>/* -> 127.0.0.1:<port>; everything else -> the backend on :5051.
  • A preview is just a Vite dev server on a loopback port in the 51000-59999 band, served with base=/proxy/<port>/, dialing HMR back over wss://...:443/proxy/<port>/. Its /api + /ws calls are same-origin absolute, so they hit the ONE shared backend — there is no per-preview backend.
  • So this previews frontend changes. Full-stack per-workspace instances (each with its own backend) are not supported on one origin: every backend would set the same session cookie on the same origin, and they collide.

What surrounds a preview (already wired — don't rebuild it)

  • Switchboard + down-page: /proxy/ (no port) serves a self-contained page (openhost-preview-fallback.html, repo root) that scans the band from the browser and links to live previews. nginx serves the SAME page when a /proxy/<port>/ target is dead, with a way back and an auto-reload poll that returns to the preview once its server is back.
  • Identity meta: each preview's index.html carries <meta name="sculptor-preview" content="<branch>@<sha>[*]"> (* = dirty tree), injected per request by previewIdentity in sculptor/frontend/vite.base.config.ts under SCULPTOR_OPENHOST_PROXY. A tree with no .git reports the frontend dir it serves from instead — e.g. /app/sculptor/frontend for a preview of the deploy image, which ships no git history. The switchboard and the switcher extension show this label.
  • Preview-switcher pill: the openhost-preview-switcher extension (sculptor/frontend/extensions/, auto-installed at boot by openhost-run.sh) renders a bottom-left pill in the deployed app listing live previews in 51000-51099, and an amber badge with a way back when ON a preview. Switching preserves the #/ route.
  • HMR keepalive: the dev server sends a no-op custom HMR event to every client every 25s (previewHmrKeepalive in sculptor/frontend/vite.base.config.ts, also SCULPTOR_OPENHOST_PROXY-gated). Without it the idle HMR websocket gets killed by the edge and Vite hard-reloads the page about once a minute (and on every return from the background). If "random reloads" ever reappear, check the keepalive before suspecting app code.
Show full SKILL.md (387 more words)Show less

Run a preview

Use a port in the 51000-51099 band. The preview-switcher pill in the deployed app only auto-discovers that range (and the /proxy/ switchboard page, openhost-preview-fallback.html, quick-scans it on load), so a preview there shows up without a full-band scan. A higher port (51100-59999) still works, but it will not appear in the pill — you'd reach it only via the switchboard's full-band scan or a direct /proxy/<port>/ URL, so don't reach for a random high port. The zero-friction way to get a valid one is to let the script pick: run launch-preview.sh with no argument and it auto-selects a free 51000-51099 port (printed to the log).

Launch it DETACHED — do NOT use a tracked background task; this Sculptor will not release your turn to the user while one is alive:

cd <frontend-dir>
setsid bash launch-preview.sh 51042 >/tmp/vite-51042.log 2>&1 </dev/null &

(or setsid bash launch-preview.sh >/tmp/vite-preview.log 2>&1 </dev/null & with no port to auto-pick a free 510xx one — then read the chosen port and the ready in line from the log.)

<frontend-dir> is either:

  • /app/sculptor/frontend — preview the deployed UI as-is (its node_modules and .venv are already there, so it starts fast), or
  • your workspace's sculptor/frontend — preview YOUR edits with HMR. A fresh worktree has no node_modules, so run pnpm install there once first (slow), then launch.

launch-preview.sh [port] sets SCULPTOR_FRONTEND_PORT + SCULPTOR_OPENHOST_PROXY and runs pnpm run dev — the /proxy/<port>/ base AND the OpenHost wss/HMR override are both derived from those env vars in vite.base.config.ts, so do NOT pass --base yourself (pnpm forwards a stray -- that Vite reads as end-of-options and silently drops the flag). First start pre-bundles deps (~tens of seconds) — watch /tmp/vite-<port>.log for ready in. Then open, on any logged-in browser:

https://sculptor.<your-zone>/proxy/51042/

Edits to the frontend source hot-reload live.

Stop a preview

Do NOT pkill -f vite... — the pattern matches your own shell command and kills the call. Stop by port -> pid -> process group:

PID=$(ss -tlnpH | grep ':51042' | grep -oE 'pid=[0-9]+' | head -1 | cut -d= -f2)
PGID=$(ps -o pgid= -p "$PID" | tr -d ' ')
kill -9 -"$PGID"

Gotchas

  • Detached, not background. Launch via setsid ... & from a normal foreground command so your turn releases. A run_in_background task or persistent Monitor blocks the user from talking to you until it ends.
  • One browser per workspace page. Sculptor syncs tab state via localStorage, so the same workspace open in two browsers can desync — preview on a different page/tab than the one you're chatting in.
  • Same-origin trust. Previews share the app's origin, so preview JS runs with your session's privileges — only run frontend code you trust.

© imbue-ai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/openhost-frontend-preview of imbue-ai/sculptor.

Open the folder on GitHubat commit f847102

Compare with similar skills

Openhost Frontend 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.

Openhost Frontend Preview compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Openhost Frontend Preview this skillimbue-ai/sculptor238—~1.7kAutomated safety check: PassMIT
Cb Security HardeningBlkLeg/CircuitBreaker201—~2.1kAutomated safety check: PassMIT
Vitemagnus919/agent-skills115—~1.5kAutomated safety check: NotesMIT
Vue Component Developmentgdarko/laravel-vue-starter145—~1.1kAutomated safety check: PassMIT
Frontend Devnteract/nteract179—~5.4kAutomated safety check: PassBSD-3-Clause
React Router Developmentremix-run/react-router57k1 repos~1.5kAutomated safety check: PassMIT

Similar skills

  • Cb Security Hardening

    BlkLeg/CircuitBreaker

    Enforces Circuit Breaker security hardening conventions across backend, frontend, Docker, and nginx.

    201 GitHub stars~2.1k tokensUpdated 4 days ago
    Backend & APIsAuto-check passed

  • Vite

    magnus919/agent-skills

    Operate Vite projects: inspect versions and configuration, run bounded development and production builds, diagnose dependency and asset failures, and configure environment-aware frontend delivery.

    115 GitHub stars~1.5k tokensUpdated today
    Frontend & DesignAuto-check: notes

  • Vue Component Development

    gdarko/laravel-vue-starter

    Activate when creating or modifying Vue 3 components, pages, layouts, stores, or services in the frontend.

    145 GitHub stars~1.1k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check passed

  • Frontend Dev

    nteract/nteract

    Frontend development for nteract UI/product surfaces, Elements fixtures, hot reload, dev daemon setup, MCP server workflow, TypeScript bindings via ts-rs, and reactive state work that touches RxJS…

    179 GitHub stars~5.4k tokensUpdated today
    Frontend & DesignAuto-check passed

  • React Router Development

    remix-run/react-router

    Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.

    57k GitHub starsUsed in 1 repo~1.5k tokens
    Frontend & DesignAuto-check passed

  • Vuetify Playground

    vuetifyjs/vuetify

    Maintains the Vuetify repo's local Playground.vue so contributors get a realistic reproduction and a short demo they can paste into a pull request description.

    41k GitHub stars~730 tokensUpdated today
    Frontend & DesignAuto-check passed

More from imbue-ai/sculptor

All 29 skills in this repo

  • Auto QA Iphone

    imbue-ai/sculptor

    QA the Sculptor mobile web UI on a real iOS Simulator, driven headlessly from a Mac.

    238 GitHub stars~3.1k tokensUpdated today
    Auto-check passed

  • Measure React Renders

    imbue-ai/sculptor

    Compare React component render counts between origin/main and the current branch during a user-defined UI scenario (e.g.

    238 GitHub stars~603 tokensUpdated today
    Auto-check passed

  • Post PR To Slack

    imbue-ai/sculptor

    Post a one-line PR announcement to a Slack channel, and mark it :merged: when the PR merges.

    238 GitHub stars~1.6k tokensUpdated today
    Auto-check passed

  • Batch Claude Runner

    imbue-ai/sculptor

    Run Claude programmatically against collections of files in the codebase.

    238 GitHub stars~308 tokensUpdated today
    Auto-check passed

  • Build Sculptor Extension

    imbue-ai/sculptor

    Build or modify a Sculptor extension — a runtime ESM module loaded into the Sculptor UI.

    238 GitHub stars~3.4k tokensUpdated today
    Auto-check passed

  • Code Review Checklist

    imbue-ai/sculptor

    Review a set of code changes against Sculptor's review categories and produce a markdown findings table.

    238 GitHub stars~3.6k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Openhost Frontend Preview

What does Openhost Frontend Preview do?

Live, hot-reloading preview of the Sculptor WEB frontend from a phone or any browser, served through the OpenHost nginx /proxy front. Openhost Frontend Preview is an agent skill from imbue-ai/sculptor. Live, hot-reloading preview of the Sculptor WEB frontend from a phone or any browser, served through the OpenHost nginx /proxy front.

When should I use Openhost Frontend Preview?

Openhost Frontend Preview fits situations like: tasks that involve Cloud networking; tasks that involve Frontend development; tasks that involve Authentication.

How do I install Openhost Frontend Preview in Claude Code?

Run `npx skills add imbue-ai/sculptor --skill openhost-frontend-preview -a claude-code`. Or copy the skill folder (.claude/skills/openhost-frontend-preview in imbue-ai/sculptor) into .claude/skills/openhost-frontend-preview in your project. Claude Code loads it when a task matches its description.

How do I install Openhost Frontend Preview in Codex?

Run `npx skills add imbue-ai/sculptor --skill openhost-frontend-preview -a codex`. Or copy the skill folder (.claude/skills/openhost-frontend-preview in imbue-ai/sculptor) into .agents/skills/openhost-frontend-preview in your project. Codex loads it when a task matches its description.

Can I use Openhost Frontend 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 imbue-ai/sculptor --skill openhost-frontend-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/openhost-frontend-preview, .gemini/skills/openhost-frontend-preview, .github/skills/openhost-frontend-preview and .opencode/skills/openhost-frontend-preview in your project.

What does Openhost Frontend Preview need to run?

Going by SKILL.md and its folder, Openhost Frontend Preview needs the command-line tools its instructions call (pnpm and just).

Does Openhost Frontend 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 Openhost Frontend Preview safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Openhost Frontend Preview use?

Openhost Frontend Preview is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Openhost Frontend Preview use?

About 1.7k tokens (SKILL.md is roughly 6.6k 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 Openhost Frontend Preview?

Skills that share tags, products or a category with Openhost Frontend Preview: Cb Security Hardening (BlkLeg/CircuitBreaker, 201 stars), Vite (magnus919/agent-skills, 115 stars), Vue Component Development (gdarko/laravel-vue-starter, 145 stars) and Frontend Dev (nteract/nteract, 179 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Openhost Frontend Preview?

imbue-ai (a GitHub organization) maintains it in imbue-ai/sculptor, which has 238 GitHub stars. The repository holds 29 skills in this directory. The repository was last updated on October 9, 2026.

Source: imbue-ai/sculptor on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.