Communitygithub.com

asсorblack/video-skills

Reglas para grabar la interfaz de un programa para videos, presentaciones y GIF — captura fotograma a fotograma del navegador en tiempo virtual (headless Chrome, beginFrame), demo con datos ficticios, cursor, marcas durante la grabación, márgenes al inicio y final de la toma, hoja de fotogramas, zooms y recorte de la grabación, pantalla del programa en un marco estilizado, versión en otro idioma con los mismos clics y sincronización de manos en escena 3D con la grabación. Úsalo cuando grabes, edites, aceleres o insertes grabaciones de pantalla de aplicaciones en un video.

¿Qué es video-skills?

El skill `ascorblack/video-skills` proporciona un conjunto de reglas y prácticas para grabar y editar interfaces de programa de alta calidad para videos, presentaciones y GIFs. Está diseñado para usuarios que necesitan capturar pantallas de aplicaciones de manera profesional, ya sea para tutoriales, demostraciones o contenido promocional. La habilidad se basa en la captura fotograma a fotograma usando navegadores en modo headless (como Chrome) en tiempo virtual, evitando así la rotura de fotogramas típica de la grabación en tiempo real. Incluye pautas para crear demos con datos ficticios coherentes, gestionar el cursor de forma precisa, usar marcas basadas en eventos en lugar de tiempo, y manejar márgenes de silencio al inicio y final de cada toma. Además, cubre la sincronización de versiones en otros idiomas y la integración de grabaciones en escenas 3D. Es ideal para quienes trabajan con herramientas como Claude Code, Cursor o Codex, ya que se puede usar para automatizar partes del flujo de grabación y edición.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ascorblack/video-skills/tree/HEAD/ru/skills/video-ui-capture

Preguntar en tu IA favorita

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

Documentación

Grabación de interfaz

Cada regla proviene de lecciones de videos anteriores; entre corchetes se indica la fuente (leyenda al final). Donde las fuentes difieren, se presentan ambos consejos con una nota sobre a qué caso corresponde cada uno.

Reglas breves

  1. Graba fotograma a fotograma, guía el navegador en tiempo virtual: avanzas un fotograma, grabas un fotograma. La grabación de pantalla en tiempo real rompe fotogramas. [Video] [3D]
  2. Graba únicamente un demo con datos ficticios; antes de grabar, revisa visualmente cada pantalla. [Video] [3D]
  3. El demo debe ser coherente consigo mismo: dos pantallas que muestran un mismo hecho deben decir lo mismo. [Video]
  4. El cursor se mueve hacia el objetivo, no alrededor de él; dibújalo en la página a partir de los mismos eventos que se envían a la aplicación. [Video] [3D]
  5. Coloca marcas directamente durante la grabación y asocia subtítulos y cámara a esas marcas, no a segundos. [Video]
  6. Deja márgenes de silencio al inicio y al final de la toma [Video]; en la versión en otro idioma, la introducción y el final deben tener la misma duración que el original [3D].
  7. Revisa cada toma mediante una hoja de 4 a 6 fotogramas. [Video]
  8. Cualquier espera del grabador debe tener tiempo de espera (timeout); apaga los procesos en segundo plano por PID. [Video]
  9. Muestra la grabación hasta el resultado visible de la acción; el zoom debe aplicarse a un bloque completo, no a un botón. [Video] [3D]
  10. La interfaz real o dibujada depende del tipo de video: un promocional sobre el programa graba la real [Video], un divulgativo estilizado la dibuja de nuevo [Divulgación]. Ver framing.md.

Detalles

  • recording.md: cómo grabar (tiempo virtual, demo, marcas, márgenes, verificación de la toma, grabador).
  • framing.md: la grabación en el video (recorte y aceleración, zooms, cursor, pantalla en marco estilizado, interfaz real o dibujada).
  • languages-and-sync.md: versión en otro idioma y sincronización de manos en 3D con la grabación.

Fuentes

  • [Video]: lecciones de video archivadas sobre grabación de interfaz, ritmo, transiciones.
  • [3D]: lecciones de video tridimensional en primera persona en el navegador, donde las grabaciones de pantalla se insertan en una escena 3D.
  • [Divulgación]: lecciones de video en el estilo de divulgación científica soviética y filmina de principios de los 70, con pantallas de programas en el encuadre.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

ascorblack/video-skills

Правила 3D-анимации для роликов в браузере (three.js → покадровый рендер) и анимации фигур с предметами — руки и тело от первого лица, рукав и манжета, контакт кисти с предметами и поверхностями, смешивание поз и углов, расталкивание персонажей, ходьба без скольжения, свечение, контактные тени, процедурные материалы, детекторы пересечений и рывков. Используй, когда строишь, анимируешь или проверяешь 3D-сцену, персонажей, руки, предметы в руках или свет в ролике.

ascorblack/video-skills

Правила звука для роликов — фоновая музыка и звуковое оформление, совпадение звука с картинкой, сведение голоса и музыки (LUFS, истинный пик, приглушение), удлинение музыки без стыков, синтез дикторской озвучки (дословность, темп), архивный «эфирный» голос с помехами, сдача звука и работа с API-ключами. Используй, когда делаешь, сводишь, проверяешь или правишь музыку, звуковые эффекты, озвучку или микс ролика.

ascorblack/video-skills

Правила рендера и оптимизации роликов из HTML/браузерных кадров — грабли покадрового рендера с перемоткой (твины, CSS-анимации, transform, aspect-ratio, SVG use, тяжёлые слои), детерминизм и повторяемость, где уходит время рендера, кодирование на NVENC с битрейтом, воркеры, отвязанный от сессии рендер, вшивание звука без перерендера картинки, проверка готового файла (ffprobe) и хранение версий. Используй, когда рендеришь, ускоряешь, кодируешь, пересобираешь или сдаёшь готовое видео.

ascorblack/video-skills

Rules for the visuals of videos about programs and popular-science videos — diagrams and connector lines, terms with applied examples, how long to hold a slide, transitions without jerking, camera push-ins, titles and figures in the frame, stylization in the manner of Soviet popular science and filmstrips (palette, fonts, grain, vignette). Use when designing, drawing or editing frames, slides, diagrams, titles, transitions or the style of a video, and when checking frames before assembly.

Skills relacionados