一键在 Manus 中运行任何 Skill

capture-screenshots

星标2

分支14

更新时间2026年7月2日 07:02

Capture consistent Mergify dashboard screenshots for the docs site using Chrome browser automation, save them to the correct images/ directory, and emit the ready-to-paste astro:assets import and <Image> tag with alt text. Use when adding or refreshing a dashboard/app screenshot in docs, when a docs page needs a UI image, or when asked to screenshot app.mergify.com for documentation. Drives the claude-in-chrome MCP tools against the user's existing logged-in Chrome session.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

Mergifyio

Mergifyio/docs

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Capture Dashboard Screenshots

Produce clean, consistent screenshots of the Mergify dashboard (dashboard.mergify.com) and wire them into a docs page.

Two ways to capture

Prefer the internal Playwright tool for batch or unattended captures. The capture tool in the Mergifyio/skills repo runs headless Chromium at deviceScaleFactor: 2 and writes PNG bytes straight to disk. It owns the session/auth handling, which is intentionally kept out of this public repo.

Use the interactive Chrome path below when you are working alongside the user — exploring the dashboard, framing a one-off shot, or capturing a state that is easier to reach by clicking than by URL. It drives the claude-in-chrome MCP against the user's own logged-in session.

Either way, the docs-side conventions are the same: framing, directory/naming, and the <Image> wiring snippet — see references/conventions.md.

Prerequisite (interactive path)

