UI Preview

What it does

When your agent uses it

• The user asks to preview
• Verify visually
• Frontend layout / component / styling changes need a sanity-check before review

Example prompts

• “preview”
• “screenshot”
• “see the page”
• “/ui-preview”

Requirements

• Node.js

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

1. 1SendUserFile the PNGs so the user can review them.
2. 2For ad-hoc screenshot.mjs: delete it before committing — the stop hook will flag it.
3. 3docs/ is gitignored; force-add images: git add -f docs/images/.
4. 4Free the port: fuser -k 3000/tcp or pkill -f "vite --mode mock".

What it can do on your machine

Read from SKILL.md and the folder at commit b95951a. 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

  Ships script files (JavaScript), which the agent can run.

  Shell commands in SKILL.md call:

  • pnpm
  • git
  • curl
  • npm

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

• Network

  Hosts in commands or code, which the agent is likely to contact:

  • storage.googleapis.com

  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

UI Preview loads about 2k tokens when it runs. Until then it costs about 118 tokens; SKILL.md has 745 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~118

When it runs · the whole SKILL.md, loaded when a task matches

~2k

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

• NoteMentions a .env fileSKILL.md:53

  nv var (read by `vite.config.ts` before `.env.mock`).

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 tingly-dev/tingly-box at commit b95951a, republished under its MPL-2.0 licence (© tingly-dev). 745 words, ~1,968 tokens.

name

ui-preview

description

Capture headless-Chrome screenshots of the tingly-box frontend (running locally in mock mode) so frontend changes can be visually verified in environments without a real browser. Use when the user asks to "preview", "screenshot", "see the page", "show me the UI", "verify visually", or when frontend layout / component / styling changes need a sanity-check before review. Works in restricted/cloud sandboxes where Playwright's normal Chromium install is blocked.

# 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

cd <repo> && git checkout -- frontend/package.json frontend/pnpm-lock.yaml
pnpm -C frontend install --frozen-lockfile

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

await page.addInitScript(() => {
    localStorage.setItem('user_auth_token', 'mock-token-for-screenshots');
});

await page.goto('http://localhost:3000/agent/openai?mockOnboarding=on', { waitUntil: 'networkidle' });

await page.goto('http://localhost:3000/credentials?mockData=newcomer', { waitUntil: 'networkidle' });

import { createRequire } from 'module';
const { chromium } = createRequire('file://' + process.cwd() + '/')('playwright');

cd frontend
rm -rf node_modules node_modules/.vite        # drop the npm-polluted tree + dep cache
pnpm install --frozen-lockfile
# verify the pinned (working) version is what's on disk:
ls node_modules/.pnpm | grep es-toolkit       # expect es-toolkit@1.46.1, NOT 1.47.0
pnpm add -D playwright                         # re-add the tool

© tingly-dev, MPL-2.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 4 other files in .claude/skills/ui-preview of tingly-dev/tingly-box.

• SKILL.md
• docs-screenshots.mjs
• regression-credentials.mjs
• scenario-routing-graph.mjs
• screenshot.mjs

Open the folder on GitHubat commit b95951a