browser-screenshots

스타2

포크0

업데이트2026년 7월 26일 04:51

Capture and persist browser screenshots or GIFs for visual review of a web UI. Use when verifying a UI change visually, reviewing a page's design or layout, recording a multi-step interaction (dropdown, hover, form flow), toggling dark mode for a comparison shot, or when a screenshot needs to be written to disk rather than only shown inline.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

출처

KyleKing

KyleKing/dotfiles

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Browser screenshots

Ask for a target directory at the start of any visual review session if one has not been specified.

Picking a capture method

Try in this order. Each fallback exists because the one above it fails in a specific, known way.

gif_creator for any multi-step interaction. One GIF per feature is clearer than several stills, and it actually writes a file to disk and returns the path. It only works on the agent's managed tab group — in a regular browser session it fails with "not in managed tab group".
computer / zoom for a single still that only needs to be seen inline. save_to_disk: true does not write a file despite the name; it only embeds the image in the conversation. When the target is a <canvas>, javascript_tool can read it out (canvas.toDataURL()) for the Write tool; anything else that needs a disk file goes to method 3.
mss stills driven from Bash, when gif_creator is unavailable or the shot must land on disk. Full procedure in mss-capture.md.

Dark mode

Check how the app themes before toggling. The class toggle below covers Tailwind-style .dark setups; apps keyed off prefers-color-scheme or a data-theme attribute need window.matchMedia emulation or the attribute set instead.

document.documentElement.classList.add('dark')     // or .remove('dark')

Methods that do not work

Do not spend turns rediscovering these.

screencapture -x in Bash — the shell process lacks screen recording permission
html2canvas — fails on the modern CSS color() function, which many design systems use
tell application "Google Chrome" to activate on its own — picks the wrong window when several are open; use the URL-matching loop in mss-capture.md

이 저장소의 다른 Skills

같은 저장소

copier-template

KyleKing/dotfiles

Run and troubleshoot copier updates in a project generated from one of the user's templates, and maintain the templates themselves. Use when a task mentions copier, copier update, .copier-answers.yml, .rej files after an update, ctt or copier-template-tester, or one of calcipy_template, mdformat-plugin-template, my_go_template, or app-template.

2026-07-262

hk-config

KyleKing/dotfiles

Audit or write an hk.pkl config (jdx/hk git hooks). Use when creating hk.pkl, upgrading the pinned hk version, adding a linter step, or when fixes made by a pre-commit hook are not being staged. Covers version pinning, staging semantics, builtins, and DRY structure.

2026-07-262

observability-clis

KyleKing/dotfiles

Query PostHog error tracking and Sentry issues from the command line. Use when asked what errors are happening, which errors are being missed or untriaged, for production error rates or impact by user, or whenever posthog-cli or sentry-cli is mentioned.

2026-07-262

orchestrate

KyleKing/dotfiles

Work a multi-phase plan to completion with subagents, checkpoint commits, and questions back to the user. Invoke explicitly with a plan document.

2026-07-262

python-async

KyleKing/dotfiles

Async Python conventions and footguns — asyncio.TaskGroup over gather, event-loop-bound primitives, offloading blocking work to threads or processes, cancellation across the thread boundary, and dedicated executors. Use when writing or reviewing async def, await, asyncio.to_thread, run_in_executor, create_task, async generators, or when diagnosing a stalled event loop, a "bound to a different event loop" error, or latency that only appears under load.

2026-07-262

writing-voice

KyleKing/dotfiles

The user's full writing system for prose they author — README and docs text, landing copy, PR and commit descriptions, Linear proposals, design docs, Slack and email messages. Use when drafting or rewriting any human-facing prose, when a draft reads like AI wrote it, when stripping AI slop from documentation, or when relaying research output into a human-facing surface. CLAUDE.md carries the compressed rules; this carries the reasoning, the before/after pairs, and the per-format shapes.

2026-07-262

name	browser-screenshots
description	Capture and persist browser screenshots or GIFs for visual review of a web UI. Use when verifying a UI change visually, reviewing a page's design or layout, recording a multi-step interaction (dropdown, hover, form flow), toggling dark mode for a comparison shot, or when a screenshot needs to be written to disk rather than only shown inline.

Browser screenshots

Ask for a target directory at the start of any visual review session if one has not been specified.

Picking a capture method

Try in this order. Each fallback exists because the one above it fails in a specific, known way.

gif_creator for any multi-step interaction. One GIF per feature is clearer than several stills, and it actually writes a file to disk and returns the path. It only works on the agent's managed tab group — in a regular browser session it fails with "not in managed tab group".
computer / zoom for a single still that only needs to be seen inline. save_to_disk: true does not write a file despite the name; it only embeds the image in the conversation. When the target is a <canvas>, javascript_tool can read it out (canvas.toDataURL()) for the Write tool; anything else that needs a disk file goes to method 3.
mss stills driven from Bash, when gif_creator is unavailable or the shot must land on disk. Full procedure in mss-capture.md.

Dark mode

document.documentElement.classList.add('dark')     // or .remove('dark')

Methods that do not work

Do not spend turns rediscovering these.

screencapture -x in Bash — the shell process lacks screen recording permission
html2canvas — fails on the modern CSS color() function, which many design systems use
tell application "Google Chrome" to activate on its own — picks the wrong window when several are open; use the URL-matching loop in mss-capture.md