ui-previewlisted
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