Borrowing it
Nothing to install: this file belongs to tingly-dev/tingly-box. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/tingly-dev/tingly-box/main/.claude/skills/ui-preview/SKILL.mdgit clone --depth 1 https://github.com/tingly-dev/tingly-boxWrote 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.
[](https://agentmods.dev/skills/tingly-dev/tingly-box/ui-preview)<a href="https://agentmods.dev/skills/tingly-dev/tingly-box/ui-preview"><img src="https://agentmods.dev/badge/skills/tingly-dev/tingly-box/ui-preview/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/tingly-dev/tingly-box/ui-preview"><img src="https://agentmods.dev/badge/skills/tingly-dev/tingly-box/ui-preview.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00096 | $0.02009 |
| Opus 5.5 | $0.00038 | $0.00804 |
| Sonnet 5.5 | $0.00019 | $0.00402 |
| Haiku 4.5 | $0.00010 | $0.00201 |
Grade C, and why
ui-preview scanned grade C with 2 findings 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 27d 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.
Recursive force deletehighDestructive command
rm -rf with a variable or a broad path is one typo away from removing the wrong tree.
# polluted by npm — wipe it first with `rm -rf node_modules` if you suspect that). Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
curl -fsSL -o chrome.zip \ How it starts
The opening of the file, as written. The whole thing — 170 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Headless UI preview (Playwright + Chrome for Testing)
Designed for the remote-execution container where:
cdn.playwright.dev/dl.google.comare blocked — use Chrome for Testing viastorage.googleapis.com.- Ubuntu's
chromium-browseris a snap stub and won't run. - MCP servers can't be registered mid-session — use Playwright's Node API directly.
Setup (run once per fresh container)
⚠️ This project uses pnpm (
frontend/pnpm-lock.yamlis the source of truth). Do NOT runnpm ihere — npm ignores the pnpm lockfile and re-resolves transitive deps, which pulls broken versions (e.g.[email protected]vs the pinned1.46.1) that crash the whole SPA at load. See Troubleshooting below.
playwright is already a committed devDependency in frontend/package.json, so
a plain install provides it — no ad-hoc add/revert needed. @emotion/react /
@emotion/styled are likewise already declared.
# 1. Install deps from the lockfile (also fixes a node_modules previously
# polluted by npm — wipe it first with `rm -rf node_modules` if you suspect that).
cd frontend
pnpm install --frozen-lockfile
# 2. Download Chrome for Testing (Playwright's own Chromium download is blocked)
mkdir -p /tmp/chrome && cd /tmp/chrome
curl -fsSL -o chrome.zip \
"https://storage.googleapis.com/chrome-for-testing-public/148.0.7778.96/linux64/chrome-linux64.zip"
unzip -q chrome.zip # → /tmp/chrome/chrome-linux64/chrome
Do NOT modify frontend/package.json / frontend/pnpm-lock.yaml for tooling
anymore — everything needed is already committed. If a previous session left them
dirty (or npm polluted the tree), reset with:
cd <repo> && git checkout -- frontend/package.json frontend/pnpm-lock.yaml
pnpm -C frontend install --frozen-lockfile
Dev server
cd frontend
USE_MOCK=true node_modules/.bin/vite --mode mock --port 3000 &
until curl -fs http://localhost:3000 >/dev/null; do sleep 1; done
USE_MOCK=true must be a shell env var (read by vite.config.ts before .env.mock).
What ships with it
4 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 27d ago Changed · +20 lines 9b50d18e9c3e
- 1mo ago Changed c66948c38e22
- 1mo ago Changed · +15 lines 61e97b50897c
- 1mo ago First seen · 135 lines · 96 tokens per session scan C 5821600675b4
ui-preview is a skill published in the GitHub repository tingly-dev/tingly-box (367 stars, last pushed today), licensed MPL-2.0. It adds 96 tokens to every session and 2,009 once invoked, about $0.0004 per session on Opus 5.5. A static security scan graded it C with 2 findings (recursive force delete, makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
e2e-testing
Playwright E2E testing patterns, Page Object Model, configuration, CI/CD integration, artifact management, and flaky test strategies. Use when writing Playwright tests, structuring page objects, or fixing flaky E2E runs in CI.
browser-qa
Use this skill to automate visual testing and UI interaction verification using browser automation after deploying features.
e2e-testing
Playwright E2E testing patterns, Page Object Model, configuration, CI/CD integration, artifact management, and flaky test strategies. Use when writing Playwright tests, structuring page objects, or fixing flaky E2E runs in CI.
dogfood
Exploratory QA of web apps: find bugs, evidence, reports.
playwright-cli
Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.
langbot-testing
Test LangBot WebUI and core product flows with an automated browser and backend logs. Use when validating the configured LangBot frontend, pipeline Debug Chat, model provider setup and test buttons, bot and knowledge-base UI flows, or troubleshooting failed LangBot end-to-end tests.