The user must already be logged into dashboard.mergify.com in Chrome. This skill reuses the existing browser session through the claude-in-chrome MCP tools; it never handles credentials. If navigation lands on a login page, stop and ask the user to log in (! open https://dashboard.mergify.com), then continue.

Load the browser tools first

This skill targets the claude-in-chrome MCP server (a user/Claude Code-level MCP, not declared in this repo's .claude/mcp.json). The tool names below are its stable, documented interface. If you drive a different browser MCP, map each step to that server's equivalent capability — list tabs, create a tab, navigate, resize the window, run in-page JavaScript, read the page, capture a screenshot.

If the mcp__claude-in-chrome__* tools are deferred, load them in ONE ToolSearch call before anything else:

ToolSearch select:mcp__claude-in-chrome__tabs_context_mcp,mcp__claude-in-chrome__tabs_create_mcp,mcp__claude-in-chrome__navigate,mcp__claude-in-chrome__resize_window,mcp__claude-in-chrome__computer,mcp__claude-in-chrome__read_page,mcp__claude-in-chrome__javascript_tool

Workflow

Get tab context — call tabs_context_mcp first to see current tabs. Do NOT reuse an old tab unless the user asks; create a fresh one with tabs_create_mcp.
Set a standard window size — resize_window to the standard viewport (see references/conventions.md). Consistency across screenshots matters more than any single size.
Navigate — navigate to the target dashboard URL. Wait for the page to finish loading (read_page to confirm content is present).
Clean the frame — dismiss overlays that would pollute the shot (cookie banner, Intercom launcher, product tours). Use the dismissal snippets in references/conventions.md. NEVER trigger a JS alert/confirm/prompt — it freezes the extension.
Capture — take the screenshot with the computer tool. Frame the relevant region; capture the specific panel rather than the whole chrome when possible.
Save — write the image to src/content/docs/images/<section>/<page>/<kebab-name>.png following the naming convention.
Emit the snippet — output the ready-to-paste import + <Image> tag with drafted alt text (see below). Hand it back so it can be dropped into the MDX page (or applied directly if this was called from document-a-feature).

Output snippet format

import { Image } from "astro:assets"
import <camelCaseName> from "../../images/<section>/<page>/<kebab-name>.png"

<Image src={<camelCaseName>} alt="<what the screenshot shows, specifically>" />

Alt text describes what the reader sees and why it matters, not "screenshot of dashboard". Example: alt="Merge queue view showing two pull requests batched together".

Details

Read references/conventions.md for: the standard viewport sizes, theme handling (light by default), the overlay-dismissal snippets, the section/page/name directory convention, common dashboard URLs, and tips for stable, repeatable framing.

Guardrails

Stop and ask if: a page won't load, you hit a login wall, or a tool errors 2–3 times. Do not loop on a failing browser action.
Capture a couple of extra frames if recording a flow with gif_creator, for smooth playback.
Never commit screenshots that contain another customer's private data — use the user's own org or a demo org.

同仓库更多 Skills

同仓库

screenshot-scenarios

Mergifyio/docs

Produce meaningful Mergify dashboard screenshots for the docs by staging a real product state in the Mergifyio/sandbox repo, capturing it, then cleaning up. Use when a docs page needs a screenshot that shows an actual state (a queue with PRs, a batch, a freeze, priority ordering), when auditing which pages are missing or have stale screenshots, or when asked to build a scenario and screenshot it. Sets up state via gh + the mergify CLI, captures via the capture-screenshots skill, and tears the scenario down. Defers CI/Test Insights shots (they need real CI data). Composes with capture-screenshots, document-a-feature, docs-gap-analysis.

2026-07-132

docs-gap-analysis

Mergifyio/docs

Find undocumented or stale Mergify features by comparing what the product shipped against what the docs cover. Use when asked what is missing from the docs, to audit docs coverage, to find undocumented features, to check whether recent features/PRs are documented, or to plan documentation work. Gathers shipped-feature signal from merged PRs, Linear, and the changelog, maps it against src/content/docs/, and produces a prioritized gap report that feeds the document-a-feature skill.

2026-07-132

docs-from-code

Mergifyio/docs

Use the Mergify product source code (Mergifyio/monorepo) as the source of truth to verify or draft documentation. Use when checking whether a docs page matches how the product actually behaves, when a config key's default/enum/ behavior needs confirming against the implementation, when the schema and changelog disagree, or when drafting docs for a feature from its code/PR. Two modes: verify (audit docs against code) and draft (generate a code-grounded first draft). Reads a temporary local clone of the engine (Python/pydantic) and dashboard. Composes with proofread-technical, document-a-feature, and docs-gap-analysis.

2026-07-102

document-a-feature

Mergifyio/docs

End-to-end workflow for documenting a Mergify feature on the docs site. Use when asked to document a feature, write a new docs page, document a PR or Linear ticket, or add/update a page under src/content/docs/. Orchestrates placement, component selection, writing, site plumbing (navItems + redirects + SEO), and validation (proofread pipeline, config-example validation, build check). Composes with mdx-documentation, proofread-*, capture-screenshots, and validate-config-examples skills.

2026-07-022

validate-config-examples

Mergifyio/docs

Validate Mergify YAML configuration examples embedded in the docs against the real Mergify schema, so broken config snippets never ship. Use after editing docs pages that contain .mergify.yml / YAML examples, when reviewing a docs PR with config snippets, or when asked to check/validate config examples in the docs. Extracts YAML code fences, classifies them, and validates full Mergify configs with `mergify config validate` (optionally via the mergify:mergify-config skill when that plugin is installed).

2026-07-022

mdx-documentation

Mergifyio/docs

MDX and Astro documentation patterns for the Mergify docs site. Use when creating, editing, or reviewing documentation pages. Covers frontmatter, imports, components, and content structure.

2026-04-302

name

capture-screenshots

description

Capture consistent Mergify dashboard screenshots for the docs site using Chrome browser automation, save them to the correct images/ directory, and emit the ready-to-paste astro:assets import and <Image> tag with alt text. Use when adding or refreshing a dashboard screenshot in docs, when a docs page needs a UI image, or when asked to screenshot dashboard.mergify.com for documentation. Drives the claude-in-chrome MCP tools against the user's existing logged-in Chrome session.

Capture Dashboard Screenshots

Produce clean, consistent screenshots of the Mergify dashboard (dashboard.mergify.com) and wire them into a docs page.

Two ways to capture

Either way, the docs-side conventions are the same: framing, directory/naming, and the <Image> wiring snippet — see references/conventions.md.

Prerequisite (interactive path)

Load the browser tools first

If the mcp__claude-in-chrome__* tools are deferred, load them in ONE ToolSearch call before anything else:

ToolSearch select:mcp__claude-in-chrome__tabs_context_mcp,mcp__claude-in-chrome__tabs_create_mcp,mcp__claude-in-chrome__navigate,mcp__claude-in-chrome__resize_window,mcp__claude-in-chrome__computer,mcp__claude-in-chrome__read_page,mcp__claude-in-chrome__javascript_tool

Workflow

Get tab context — call tabs_context_mcp first to see current tabs. Do NOT reuse an old tab unless the user asks; create a fresh one with tabs_create_mcp.
Set a standard window size — resize_window to the standard viewport (see references/conventions.md). Consistency across screenshots matters more than any single size.
Navigate — navigate to the target dashboard URL. Wait for the page to finish loading (read_page to confirm content is present).
Clean the frame — dismiss overlays that would pollute the shot (cookie banner, Intercom launcher, product tours). Use the dismissal snippets in references/conventions.md. NEVER trigger a JS alert/confirm/prompt — it freezes the extension.
Capture — take the screenshot with the computer tool. Frame the relevant region; capture the specific panel rather than the whole chrome when possible.
Save — write the image to src/content/docs/images/<section>/<page>/<kebab-name>.png following the naming convention.
Emit the snippet — output the ready-to-paste import + <Image> tag with drafted alt text (see below). Hand it back so it can be dropped into the MDX page (or applied directly if this was called from document-a-feature).

Output snippet format

import { Image } from "astro:assets"
import <camelCaseName> from "../../images/<section>/<page>/<kebab-name>.png"

<Image src={<camelCaseName>} alt="<what the screenshot shows, specifically>" />

Alt text describes what the reader sees and why it matters, not "screenshot of dashboard". Example: alt="Merge queue view showing two pull requests batched together".

Details

Guardrails

Stop and ask if: a page won't load, you hit a login wall, or a tool errors 2–3 times. Do not loop on a failing browser action.
Capture a couple of extra frames if recording a flow with gif_creator, for smooth playback.
Never commit screenshots that contain another customer's private data — use the user's own org or a demo org.