New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Mailspring App Screenshots

by Foundry376 in Foundry376/Mailspring

Captures screenshots of the running Mailspring dev app for docs, PRs or visual checks by launching it with a debugging port, driving the UI and clipping to an element.

GPL-3.0Auto-check passedDevelopment

Install Mailspring App Screenshots

skills CLI
$ npx skills add Foundry376/Mailspring --skill app-screenshots -a claude-code

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

GitHub CLI
$ gh skill install Foundry376/Mailspring app-screenshots --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/Foundry376/Mailspring.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/app-screenshots .claude/skills/app-screenshots && 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
app-screenshots
GitHub stars
18k
Token cost
~1.5k tokens
SKILL.md length
692 words
Files
5 (incl. scripts)
Skills in repo
1
Repo updated
First seen
Licence
GPL-3.0

At a glance

Captures screenshots of the running Mailspring dev app for docs, PRs or visual checks by launching it with a debugging port, driving the UI and clipping to an element.

  • Works in 5 steps: Launch → Drive the UI → Capture an element → …
  • Taking screenshots of the Mailspring dev app for documentation
  • SKILL.md covers 1. Launch, 2. Drive the UI, 3. Capture an element and 4. Make the data presentable, plus 1 more section
  • Runs JavaScript and Python scripts from its folder; calls node and curl

What it does

The skill works around a blocked screencapture by using the Chrome DevTools Protocol against a dev build of the Electron app that was started with a remote debugging port. It first kills stray Electron and mailsync processes, because orphaned mailsync processes keep the SQLite database open and make later seed scripts fail silently, then launches the app and waits for the window and first sync. Code changes need a full relaunch, whereas edited LESS styles can be reloaded in place, and the window can be shrunk to a documentation-friendly size.

scripts/eval.mjs runs JavaScript in the main window and can capture the whole window or send a real mouse click, and scripts/shoot.mjs runs setup code and then clips one element by selector. The notes give tips for driving the UI: navigating to a sheet through app actions, picking dropdown items with mouse events, setting controlled input values so React notices, preferring real mouse events over synthetic clicks for hover and caret behavior, and waiting after each action. Further scripts anonymize on-screen data and seed tracking metadata.

When your agent uses it

  • Taking screenshots of the Mailspring dev app for documentation
  • Capturing a single UI element for a pull request
  • Verifying a visual change in the running app
  • Seeding or anonymizing data before a capture

Example prompts

  • “Take a screenshot of the activity sheet in the running Mailspring dev app for the PR description.”
  • “Capture only the preferences dialog, clipped to that element, with account data anonymized.”
  • “Relaunch the dev app with a debugging port and verify that the new toolbar button renders.”

Requirements

  • A Mailspring development build that runs under Electron
  • Node.js, run with the experimental WebSocket flag

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Launch
  2. Drive the UI
  3. Capture an element
  4. Make the data presentable
  5. Review before shipping

What it can do on your machine

Read from SKILL.md and the folder at commit 4ebb582. 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

    Ships 4 files in scripts/ (JavaScript and Python), which the agent can run.

    Shell commands in SKILL.md call:

    • node
    • curl

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

  • Network

    No URLs in SKILL.md. Its commands use curl, 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

Mailspring App Screenshots loads about 1.5k tokens when it runs. Until then it costs about 64 tokens; SKILL.md has 692 words of instructions outside code blocks.

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

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); the scripts in this folder are not scanned.

SKILL.md

The full file from Foundry376/Mailspring at commit 4ebb582, republished under its GPL-3.0 licence (© Foundry376). 692 words, ~1,485 tokens.

Download SKILL.mdSave it as .claude/skills/app-screenshots/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
app-screenshots
description
Capture screenshots of the running Mailspring dev app for docs, PRs, or visual verification — launching with a CDP port, driving the UI, anonymizing or seeding data, and clipping to an element. Use whenever a task needs a picture of the app.

Screenshots of the running app

screencapture is blocked in this environment (no Screen Recording permission), and the app has no test-id hooks. The reliable path is Chrome DevTools Protocol against a dev build launched with a remote-debugging port. Everything below runs from the repo root unless noted. Scripts live in .claude/skills/app-screenshots/scripts/.

1. Launch

Only one instance can run at a time, so check first. If one is running that you didn't start, it is probably the user's: ask before closing it.

