Habilidades screenshots
📸

screenshots

Riesgo bajo ⚙️ Comandos externos🌐 Acceso a red📁 Acceso al sistema de archivos

Genera capturas de pantalla de marketing con Playwright

Crear capturas de pantalla de calidad de marketing para Product Hunt, redes sociales o documentación consume mucho tiempo. Esta habilidad automatiza la captura de capturas de pantalla con resolución retina usando Playwright.

Soporta: Claude Codex Code(CC)
⚠️ 68 Deficiente
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "screenshots". Genera 5 capturas de pantalla de marketing de mi app Next.js en localhost:3000

Resultado esperado:

Se creó el directorio screenshots y se capturaron 5 imágenes de calidad retina: 01-landing-hero.png, 02-features-grid.png, 03-dashboard-view.png, 04-analytics-panel.png, 05-settings-modal.png. Todos los archivos están a resolución 2880x1800 listos para uso en marketing.

Usando "screenshots". Captura la página de precios después de hacer clic en el toggle annual

Resultado esperado:

Se navegó a /pricing, se hizo clic en el toggle de facturación anual, se esperó la animación de actualización de precios, se capturó pricing-annual.png mostrando la visualización de precios actualizada.

Auditoría de seguridad

Riesgo bajo
v1 • 2/25/2026

Static analysis detected 83 pattern matches, but all are false positives. The SKILL.md file contains documentation and code examples for a legitimate Playwright screenshot tool. External commands are standard development tooling (npx, npm, node, mkdir). Network references are localhost examples in documentation. Filesystem operations create a screenshots directory for user output.

1
Archivos escaneados
402
Líneas analizadas
6
hallazgos
1
Auditorías totales
Problemas de riesgo bajo (3)
SKILL.md:24-26SKILL.md:158-160SKILL.md:283-285
External Command Execution
Skill executes shell commands for Playwright operations and file management. Commands are standard development tooling with hardcoded arguments.
SKILL.md:74-77
User Credential Collection
Skill prompts users for login credentials (email, password) to access authenticated pages for screenshots. Credentials are used in generated scripts.
SKILL.md:40-43
Localhost Network Access
Skill accesses localhost URLs provided by users for screenshot capture. This is expected behavior for a web app screenshot tool.

Factores de riesgo

⚙️ Comandos externos (5)
SKILL.md:24-26 SKILL.md:158-160 SKILL.md:283-285 SKILL.md:288-290 SKILL.md:361-364
🌐 Acceso a red (1)
SKILL.md:40-43
📁 Acceso al sistema de archivos (1)
SKILL.md:158-160
Auditado por: claude

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
87
Contenido
32
Comunidad
84
Seguridad
91
Cumplimiento de la especificación

Lo que puedes crear

Lanzamiento en Product Hunt

Genera un conjunto de 5-10 capturas de pantalla heroicas que muestran las características clave para tu página de lanzamiento en Product Hunt.

Capturas de pantalla para documentación

Crea capturas de pantalla de referencia de UI consistentes para guías de usuario y documentación de tutoriales.

Contenido para redes sociales

Produce capturas de pantalla demostrativas de funciones llamativas optimizadas para Twitter, LinkedIn y otras plataformas sociales.

Prueba estos prompts

Solicitud básica de capturas de pantalla 
Toma capturas de pantalla de mi app en http://localhost:3000 para un lanzamiento en Product Hunt. Necesito 5 capturas de pantalla mostrando el dashboard, las funciones principales y la página de configuración.
Capturas de pantalla de app autenticada 
Mi app requiere inicio de sesión. La página de login está en /sign-in. Usa el email demo@example.com y la contraseña Demo123!. Después del login, captura el dashboard y las páginas de perfil de usuario.
Capturas de pantalla de página completa 
Captura capturas de pantalla de página completa (no solo del viewport) de la página de precios y la página de funciones. Espera 500ms para que las animaciones se completen antes de capturar.
Variantes de modo oscuro y claro 
Genera capturas de pantalla de la landing page tanto en modo claro como en modo oscuro. Usa viewport 1440x900 con escala retina 2x para uso en marketing.

Mejores prácticas

  • Usa datos seed o demo para asegurar que las capturas de pantalla muestren contenido realista
  • Espera siempre al estado networkidle para asegurar la carga completa de la página
  • Usa prefijos numéricos en los nombres de archivo para un orden consistente

Evitar

  • No hagas commit de capturas de pantalla con datos sensibles al control de versiones
  • Evita capturar capturas de pantalla con datos de usuario personales o credenciales visibles
  • No uses URLs de producción sin confirmación explícita del usuario

Preguntas frecuentes

¿Necesito instalar Playwright por separado?
Sí. Ejecuta npm install -D playwright o npm install -D @playwright/test antes de usar esta habilidad.
¿Qué resolución tienen las capturas de pantalla?
Las capturas de pantalla se capturan a 2880x1800 píxeles usando un factor de escala de dispositivo 2x para calidad retina.
¿Esta habilidad puede capturar apps que requieren login?
Sí. Proporciona tus credenciales de login cuando se te solicite, y la habilidad se autenticará antes de capturar las capturas de pantalla.
¿Dónde se guardan las capturas de pantalla?
Las capturas de pantalla se guardan en un directorio screenshots en la raíz de tu proyecto con nombres de archivo descriptivos en kebab-case.
¿Puedo capturar capturas de pantalla en modo oscuro?
Sí. Si tu app soporta modo oscuro, la habilidad puede establecer el esquema de color del navegador a oscuro antes de capturar.
¿Qué pasa si mi servidor de desarrollo no está en ejecución?
La habilidad detectará si Playwright no puede conectarse y te ayudará a iniciar tu servidor de desarrollo antes de continuar.

Detalles del desarrollador

Autor

sickn33

Licencia

MIT

Repositorio

https://github.com/sickn33/antigravity-awesome-skills/tree/main/web-app/public/skills/screenshots

Ref.

main

Estructura de archivos

📄 SKILL.md