← All skills

ui-preview

92 / 100 · Low risk

Fine to try.

By tingly-dev/tingly-box (GitHub) · design · 381 stars · scanned at commit 1f3554c

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.

Works with any agent that supports SKILL.md skills.

What this skill can do

Install

Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.

if [ -e ~/.agents/skills/'ui-preview' ] || [ -L ~/.agents/skills/'ui-preview' ]; then echo 'A skill folder named ui-preview already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/tingly-dev/tingly-box' "$d" && git -C "$d" checkout --quiet '1f3554c46b1d4a33d37b14fab449208ef9d2ad24' -- '.claude/skills/ui-preview' && mkdir -p ~/.agents/skills && cp -R "$d"/'.claude/skills/ui-preview' ~/.agents/skills/'ui-preview' && rm -rf "$d"; fi

Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'ui-preview' ~/.claude/skills/'ui-preview' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.

Badge for your README

The badge for tingly-dev/tingly-box shows the score of its lowest-scoring skill.

[![SkillTrust](https://zalavijaysinh.github.io/skilltrust/badges/tingly-dev/tingly-box.svg)](https://zalavijaysinh.github.io/skilltrust/repos/tingly-dev/tingly-box/)

Score history