bash
pgrep -fl "[Ee]lectron ./app"   # anything listed will be closed by the next line
pkill -f "[Ee]lectron ./app"; pkill -f "app/mailsync --mode sync"; sleep 2
(./node_modules/.bin/electron ./app --enable-logging --dev --remote-debugging-port=9333 > /tmp/app.log 2>&1 &)
sleep 18   # window + plugins + first sync
curl -s localhost:9333/json | grep -c webSocketDebuggerUrl   # >0 means ready
  • Always kill orphaned mailsync processes too; they outlive the Electron process and hold the SQLite DB open (a later seed script will silently fail to commit).
  • location.reload() does nothing in the renderer. Pick up renderer changes with AppEnv.commands.dispatch('window:reload'); main-process changes (app/src/browser) need a full relaunch. Edited LESS can be hot-loaded with AppEnv.themes.reloadCoreStyles().
  • For doc-sized captures, shrink the window first: AppEnv.getCurrentWindow().setSize(1280, 800).

2. Drive the UI

scripts/eval.mjs evaluates JS in the main window (picks the target whose document.body.className contains window-type-default) and optionally captures the whole window or dispatches a real mouse click:

bash
node --experimental-websocket scripts/eval.mjs "<js>" [out.png] [clickX clickY]

Useful snippets inside the JS:

  • Navigate to a sheet: $m.Actions.focusMailboxPerspective(new (require('../internal_packages/activity/lib/activity-mailbox-perspective').default)($m.FocusedPerspectiveStore.sidebarAccountIds()))
  • Pick from a DropdownMenu: click .dropdown-menu > div, wait 300ms, then find the item by text under .menu div and dispatch mousedown and click on it.
  • Drive a controlled <input>: set the value through Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set and dispatch input; plain .value = doesn't reach React.
  • Test real selection/hover behaviour with the click args (Input.dispatchMouseEvent), not synthetic el.click() — the two differ for caret placement and :hover.
  • Wait after every action; the Reports tab has a 2s minimum "thinking" cover.

3. Capture an element

scripts/shoot.mjs runs setup JS, then captures one element by selector using Page.captureScreenshot with a clip in CSS px:

bash
node --experimental-websocket scripts/shoot.mjs "<setup-js>" "<selector>" out.png [pad] [maxHeight]
  • scale: 1 already yields device pixels (2x on retina). Don't pass scale: 2 — that produces 4x images.
  • Clip by element rect; don't crop afterwards with sips -c, which crops from the centre and pads with black. Use maxHeight to trim tall columns instead.
  • Connecting a CDP session blurs the window (body.is-blurred, greyed traffic lights). The script strips the class before capturing.
  • Popovers close on blur. Open the popover inside the same setup-js that the capture runs in, never in a previous invocation, and never call activeElement.blur() to remove the focus ring — inject a <style> with outline: none !important instead.

4. Make the data presentable

Show full SKILL.md (307 more words)Show less
Anonymize what's on screen

The dev mailbox contains real correspondents. Before any capture that leaves the machine, rewrite the rendered DOM: scripts/anonymize.example.js walks every text node and title attribute and applies a regex map. Copy it, edit the map for the current mailbox, and pass its contents as the setup-js (after the view has loaded).

  • React splits text into separate nodes, so match whole-node values (/^ben$/) rather than phrases (/ben opened/).
  • Replace links with example.com paths and your own accounts with you@gmail.com / you@yourcompany.com; sidebar account headers are text nodes too.
  • Re-run the anonymizer after any action that re-renders (tab switch, dropdown).
Seed the database when there's nothing to show

scripts/seed-tracking-metadata.py writes fake open/click metadata onto real sent messages. Pattern for any similar seeding:

  1. Stop the app and mailsync; cp edgehill.db edgehill.db.bak-<reason>.
  2. Write both places the UI reads from — the model's JSON blob (Message.data, metadata array) and the join table (ModelPluginMetadata) that queries filter on.
  3. Keep timestamps relative to the message's own date so "N days after sending" and relative times look sane.
  4. Tell the user where the backup is; the DB is ~1GB.
Stage a specific layout

For illustrative shots (e.g. every kanban column populated) it's fine to move or clone rendered nodes with DOM APIs in the setup JS — but React will throw on its next re-render because its tree no longer matches. So: take staged captures last, one per launch, and relaunch before doing anything interactive again. A blank/"loading" view right after staging is that crash, not a product bug.

5. Review before shipping

