full-page-screenshot
por alirezarezvanifull-page-screenshot captura páginas completas de Chrome/Chromium como PNG mediante CDP, incluidas páginas largas, SPAs, contenido con carga diferida y pestañas con sesión iniciada. Úsalo con Node.js 22+, depuración remota de Chrome, --check, --list, captura de pestañas existentes o modo --url.
Este skill obtiene 82/100, por lo que es una opción sólida para usuarios del directorio que necesitan capturas de pantalla fiables de páginas completas en el navegador. Ofrece activadores claros, comandos prácticos y un script ejecutable, aunque conviene tener presentes los requisitos de configuración de la depuración remota de Chrome y Node.js 22+.
- Muy fácil de activar: el frontmatter cubre explícitamente capturas de páginas web completas, largas y de página entera.
- El flujo operativo es concreto, con comandos para comprobar el entorno, listar pestañas existentes, capturar pestañas abiertas o autenticadas y capturar una URL en una pestaña en segundo plano.
- Incluye un script independiente en Node.js que usa Chrome DevTools Protocol, lo que ofrece a los agentes reutilización práctica más allá de un prompt genérico.
- Requiere Node.js 22+ y Chrome/Chromium con la depuración remota activada, por lo que no es una experiencia de instalación y uso con un solo comando.
- No hay comando de instalación ni README en la ruta del skill, así que los usuarios pueden depender de las herramientas del directorio o de la estructura del repositorio para ubicar correctamente SKILL_DIR.
Descripción general de full-page-screenshot skill
Qué hace full-page-screenshot
full-page-screenshot es una skill de Browser Automation para capturar una página web completa como un único PNG, incluido el contenido que queda debajo del primer pliegue. Está construida sobre un script independiente de Node.js que se comunica con Chrome mediante Chrome DevTools Protocol, por lo que puede manejar páginas largas, contenido con carga diferida, aplicaciones de una sola página y páginas en las que una captura normal del viewport dejaría fuera la mayor parte del contenido.
Usuarios y tareas para los que encaja mejor
Instala esta skill si necesitas que un agente de IA genere capturas de página completa de forma fiable durante QA, revisión visual, documentación, auditorías de diseño, reportes de bugs, investigación competitiva o recorridos de producto autenticados. Es especialmente útil cuando la página de destino ya está abierta en Chrome, porque la skill puede listar las pestañas disponibles y capturar la pestaña seleccionada sin pedir al usuario que vuelva a recrear el estado de inicio de sesión.
Diferenciadores clave
El valor principal de la skill full-page-screenshot está en su fiabilidad operativa: usa Chrome DevTools Protocol directamente, no tiene dependencias externas más allá de Node.js 22+ y Chrome/Chromium, y admite tanto la captura de pestañas existentes como la captura basada en URL. El flujo con pestañas existentes es el diferenciador importante para dashboards autenticados, entornos de staging y páginas detrás de SSO.
Restricciones de adopción que conviene comprobar primero
Antes de instalarla, confirma que tu entorno puede ejecutar Node.js 22+ y que la depuración remota de Chrome está disponible. La skill no es una API alojada de capturas de pantalla y no evita autenticación, CAPTCHAs, restricciones de red local, banners de cookies ni páginas que bloquean intencionadamente la automatización. Funciona mejor cuando el usuario puede abrir la página normalmente en Chrome y permitir que el agente la capture desde ahí.
Cómo usar full-page-screenshot skill
Instalación de full-page-screenshot y comprobación inicial
Instala la skill desde la ruta del repositorio:
npx skills add alirezarezvani/claude-skills --skill full-page-screenshot
Después de instalarla, empieza por SKILL.md y luego revisa scripts/full-page-screenshot.mjs. El script es la capa de ejecución, así que merece la pena leerlo antes de usar la skill en un entorno restringido o similar a CI.
Ejecuta la comprobación inicial:
node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --check
Si la depuración de Chrome no está disponible, abre chrome://inspect/#remote-debugging y habilita la depuración remota para esa instancia del navegador, o inicia Chrome/Chromium con un puerto de depuración según la política de tu entorno local.
Uso con pestañas existentes para páginas con sesión iniciada
Para páginas autenticadas, paneles de administración o cualquier cosa que dependa de tu sesión actual del navegador, usa el flujo con pestaña existente. Primero lista las pestañas abiertas:
node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --list
Busca la pestaña por título o URL y luego captúrala:
node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" <targetId> /tmp/screenshot.png --width 1200 --dpr 1
Esto evita perder cookies de sesión y normalmente es más fiable que abrir una URL nueva en segundo plano. Usa un ancho que coincida con el breakpoint de diseño que quieres revisar, como 390 para un diseño similar a móvil, 768 para tablet o 1200/1440 para escritorio.
Uso por URL para páginas públicas
Para páginas públicas, documentación, páginas de marketing o páginas que no requieren inicio de sesión, usa el modo URL:
node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --url "https://example.com" /tmp/screenshot.png --width 1200 --dpr 1 --wait 15000
Aumenta --wait cuando la página depende de renderizado diferido, enrutamiento del lado del cliente, contenido activado por analítica o secciones con carga lazy. Mantén --dpr 1 para tamaños de archivo prácticos y una revisión más ágil; usa un DPR más alto solo cuando la densidad de píxeles sea más importante que el tamaño del resultado.
Patrón de prompt para una mejor invocación
Un prompt débil sería: “Toma una captura de esta página”. Un mejor prompt de uso para full-page-screenshot incluye la URL o el contexto de la pestaña, el estado de autenticación, el ancho del viewport, las necesidades de espera y la ruta de salida:
Use the full-page-screenshot skill to capture the already-open Chrome tab for
staging.example.com/dashboard. I am logged in. Use desktop width1440, DPR1, wait long enough for lazy charts to render, and save the PNG to/tmp/dashboard-full-page.png. If multiple matching tabs exist, list them first and ask me which target ID to use.
Esto le da al agente suficiente información para elegir entre --list, la captura de una pestaña existente y el modo --url sin tener que adivinar.
Preguntas frecuentes sobre full-page-screenshot skill
¿full-page-screenshot es mejor que un prompt normal de captura de pantalla?
Sí, cuando el requisito es capturar la página completa y no solo el viewport visible. Un prompt genérico puede depender de la capacidad de captura que ofrezca el entorno, que a menudo solo produce la pantalla actual. La skill full-page-screenshot le da al agente un flujo específico basado en CDP, una estructura de comandos y una ruta alternativa para pestañas que ya están abiertas.
¿Pueden usar esta skill los principiantes?
Sí, si pueden instalar skills y ejecutar Chrome con la depuración remota habilitada. Los comandos son directos, pero la configuración es más técnica que la de una extensión de navegador. Quienes estén empezando deberían comenzar con --check, luego usar --list y después capturar una pestaña existente antes de probar el modo URL.
¿Cuándo no debería usar esta skill?
No la uses si necesitas monitoreo programado de capturas, comparación de renderizado entre navegadores, comparación visual de capturas, OCR, exportación a PDF o ejecución en la nube a escala. Esta skill captura screenshots PNG desde Chrome/Chromium; no sustituye suites de pruebas con Playwright, plataformas de regresión visual ni APIs alojadas de capturas de pantalla.
¿Funciona para flujos de Browser Automation?
Sí. full-page-screenshot for Browser Automation encaja muy bien cuando un agente necesita un paso de captura determinista después de navegar, iniciar sesión, aplicar filtros o esperar un estado de la interfaz. Resulta más útil como herramienta final de captura dentro de un flujo de navegador más amplio, no como un framework completo de navegación o pruebas por sí sola.
Cómo mejorar full-page-screenshot skill
Mejorar los inputs de full-page-screenshot
Mejores inputs producen mejores capturas. Especifica el estado de la página, no solo su dirección: cuenta con sesión iniciada, filtros seleccionados, estado de modales, ancho del viewport, elementos esperados ya cargados y nombre del archivo de salida. Si la página es dinámica, indica el elemento o la sección que debe estar visible antes de capturar, para que el agente sepa cuándo necesita esperar más tiempo o pedir confirmación manual.
Reducir fallos comunes de captura
Los bloqueos más habituales son que la depuración remota de Chrome no esté habilitada, usar el modo URL para páginas que requieren login, capturar antes de que termine de cargar el contenido lazy y elegir un ancho de viewport incorrecto. Corrígelos ejecutando --check, prefiriendo el modo de pestaña existente para páginas autenticadas, aumentando --wait en SPAs públicas y ajustando --width al layout que realmente quieres inspeccionar.
Iterar después del primer PNG
Revisa la primera salida para detectar contenido inferior faltante, encabezados sticky que cubren secciones, banners de cookies, imágenes sin cargar o un layout responsive inesperado. Después vuelve a ejecutar con otro ancho, una espera más larga o una pestaña ya preparada. Si aparece un banner de cookies o un modal, ciérralo primero en Chrome y captura la pestaña existente en lugar de depender de una URL nueva en segundo plano.
Leer el script antes de extenderlo
Si quieres personalizar la skill, lee scripts/full-page-screenshot.mjs antes de editar prompts. El script controla la detección de pestañas, el ancho del viewport, el DPR, el comportamiento de espera y la captura mediante CDP. Algunas mejoras útiles pueden incluir mensajes de error más claros, estrategias de espera adicionales, convenciones para nombrar archivos de salida o manejo opcional de CSS para ocultar superposiciones sticky cuando tu flujo de trabajo lo permita.