ui-preview

Solid

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.

Web & Frontend 348 stars 40 forks Updated today MPL-2.0

Install

View on GitHub

Quality Score: 83/100

Stars 20%

Recency 20%

100

Frontmatter 20%

Documentation 15%

100

Issue Health 10%

License 10%

100

Description 5%

100

Skill Content

# 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...

Details

Author: tingly-dev
Repository: tingly-dev/tingly-box
Created: 9 months ago
Last Updated: today
Language: Go
License: MPL-2.0

Integrates with

Playwright · Testing Model Context Protocol · AI npm · DevTools

Similar Skills

Semantically similar based on skill content — not just same category

Testing & QA Listed

playwright-e2e

Test a frontend end-to-end with a headed or headless Playwright browser. Use when the user says use Playwright, test frontend E2E, browser test, inspect the UI, test this website, reproduce a frontend bug, verify a user flow, or check a web application.

0 Updated 3 weeks ago

jakkzz

AI & Automation Listed

playwright-cli

Disk-based Playwright QA scan for a running dev server or deployed site — screenshots, console-error capture, page-error capture, and same-origin link checks in one process with one compact report. Use this instead of an interactive Playwright-MCP navigate/snapshot loop whenever you're verifying a KNOWN site you (or a build pipeline) control — confirming a change renders, checking a build for console errors, screenshotting routes at multiple viewports, or catching broken internal links. Not for driving an unfamiliar third-party page (a competitor site, a social profile, a SaaS UI you don't control the markup of) or anything needing live interaction (click, fill, drag) — that's still Playwright MCP.

5 Updated 5 days ago

ManceRayder42

Web & Frontend Featured

playwright

Drive a real browser from the terminal to scrape pages, extract structured data (reviews, comments, listings, tables), capture batch screenshots, fill forms, save pages as PDF, and walk JavaScript-heavy or login-gated sites that plain HTTP scrapers can't reach. Built on `playwright-cli` with a snapshot-then-ref interaction model that survives DOM changes far better than CSS selectors.

192 Updated today

edison7009