Communitygithub.com

tutorial-de-pantalla-en-video

Crea un tutorial o video guía con marca, de 30 segundos a 10 minutos, en 1080p apaisado, que muestra cómo hacer algo en una aplicación o sitio web real (Search Console, Cloudflare, Google Tag Manager, WordPress, GitHub, cualquier panel).

¿Qué es tutorial-de-pantalla-en-video?

Esta habilidad permite crear videos tutoriales profesionales con marca, ideales para guías paso a paso, configuraciones y demostraciones de 'cómo hacer X en Y'. Acepta una grabación de pantalla del usuario si la tiene; de lo contrario, reconstruye los pasos como réplicas HTML precisas de la interfaz de la aplicación, incluyendo cursor, clics, escritura y enfoque en el control que se está explicando. La narración se realiza con la voz del usuario (o la voz predeterminada 'Jay'), y el video incluye marcadores de paso, sellos, recibos de fuentes reales para cualquier afirmación y el kit de recursos compartidos de manera ligera. Está diseñado para plataformas como Claude Code, Cursor y Codex, y sigue una estructura clara: gancho inicial (problema), resumen de la tarea, pasos detallados, resultado y un consejo extra. El ritmo es calmado para que el espectador pueda seguir fácilmente. La habilidad verifica que no haya datos privados en los fotogramas utilizados y solo transcribe el audio, con un tiempo de renderizado estimado de 1 a 1.5 minutos por minuto de video.

Compatible con~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/NicheEgg/video-studio/tree/HEAD/skills/video-screen-tutorial

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Tutorial de pantalla

Lee references/house-rules.md primero; prevalece. Orden de ejecución: video-director sección 3. Este archivo solo cubre lo específico.

Estado: las réplicas de pantalla reconstruidas están probadas (el video de Search Console + Cloudflare); las capturas de pantalla en el bloque screen están probadas. Reproducir una grabación de pantalla real dentro de la ventana con zoom aún no está implementado: constrúyelo y pruébalo en la primera grabación real (extiende el bloque screen para que acepte video, como lo hace el bloque clip), luego actualiza esta línea.

Qué es específico

  • De dónde vienen las pantallas (regla estricta 2): la grabación de pantalla del usuario si la tiene; de lo contrario, reconstruye los pasos como réplicas HTML a partir de referencias actuales y fechadas (references/screens.md), con cursor, clics, escritura y enfoque. Es una demostración, por lo que reconstruir es correcto. Módulos existentes para reutilizar: gsc-add-property, cloudflare-dns-add, gsc-verify.
  • Qué debe seguir siendo real: cualquier afirmación sobre el producto ('Google dice…') debe tener un recibo capturado de su documentación, y cualquier página estática que se muestre como tal (una página de inicio, una página de precios) debe ser una captura.
  • Verifica datos privados en cada fotograma utilizado (correos electrónicos, IDs de cuenta, claves, ingresos). Difumínalos o recórtalos e informa al usuario.
  • Fuente: fetch-video.sh → enhance-audio.sh → rough-cut.mjs (corta imagen y sonido juntos, por lo que se eliminan tiempos muertos y repeticiones) → voice.mjs --provider file.
  • Cada paso es un bloque screen con la grabación (o captura de pantalla) en la ventana de la marca y movimientos de cámara: comienza amplio, acerca al control a medida que se nombra (1.3–1.6×), mantén, retrocede. Nunca un marco de computadora portátil o dispositivo.
  • Marcador de paso en la esquina superior derecha desde script.json → steps. Un sello o resalte sobre el elemento a hacer clic. Una instrucción por bloque, nombrada como aparece en la pantalla.
  • Estructura: gancho (el problema, 5–10 s; en cámara si se grabaron a sí mismos) → la tarea completa en una línea → los pasos → el resultado → un consejo extra.
  • Uso ligero del kit: recibos para afirmaciones sobre el producto (su propia documentación), un sonido de reacción o meme en los momentos de 'funcionó' o 'falló'. Sin corte a mitad de paso.
  • Las pantallas reconstruidas usan datos de ejemplo (example.com), nunca los detalles de una cuenta real.
  • Ritmo: tranquilo. El espectador está siguiendo el proceso.

Costo y tiempo

Solo transcripción (centavos). Renderizado ≈ 1–1.5 min por minuto de video.

Referencias

own-footage.md · engine-api.md (bloque screen, movimientos de cámara) · screens.md (reconstrucción de pantallas de aplicaciones para demostraciones) · voice-music.md · troubleshooting.md

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Skills relacionados