Ejecuta cualquier Skill en Manus
con un clic

Ejecuta cualquier Skill en Manus con un clic

screenshot

Estrellas7

Forks1

Actualizado8 de mayo de 2026 a las 19:58

Take a screenshot of a running web application using Playwright and Chromium. Offers to attach the screenshot as a PR comment.

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Ejecutar en Manus

Fuente

mccurdyc

mccurdyc/nixos-config

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ejecutar en Manus

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Desarrolladores de softwareOcupaciones informáticas y matemáticas·SOC 15-1252

SKILL.md

readonly

name	screenshot
description	Take a screenshot of a running web application using Playwright and Chromium. Offers to attach the screenshot as a PR comment.
user-invocable	true

Screenshot Skill

Take a screenshot of a locally running web application.

Workflow

Ask if the local dev environment is already running.
- If yes, ask for the URL (default: http://localhost:3000).
- If no, ask the user how to start it, then run the provided command and wait for the server to be ready before proceeding.

Install Playwright and Chromium to a temp directory.

npm install --prefix /tmp/pw playwright
npx --prefix /tmp/pw playwright install chromium

Take the screenshot with a Node.js script using the Playwright API.

Write a script (e.g., /tmp/pw/screenshot.mjs):

import { chromium } from '/tmp/pw/node_modules/playwright/index.mjs';

const url = process.argv[2] || 'http://localhost:3000';
const outputPath = process.argv[3] || 'screenshot.png';

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1600, height: 900 } });
await page.goto(url, { waitUntil: 'networkidle' });
await page.waitForTimeout(8000); // extra wait for JS-heavy apps (dashboards, SPAs)
await page.screenshot({ path: outputPath, fullPage: true });
await browser.close();

Run it:

node /tmp/pw/screenshot.mjs "<URL>" screenshot.png

Adjust wait time and viewport as needed:

For simple apps, reduce waitForTimeout to 2000–3000ms.
For dashboards (Grafana, etc.), keep 8000ms or more so panels finish fetching data and rendering.
If the user requests a specific viewport, change the width/height.
If the user wants a specific element, use page.locator('selector').screenshot() instead of full-page.

Show the screenshot to the user using the read tool on the resulting PNG file so they can verify it.
Ask if the user wants the screenshot added as a comment on the current pull request.
- If yes, determine the current PR number:
```
gh pr view --json number -q .number
```
- Commit the screenshot to the branch and push, then comment with an image reference:
```
git add screenshot.png
git commit --no-gpg-sign -m "docs: add screenshot"
git push
gh pr comment <number> --body "## Screenshot\n\n![screenshot](screenshot.png)"
```
- Alternatively, if the user prefers not to commit the file to the repo, upload it externally and reference the URL in the comment.

Notes

Use Chromium, not Firefox. The Playwright Firefox build has compatibility issues with JS-heavy apps (e.g., Grafana fails to load application files).
Use the programmatic API, not the Playwright CLI. The API gives control over viewport, wait conditions, selectors, and timeouts.
Always use waitUntil: 'networkidle' plus an additional timeout for apps that render asynchronously after initial load.
Install to /tmp/pw to avoid polluting the project directory.
Clean up screenshot files after they are uploaded unless the user says otherwise.

Más de este repositorio

mismo repositorio

atlassian

mccurdyc/nixos-config

Interact with Jira and Confluence. Use the Atlassian MCP server tools when available, otherwise fall back to the jira CLI.

2026-07-207

go-do

mccurdyc/nixos-config

Goal-driven execution. Breaks a task into phases with verification, parallelizes via subagents, and iterates until the outcome is achieved. Triggers: 'go-do', 'goal-driven', 'achieve this', 'make it so'.

2026-06-097

git-worktree

mccurdyc/nixos-config

Do work in an isolated git worktree instead of switching branches. Use when creating a branch and opening a PR so the user's working directory is never disturbed. Triggers: 'create a branch', 'open a PR', 'make a change on a new branch'.

2026-05-217

demo-recording

mccurdyc/nixos-config

Record a demo of a web application or terminal session. Uses Playwright for browser recordings and VHS for terminal recordings. Offers to attach the resulting GIF/video as a PR comment.

2026-05-207

interactive-questionnaire

mccurdyc/nixos-config

Start an interactive questionnaire when there are more than 5 options or bullet points that need to be addressed. Uses the ask_user tool to walk through selections interactively instead of dumping a wall of text.

2026-05-207

review

mccurdyc/nixos-config

Code review mode. Read and analyze code, PRs, and issues. All GitHub write operations are prohibited.

2026-05-127

Screenshot Skill

Take a screenshot of a locally running web application.

Workflow

Ask if the local dev environment is already running.

If yes, ask for the URL (default: http://localhost:3000).
If no, ask the user how to start it, then run the provided command and wait for the server to be ready before proceeding.

Install Playwright and Chromium to a temp directory.

npm install --prefix /tmp/pw playwright
npx --prefix /tmp/pw playwright install chromium

Take the screenshot with a Node.js script using the Playwright API.

Write a script (e.g., /tmp/pw/screenshot.mjs):

import { chromium } from '/tmp/pw/node_modules/playwright/index.mjs';

const url = process.argv[2] || 'http://localhost:3000';
const outputPath = process.argv[3] || 'screenshot.png';

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1600, height: 900 } });
await page.goto(url, { waitUntil: 'networkidle' });
await page.waitForTimeout(8000); // extra wait for JS-heavy apps (dashboards, SPAs)
await page.screenshot({ path: outputPath, fullPage: true });
await browser.close();

Run it:

node /tmp/pw/screenshot.mjs "<URL>" screenshot.png

Adjust wait time and viewport as needed:

For simple apps, reduce waitForTimeout to 2000–3000ms.
For dashboards (Grafana, etc.), keep 8000ms or more so panels finish fetching data and rendering.
If the user requests a specific viewport, change the width/height.
If the user wants a specific element, use page.locator('selector').screenshot() instead of full-page.

Show the screenshot to the user using the read tool on the resulting PNG file so they can verify it.

Ask if the user wants the screenshot added as a comment on the current pull request.

If yes, determine the current PR number:
```
gh pr view --json number -q .number
```

Commit the screenshot to the branch and push, then comment with an image reference:

git add screenshot.png
git commit --no-gpg-sign -m "docs: add screenshot"
git push
gh pr comment <number> --body "## Screenshot\n\n![screenshot](screenshot.png)"

Alternatively, if the user prefers not to commit the file to the repo, upload it externally and reference the URL in the comment.

Notes

Use Chromium, not Firefox. The Playwright Firefox build has compatibility issues with JS-heavy apps (e.g., Grafana fails to load application files).

Use the programmatic API, not the Playwright CLI. The API gives control over viewport, wait conditions, selectors, and timeouts.

Always use waitUntil: 'networkidle' plus an additional timeout for apps that render asynchronously after initial load.

Install to /tmp/pw to avoid polluting the project directory.

Clean up screenshot files after they are uploaded unless the user says otherwise.