Read every PNG back (the Read tool renders images). Things that slipped past otherwise: focus rings, blurred title bars, un-anonymized names in a second text node, a broken <img> from a guessed asset path (copy an existing icon's resolved src and swap the filename), and letterboxed crops.

© Foundry376, GPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files (scripts) in .claude/skills/app-screenshots of Foundry376/Mailspring.

  • SKILL.md
  • scripts/anonymize.example.js
  • scripts/eval.mjs
  • scripts/seed-tracking-metadata.py
  • scripts/shoot.mjs

Open the folder on GitHubat commit 4ebb582

Compare with similar skills

Mailspring App Screenshots 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.

Mailspring App Screenshots compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Mailspring App Screenshots this skillFoundry376/Mailspring18k—~1.5kAutomated safety check: PassGPL-3.0
Electron App Automationvercel-labs/agent-browser44k5 repos~1.7kAutomated safety check: PassApache-2.0
OpenWork Electron Browser Automationdifferent-ai/openwork24k—~780Automated safety check: PassCustom licence
Electron Devtools Testingankitvgupta/exo496—~2.4kAutomated safety check: PassCustom licence
Interactive TestingPorabuild/Poracode114—~4.5kAutomated safety check: NotesApache-2.0
Go Pedantrychromedp/chromedp13k—~3.7kAutomated safety check: PassMIT

Similar skills

  • Electron App Automation

    vercel-labs/agent-browser

    Official

    Automates Electron desktop apps such as VS Code, Slack or Discord by connecting agent-browser to their Chrome DevTools Protocol port.

    44k GitHub starsUsed in 5 repos~1.7k tokens
    Productivity & AutomationAuto-check passed

  • OpenWork Electron Browser Automation

    different-ai/openwork

    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

  • Electron Devtools Testing

    ankitvgupta/exo

    Test the Electron app interactively using Chrome DevTools Protocol.

    496 GitHub stars~2.4k tokensUpdated 1 mo ago
    Productivity & AutomationAuto-check passed

  • Interactive Testing

    Porabuild/Poracode

    Run repeatable integration and smoke testing against the real Poracode Electron app through Chrome DevTools Protocol.

    114 GitHub stars~4.5k tokensUpdated today
    Testing & QAAuto-check: notes

  • Go Pedantry

    chromedp/chromedp

    This skill should be used when the user is writing Go code and needs guidance on Go-specific pedantry: error wrapping with fmt.Errorf and %w, interface design (accept interfaces return structs)…

    13k GitHub stars~3.7k tokensUpdated 2 days ago
    DevelopmentAuto-check passed

  • Docs Authoring

    TracecatHQ/tracecat

    A skill your agent uses when adding or updating documentation pages in an existing docs site.

    3.8k GitHub stars~3.1k tokensUpdated today
    DevelopmentAuto-check: notes

Works with

Categories

Questions about Mailspring App Screenshots

What does Mailspring App Screenshots do?

Captures screenshots of the running Mailspring dev app for docs, PRs or visual checks by launching it with a debugging port, driving the UI and clipping to an element. The skill works around a blocked screencapture by using the Chrome DevTools Protocol against a dev build of the Electron app that was started with a remote debugging port. It first kills stray Electron and mailsync processes, because orphaned mailsync processes keep the SQLite database open and make later seed scripts fail silently, then launches the app and waits for the window and first sync.

When should I use Mailspring App Screenshots?

Mailspring App Screenshots fits situations like: taking screenshots of the Mailspring dev app for documentation; capturing a single UI element for a pull request; verifying a visual change in the running app; seeding or anonymizing data before a capture.

How do I install Mailspring App Screenshots in Claude Code?

Run `npx skills add Foundry376/Mailspring --skill app-screenshots -a claude-code`. Or copy the skill folder (.claude/skills/app-screenshots in Foundry376/Mailspring) into .claude/skills/app-screenshots in your project. Claude Code loads it when a task matches its description.

How do I install Mailspring App Screenshots in Codex?

Run `npx skills add Foundry376/Mailspring --skill app-screenshots -a codex`. Or copy the skill folder (.claude/skills/app-screenshots in Foundry376/Mailspring) into .agents/skills/app-screenshots in your project. Codex loads it when a task matches its description.

Can I use Mailspring App Screenshots 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 Foundry376/Mailspring --skill app-screenshots -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/app-screenshots, .gemini/skills/app-screenshots, .github/skills/app-screenshots and .opencode/skills/app-screenshots in your project.

What does Mailspring App Screenshots need to run?

Going by SKILL.md and its folder, Mailspring App Screenshots needs JavaScript and Python for the scripts in its folder and the command-line tools its instructions call (node and curl). Our summary lists: A Mailspring development build that runs under Electron; Node.js, run with the experimental WebSocket flag.

Does Mailspring App Screenshots access the network?

SKILL.md contains no URLs. Its commands use curl, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Mailspring App Screenshots 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Mailspring App Screenshots use?

Mailspring App Screenshots is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Mailspring App Screenshots use?

About 1.5k tokens (SKILL.md is roughly 5.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 Mailspring App Screenshots?

Skills that share tags, products or a category with Mailspring App Screenshots: Electron App Automation (vercel-labs/agent-browser, 44k stars), OpenWork Electron Browser Automation (different-ai/openwork, 24k stars), Electron Devtools Testing (ankitvgupta/exo, 496 stars) and Interactive Testing (Porabuild/Poracode, 114 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Mailspring App Screenshots?

Foundry376 (a GitHub organization) maintains it in Foundry376/Mailspring, which has 17,892 GitHub stars. The repository was last updated on October 7, 2026.

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