← ClaudeAtlas

ui-previewlisted

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.
tingly-dev/tingly-box · ★ 306 · Web & Frontend · score 83
Install: claude install-skill tingly-dev/tingly-box
# Headless UI preview (Playwright + Chrome for Testing) Designed for the remote-execution container where: - `cdn.playwright.dev` / `dl.google.com` are blocked — use Chrome for Testing via `storage.googleapis.com`. - Ubuntu's `chromium-browser` is 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.yaml` is the source of truth). > Do **NOT** run `npm i` here — npm ignores the pnpm lockfile and re-resolves > transitive deps, which pulls **broken** versions (e.g. `es-toolkit@1.47.0` vs the > pinned `1.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. ```bash # 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 `fronte