Communitygithub.com

asсorblack/video-skills

프로그램 인터페이스를 녹화하여 영상, 프레젠테이션, GIF를 제작하기 위한 규칙입니다. 가상 시간에서의 브라우저 프레임별 캡처(headless Chrome, beginFrame), 가상 데이터 데모 스탠드, 커서, 녹화 중 마커, 테이크 시작과 끝의 여유, 프레임 시트, 줌 및 녹화 트리밍, 스타일화된 프레임 속 프로그램 화면, 동일한 클릭으로 다른 언어 버전, 3D 장면에서 손 동작과 녹화 동기화를 다룹니다. 화면 녹화를 촬영, 편집, 가속 또는 영상에 삽입할 때 사용하세요.

video-skills란 무엇인가요?

이 스킬은 애플리케이션 인터페이스의 고품질 녹화를 제작하기 위한 포괄적인 규칙과 워크플로우를 제공합니다. 주로 headless Chrome과 `beginFrame` API를 활용한 가상 시간 기반의 프레임별 브라우저 캡처에 중점을 둡니다. 이는 기존 실시간 화면 녹화에서 발생하는 프레임 드롭 문제를 해결합니다. 스킬은 Adobe After Effects, Blender와 같은 도구와 함께 사용하도록 설계되었으며, 데모 스탠드 설정(가상 데이터 사용), 정밀한 커서 애니메이션, 녹화 중 마커 배치, 테이크 시작과 끝에 여유 시간 추가 등의 모범 사례를 제공합니다. 또한 스타일화된 프레임 속 프로그램 화면 표시, 원본과 동일한 클릭 패턴의 다국어 버전 제작, 3D 장면에서 손 동작과 녹화 동기화와 같은 고급 기법을 다룹니다. 스킬은 각각 녹화, 프레이밍, 다국어 및 동기화를 다루는 세 개의 상세 문서(`recording.md`, `framing.md`, `languages-and-sync.md`)로 구성되어 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ascorblack/video-skills/tree/HEAD/ru/skills/video-ui-capture

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

인터페이스 녹화

각 규칙은 이전 영상 제작 교훈에서 가져왔습니다. 대괄호 안에는 출처(하단 범례 참조)가 표시됩니다. 출처가 서로 다른 경우, 각 상황에 맞는 두 가지 조언을 모두 제시합니다.

간단 규칙

  1. 프레임별로 촬영하고, 브라우저를 가상 시간으로 제어하세요: 프레임을 진행한 후 프레임을 캡처합니다. 실시간 화면 녹화는 프레임을 찢습니다. [비디오] [3D]
  2. 가상 데이터로만 데모 스탠드를 촬영하고, 녹화 전에 각 화면을 눈으로 미리 훑어보세요. [비디오] [3D]
  3. 스탠드는 일관성을 유지해야 합니다: 동일한 사실을 보여주는 두 화면은 동일한 내용을 말해야 합니다. [비디오]
  4. 커서는 목표를 향해 직선으로 이동해야 하며 빗나가지 않아야 합니다. 애플리케이션으로 전송되는 동일한 이벤트를 사용하여 페이지에 커서를 그리세요. [비디오] [3D]
  5. 녹화 중에 직접 마커를 설정하고, 시간(초) 대신 마커에 캡션과 카메라를 연결하세요. [비디오]
  6. 테이크의 시작과 끝에 여유 침묵 시간을 두세요 [비디오]; 두 번째 언어 버전에서는 인트로와 아웃트로 길이가 원본과 동일해야 합니다 [3D].
  7. 각 테이크는 4-6개의 프레임으로 구성된 프레임 시트를 사용하여 검토하세요. [비디오]
  8. 모든 레코더 대기에는 타임아웃을 설정하고, 백그라운드 프로세스는 pid로 종료하세요. [비디오]
  9. 작업의 가시적인 결과가 나타날 때까지 녹화를 보여주세요. 줌은 버튼이 아닌 전체 블록에 적용하세요. [비디오] [3D]
  10. 실제 인터페이스인지 그려진 인터페이스인지는 영상의 종류에 따라 다릅니다: 프로그램 홍보 영상은 실제 인터페이스를 촬영하고 [비디오], 스타일화된 과학 대중화 영상은 새로 그렸습니다 [과학대중화]. framing.md를 참조하세요.

세부 사항

  • recording.md — 촬영 방법: 가상 시간, 스탠드, 마커, 여유, 테이크 검토, 레코더.
  • framing.md — 영상 속 녹화: 트리밍 및 가속, 줌, 커서, 스타일화된 프레임 속 화면, 실제 또는 그려진 인터페이스.
  • languages-and-sync.md — 다른 언어 버전 및 3D 손 동작 녹화 동기화.

출처

  • [비디오] — 아카이브 비디오 강의: 인터페이스 녹화, 템포, 전환.
  • [3D] — 브라우저에서 1인칭 3D 영상 강의로, 화면 녹화가 3D 장면에 삽입됩니다.
  • [과학대중화] — 70년대 초 소련 과학 대중화 및 필름스트립 스타일의 영상 강의로, 프로그램 화면이 프레임 안에 포함됩니다.

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.

관련 스킬