Agent skill

Electron App Screenshot

by keybase in keybase/client

Takes a screenshot of a running Electron desktop app through playwright-cli over remote debugging, shrinks it and shows it so you can check the UI visually.

BSD-3-ClauseAuto-check passedTesting & QA

Install Electron App Screenshot

skills CLI
$ npx skills add keybase/client --skill electron-screenshot -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install keybase/client electron-screenshot --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/keybase/client.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skill/electron-screenshot .claude/skills/electron-screenshot && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
electron-screenshot
GitHub stars
9.3k
Token cost
~476 tokens
SKILL.md length
180 words
Files
1
Skills in repo
14
Repo updated
First seen
Licence
BSD-3-Clause

At a glance

Takes a screenshot of a running Electron desktop app through playwright-cli over remote debugging, shrinks it and shows it so you can check the UI visually.

  • Works in 5 steps: Attach (once per session; --persistent… → Select the main app window. Tab order is… → Take the screenshot → …
  • Taking a screenshot of the running Electron app to check the desktop UI
  • SKILL.md covers Prerequisites, Steps, Error Handling and Notes
  • Calls yarn

What it does

The skill attaches playwright-cli to an Electron app that was started with remote debugging on port 9222, using the KB_ENABLE_REMOTE_DEBUG flag in the project's desktop start command. It selects the main app window by listing the tabs and choosing the one whose URL contains main.html, never reusing a remembered tab index because the order is unstable, and confirms the choice by evaluating the page location.

It then saves a full-size PNG, resizes it to 800 pixels on the longest side with sips to save tokens, and displays it with the Read tool. If the picture shows the menubar or DevTools, it goes back to window selection. If playwright-cli cannot connect it suggests relaunching the app with remote debugging, and if sips fails it shows the full-size image.

When your agent uses it

  • Taking a screenshot of the running Electron app to check the desktop UI
  • Showing what the desktop app currently looks like
  • Verifying a visual change in the Electron client after an edit

Example prompts

  • “Take a screenshot of the Electron app and show it to me.”
  • “What does the desktop app look like after my CSS change?”
  • “Screenshot the main window of the desktop app; I think the sidebar is broken.”

Requirements

  • The Electron app running with remote debugging enabled on port 9222
  • playwright-cli
  • The sips tool for resizing, with a fallback to the full-size image

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Attach (once per session; --persistent is required for Electron)
  2. Select the main app window. Tab order is not stable, so never reuse a remembered index: run playwright-cli tab-list, playwright-cli…
  3. Take the screenshot
  4. Resize it for token efficiency
  5. Use the Read tool to display /tmp/electron-screenshot.png to the user. If it shows the menubar or DevTools instead of the main window, go…

What it can do on your machine

Read from SKILL.md and the folder at commit 81e93d6. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • yarn

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use yarn, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Electron App Screenshot loads about 476 tokens when it runs. Until then it costs about 60 tokens; SKILL.md has 180 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~60
When it runs · the whole SKILL.md, loaded when a task matches
~476

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from keybase/client at commit 81e93d6, republished under its BSD-3-Clause licence (© keybase). 180 words, ~476 tokens.

Download SKILL.mdSave it as .claude/skills/electron-screenshot/SKILL.md (or your agent's skills folder).
name
electron-screenshot
description
This skill should be used when the user asks to "take a desktop screenshot", "screenshot the electron app", "show me the desktop app", "what does the app look like", or mentions checking the Electron/desktop UI visually.

Take a screenshot of the running Electron app with playwright-cli and display it. The playwright-cli skill's "Connecting to the Electron App" section has the details on attaching and tab selection.

Prerequisites

The Electron app must be running with remote debugging enabled:

cd shared && KB_ENABLE_REMOTE_DEBUG=1 yarn desktop:start:hot

This launches Electron with --remote-debugging-port=9222.

Steps

  1. Attach (once per session; --persistent is required for Electron):

    PLAYWRIGHT_MCP_CDP_ENDPOINT=http://localhost:9222 playwright-cli open --persistent
  2. Select the main app window. Tab order is not stable, so never reuse a remembered index: run playwright-cli tab-list, playwright-cli tab-select <index> on the row whose URL contains main.html, and confirm with playwright-cli eval "location.href".

  3. Take the screenshot:

    playwright-cli screenshot --filename=/tmp/electron-screenshot-full.png
  4. Resize it for token efficiency:

    sips -Z 800 /tmp/electron-screenshot-full.png --out /tmp/electron-screenshot.png
  5. Use the Read tool to display /tmp/electron-screenshot.png to the user. If it shows the menubar or DevTools instead of the main window, go back to step 2.

Error Handling

  • If playwright-cli cannot connect, tell the user the Electron app may not be running with remote debugging. Suggest launching with cd shared && KB_ENABLE_REMOTE_DEBUG=1 yarn desktop:start:hot.
  • If sips fails, fall back to displaying the full-size screenshot directly.

Notes

  • 800px max dimension gives good legibility with ~90% token savings.

© keybase, BSD-3-Clause. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skill/electron-screenshot of keybase/client.

Open the folder on GitHubat commit 81e93d6

Compare with similar skills

Electron App Screenshot next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Electron App Screenshot compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Electron App Screenshot this skillkeybase/client9.3k—~476Automated safety check: PassBSD-3-Clause
Evidence-Driven Testingmichaelshimeles/skills1.3k1 repos~3.9kAutomated safety check: PassNone
Windows QA EngineerCodeAlive-AI/ai-driven-development155—~1.4kAutomated safety check: PassMIT
Agentic Browser Testingpetrkindlmann/qa-skills163—~4.5kAutomated safety check: PassMIT
Parallels macOS VM Labsteipete/agent-scripts7.3k—~1.8kAutomated safety check: PassMIT
OpenWork Electron Browser Automationdifferent-ai/openwork24k—~780Automated safety check: PassCustom licence

Similar skills

  • Evidence-Driven Testing

    michaelshimeles/skills

    Records an annotated screen recording of the agent testing an app hands-on, then posts the video and a results summary to the PR and tracker issue.

    1.3k GitHub starsUsed in 1 repo~3.9k tokens
    Testing & QAAuto-check passed
  • Windows QA Engineer

    CodeAlive-AI/ai-driven-development

    A skill your agent uses when testing Windows 11 desktop apps (WinForms/WPF/UWP) via UFO UIA/Win32 automation MCP.

    155 GitHub stars~1.4k tokensUpdated yesterday
    Testing & QAAuto-check passed
  • Agentic Browser Testing

    petrkindlmann/qa-skills

    Goal-driven E2E testing where a browser agent (Playwright MCP / computer-use) reads a natural-language goal and explores the app via the accessibility tree to assert outcomes — no pre-written script.

    163 GitHub stars~4.5k tokensUpdated 3 mo ago
    Testing & QAAuto-check passed
  • Parallels macOS VM Lab

    steipete/agent-scripts

    Uses a clean Parallels macOS VM to test GUI automation, TCC permission prompts and screenshot tools like Peekaboo, verifying results from outside the guest.

    7.3k GitHub stars~1.8k tokensUpdated 2 days ago
    Testing & QAAuto-check passed
  • Attaches OpenCode browser tools to the OpenWork Electron dev app through CDP to explore its UI, send a composer task and debug, not to give test verdicts.

    24k GitHub stars~780 tokensUpdated today
    Testing & QAAuto-check passed
  • Steve

    mikker/steve

    Use the steve CLI to automate macOS apps via Accessibility APIs.

    170 GitHub stars~421 tokensUpdated 6 mo ago
    Testing & QAAuto-check passed

More from keybase/client

All 14 skills in this repo
  • Analyzes V8, Chrome and Electron .heapsnapshot files with Node scripts to find memory leaks, detached DOM nodes and the retainer paths that keep objects alive.

    9.3k GitHub stars~875 tokensUpdated today
    Auto-check passed
  • Analyzes Chrome or Electron DevTools Performance trace exports with Python scripts to find where render time actually goes, without opening DevTools.

    9.3k GitHub stars~809 tokensUpdated today
    Auto-check passed
  • Captures a clean Keybase service log and analyzes it for redundant, duplicated or looping RPCs, then checks whether a caching fix reduced the calls.

    9.3k GitHub stars~3k tokensUpdated today
    Auto-check passed
  • Parses a React DevTools Profiler JSON export with Python scripts to find re-render storms, commit fan-out and why a component rendered, without opening the DevTools UI.

    9.3k GitHub stars~978 tokensUpdated today
    Auto-check passed
  • Address PR Feedback

    keybase/client

    Fetches GitHub Copilot review feedback from inline threads and review bodies, checks each finding against the code and fixes the valid ones.

    9.3k GitHub stars~657 tokensUpdated today
    Auto-check passed
  • Guides writing and fixing end-to-end flow tests for the Keybase app on desktop with Playwright and on iOS with Appium and WebdriverIO, sharing one testID registry.

    9.3k GitHub stars~1.2k tokensUpdated today
    Auto-check passed

Questions about Electron App Screenshot

What does Electron App Screenshot do?

Takes a screenshot of a running Electron desktop app through playwright-cli over remote debugging, shrinks it and shows it so you can check the UI visually. The skill attaches playwright-cli to an Electron app that was started with remote debugging on port 9222, using the KB_ENABLE_REMOTE_DEBUG flag in the project's desktop start command.html, never reusing a remembered tab index because the order is unstable, and confirms the choice by evaluating the page location.

When should I use Electron App Screenshot?

Electron App Screenshot fits situations like: taking a screenshot of the running Electron app to check the desktop UI; showing what the desktop app currently looks like; verifying a visual change in the Electron client after an edit.

How do I install Electron App Screenshot in Claude Code?

Run `npx skills add keybase/client --skill electron-screenshot -a claude-code`. Or copy the skill folder (skill/electron-screenshot in keybase/client) into .claude/skills/electron-screenshot in your project. Claude Code loads it when a task matches its description.

How do I install Electron App Screenshot in Codex?

Run `npx skills add keybase/client --skill electron-screenshot -a codex`. Or copy the skill folder (skill/electron-screenshot in keybase/client) into .agents/skills/electron-screenshot in your project. Codex loads it when a task matches its description.

Can I use Electron App Screenshot in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add keybase/client --skill electron-screenshot -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/electron-screenshot, .gemini/skills/electron-screenshot, .github/skills/electron-screenshot and .opencode/skills/electron-screenshot in your project.

What does Electron App Screenshot need to run?

Going by SKILL.md and its folder, Electron App Screenshot needs the command-line tools its instructions call (yarn). Our summary lists: The Electron app running with remote debugging enabled on port 9222; playwright-cli; The sips tool for resizing, with a fallback to the full-size image.

Does Electron App Screenshot access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Electron App Screenshot safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Electron App Screenshot use?

Electron App Screenshot is published under the BSD-3-Clause licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Electron App Screenshot use?

About 476 tokens (SKILL.md is roughly 1.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Electron App Screenshot?

Skills that share tags, products or a category with Electron App Screenshot: Evidence-Driven Testing (michaelshimeles/skills, 1.3k stars), Windows QA Engineer (CodeAlive-AI/ai-driven-development, 155 stars), Agentic Browser Testing (petrkindlmann/qa-skills, 163 stars) and Parallels macOS VM Lab (steipete/agent-scripts, 7.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Electron App Screenshot?

keybase (a GitHub organization) maintains it in keybase/client, which has 9,257 GitHub stars. The repository holds 14 skills in this directory. The repository was last updated on October 7, 2026.

Source: keybase/client on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.