원클릭으로 Manus에서 모든 스킬 실행

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 저장소 열기 Creator 저장소 보기

다운로드

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 mergify-sandbox org, 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 the sandbox-org skill, 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-222

validate-config-examples

Mergifyio/docs

Validate Mergify YAML configuration examples embedded in the docs against the real Mergify config JSON 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. Runs `pnpm check:config-examples`, which extracts every YAML fence, classifies it, and validates the complete Mergify configs against public/mergify-configuration-schema.json.

2026-07-202

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

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.