browser-preview

browser-preview is a skill for Claude Code, Codex from zts212653/clowder-ai. It costs 72 tokens per session (2,702 once invoked), scanned A, original, MIT.

Instructions for previewing a local web application in an embedded browser panel. They cover starting a development server, checking its status, opening the preview, and seeing code changes refresh automatically.

In plain words
What is it for?
Use them when writing or adjusting frontend code, viewing a running localhost page, checking whether its server is managed correctly, and reviewing UI changes with hot reload.
Why use it?
They remove the need to switch tools or manually enter a local address while checking frontend work.

Skill for Claude CodeCodex

About the project

Clowder AI is a self-hosted workspace where AI agents from different model families work together as a persistent team, retaining identities, shared evidence, and memory across tasks. It is for people who want to coordinate multiple AI agents without repeatedly rebuilding their context.

zts212653/clowder-ai · 2,880 stars · on GitHub

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/zts212653/clowder-ai/browser-preview
Any agent
npx skills add zts212653/clowder-ai --skill browser-preview
Clone the repo
git clone --depth 1 https://github.com/zts212653/clowder-ai

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for browser-preview

README.md
[![agentmods](https://agentmods.dev/badge/skills/zts212653/clowder-ai/browser-preview.svg)](https://agentmods.dev/skills/zts212653/clowder-ai/browser-preview)
Your own site
<a href="https://agentmods.dev/skills/zts212653/clowder-ai/browser-preview"><img src="https://agentmods.dev/badge/skills/zts212653/clowder-ai/browser-preview.svg" alt="Measured on agentmods" height="20"></a>
Per session 72 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,702 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 1 finding. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00072 $0.02702
Opus 5 $0.00036 $0.01351
Sonnet 5 $0.00014 $0.00540
Haiku 4.5 $0.00007 $0.00270

Measured 5d ago against content hash 9c77315a75ee, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

browser-preview scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

curl -s -o /dev/null -w "%{http_code}" http://localhost:PORT
cat-cafe-skills/browser-preview/SKILL.md · 155 lines

How it starts

The opening of the file, as written. The whole thing — 155 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Browser Preview

Hub 内置了嵌入式浏览器面板(F120),可以直接预览运行中的 localhost 应用。猫猫写完前端代码不用让operator切浏览器看效果。

工作流

基础流程(端口发现 → 预览)

  1. 启动 dev server:交互 Terminal 可直接前台跑;要把页面交给operator跨回合查看时,猫的 invocation/-p 会话必须用仓库的 managed launcher: pnpm preview:process start --port PORT --cwd /absolute/project/path -- COMMAND [ARGS...] macOS 上它会把目标直接注册为一次性 user LaunchAgent;普通 detached child、nohupsetsid 或 PTY 都不算独立托管。
  2. Hub 自动检测端口 → 弹出 toast 提示"检测到 localhost:xxxx 启动"
  3. 点击 Open Preview → 自动打开 browser panel 并加载页面
  4. 也可以手动:切到 workspace 的 Browser tab,输入 localhost:port 按 Go

改代码 → HMR 热更新 → browser panel 内页面自动刷新,无需手动操作。

猫主动打开浏览器(Phase C — 必须掌握)

operator说过:"别手动让我输入,你最好打开浏览器,把页面放出来。"

猫应该主动替operator打开浏览器,不要等operator点 toast 或手动输 URL。

调用步骤(按顺序执行,不要跳步)
Step 1: 确认目标服务器在跑
  若由猫启动,先用 managed launcher 启动/查状态:
  pnpm preview:process start --port PORT --cwd /absolute/project/path -- COMMAND [ARGS...]
  pnpm preview:process status --port PORT --cwd /absolute/project/path --json
  → 只有 status=running 才进入下步;unavailable/unmanaged/stopped 必须如实报告
  → macOS 跨回合展示还必须有 origin=launchd;origin=detached 只证明 launcher 已退出,
    没证明脱离 invocation supervisor,不得承诺“回复后还会活着”
  curl -s -o /dev/null -w "%{http_code}" http://localhost:PORT
  → 200/301/304 = 可以继续
  → 000/connection refused = 服务器没起来,先启动再说

Step 2: 调用 typed MCP
  cat_cafe_preview_open({
    port: PORT,
    path: "/",
    worktreeId: "当前 worktreeId(有就传)",
    threadId: "当前 threadId(有就传)"
  })

Step 3: 读返回的 deliveryStatus,再决定怎么报告
  → applied     = Hub 前端真实接收并应用了(面板已打开)——只有这时才能说"已打开"
  → queued      = 目标 thread 不在前台,已写入其 ThreadState;切到该 thread 自动揭示
  → blocked     = presentation lock 等阻止了展示(看 deliveryReason)
  → unconfirmed = 没有任何 Hub 客户端确认送达(没连接 / 无匹配 client)——必须如实说"未能确认打开"

admission ≠ visibleallowed: true 只证明服务端受理了请求。报告"已打开"之前必须看到 deliveryStatus: "applied"

running ≠ durable:同一 invocation 内的 status: "running" 只证明当前可达。macOS 只有 origin: "launchd" 才证明已经交给用户会话级服务管理;“确实跨回合存活”必须由后续 invocation 的 status/HTTP 探针或operator现场画面确认。

Read the full file on GitHub · 155 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 5d ago First seen · 155 lines · 72 tokens per session scan A 9c77315a75ee

Subscribe to this mod's changes

browser-preview is a skill published in the GitHub repository zts212653/clowder-ai (2,880 stars, last pushed yesterday), licensed MIT. It adds 72 tokens to every session and 2,702 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

use-agent-browser-for-airi

Test AIRI display-model imports with agent-browser across stage-tamagotchi Electron, stage-web, and stage-pocket mobile web layouts. Use when uploading and verifying contributor-supplied Live2D ZIP, VRM, or MMD ZIP/PMX/PMD files through AIRI's model selector, including onboarding bypass, format-specific import…

moeru-ai/airi · 87 tokens

opencli-sitemap-author

Use when creating or maintaining OpenCLI site sitemaps: agent-facing navigation, page-state, action, workflow, API-reference, pitfall, and fallback knowledge for a website. Use after browser exploration discovers durable site context, when a sitemap is stale, or when promoting local site knowledge into the repo.

jackwener/OpenCLI · 67 tokens

webapp-testing

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

every-app/open-seo · 35 tokens

interactive-login

How to complete browser/interactive logins (aws / gh / glab / gcloud). The platform backgrounds the login poller so it survives the human's browser round-trip — and when that does NOT work.

yc-software/qm · 46 tokens

pinchtab-mcp

Use this skill when a task requires browser automation through PinchTab's MCP server connected to a remote browser instance. Covers navigation, element interaction, data extraction, form filling, multi-step flows, and session management via MCP tools.

pinchtab/pinchtab · 52 tokens

azure-messaging-webpubsub-java

Build real-time web applications with Azure Web PubSub SDK for Java. Use when implementing WebSocket-based messaging, live updates, chat applications, or server-to-client push notifications.

microsoft/skills · 43 tokens