Communitygithub.com

SkillMedev/tutorial-video-studio

애니메이션 작업 전에 제품 데모, 기능 발표 또는 론칭 비디오를 비트 시트와 쇼트 목록으로 기획합니다. 처음 3초에 후크를 걸고, 문제, 해결 방안, 증명, 클릭 유도(action) 구조를 따르며, 장면 유형별 목표 길이와 템포를 설정하여 remotion-compose가 직접 읽을 수 있는 JSON 씬 플랜으로 출력합니다. 누군가 요청할 때 사용하세요.

tutorial-video-studio란 무엇인가요?

이 스킬은 애니메이션 작업 단계에 들어가기 전에 제품 비디오 콘텐츠를 체계적으로 기획할 수 있도록 도와줍니다. 사용자가 비디오의 목적(제품 데모, 기능 발표, 론칭)을 입력하면, 스킬은 1) 첫 3초의 후크, 2) 문제 제시, 3) 해결 방안 공개, 4) 증명, 5) 클릭 유도(action)로 구성된 표준 비디오 구조를 기반으로 비트 시트(beat sheet)와 쇼트 목록(shot list)을 생성합니다. 각 장면 유형마다 목표 길이와 템포가 설정되며, 최종 출력물은 JSON 형식의 씬 플랜(scene plan)입니다. 이 JSON은 remotion-compose 라이브러리에서 직접 읽어 비디오를 자동으로 구성할 수 있도록 설계되어, 기획에서 제작까지의 워크플로우를 효율적으로 연결합니다. 이 스킬은 Claude Code, Cursor 등 AI 에이전트 환경에서 사용할 수 있으며, 특히 비디오 제작 파이프라인을 자동화하려는 개발자 및 콘텐츠 제작자에게 유용합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/SkillMedev/tutorial-video-studio/tree/main/skills/video-storyboard

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

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

문서

tutorial-video-studio은(는) 무엇을 하나요?

애니메이션 작업 전에 제품 데모, 기능 발표 또는 론칭 비디오를 비트 시트와 쇼트 목록으로 기획합니다. 처음 3초에 후크를 걸고, 문제, 해결 방안, 증명, 클릭 유도(action) 구조를 따르며, 장면 유형별 목표 길이와 템포를 설정하여 remotion-compose가 직접 읽을 수 있는 JSON 씬 플랜으로 출력합니다. 누군가 요청할 때 사용하세요.

사용 방법

  1. 비디오 목적 정의: 제품 데모, 기능 발표, 또는 론칭 비디오 중 어떤 유형인지 입력합니다.
  2. 핵심 내용 입력: 비디오에서 다룰 주요 포인트(제품명, 주요 기능, 대상 고객, 클릭 유도 내용 등)를 제공합니다.
  3. 출력 확인: 생성된 JSON 씬 플랜을 remotion-compose 프로젝트에 직접 사용합니다.

출력 예시

{
  "scenes": [
    {
      "type": "hook",
      "duration": 3,
      "description": "사용자가 겪는 문제를 시각적으로 보여주는 강력한 오프닝 (3초)",
      "visual": "화면이 어두운 색조, 사용자가 좌절한 표정, 텍스트 '문제가 있나요?'"
    },
    {
      "type": "problem",
      "duration": 5,
      "description": "문제를 명확히 설명하고 공감대 형성",
      "visual": "통계 차트, 사용자 인터뷰 클립, 문제 상황 재연"
    },
    {
      "type": "reveal",
      "duration": 8,
      "description": "제품 또는 기능이 문제를 어떻게 해결하는지 보여줌",
      "visual": "제품 UI 데모, 애니메이션으로 해결 과정 시각화"
    },
    {
      "type": "proof",
      "duration": 6,
      "description": "고객 후기, 수치 데이터, 케이스 스터디로 효과 증명",
      "visual": "별점, '사용자 10만 명' 같은 숫자, 로고 클라우드"
    },
    {
      "type": "cta",
      "duration": 4,
      "description": "명확한 클릭 유도(action) - 지금 시작하기, 다운로드, 구독하기",
      "visual": "버튼 애니메이션, 링크, QR 코드"
    }
  ],
  "totalDuration": 26
}

지원 플랫폼

  • Claude Code
  • Cursor
  • Codex
  • 기타 AI 에이전트 환경

참고 사항

  • JSON 출력은 remotion-compose 패키지와 호환됩니다.
  • 각 장면의 type 필드는 hook, problem, reveal, proof, cta 중 하나여야 합니다.
  • duration은 초 단위로 설정하며, 전체 비디오 길이에 맞게 자동 조정될 수 있습니다.

Individual skills in this repo

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

Captions From Transcript

Produce an accurate, properly timed caption track (SRT or WebVTT) from a video

Kinetic Typography

Put text in motion the right way - title cards, animated captions, lower-thirds, callouts, and word-by-word reveals - with a reading-time-per-word budget so copy holds long enough to read, plus enter/exit timing, weight and size transitions, and type hierarchy in motion. Use when someone asks to

Motion Design Principles

The craft layer for motion: pick the right easing (ease-in / ease-out / ease-in-out / spring), get timing and spacing right, build the anticipation→action→follow-through arc, and apply Disney

Narration Script

Write the spoken voiceover for a tutorial or demo - the actual words, phrased for the ear and synced one-instruction-per-action to what is on screen, with a pacing budget and a confident, jargon-checked tone. Use when someone says

Product Demo Director

Direct the craft of putting a real software UI on screen - cursor choreography, zoom/pan/callout language, screen-recording vs recreated-UI, and making state changes legible with highlights, focus pulls, and slow-downs. Use when filming or recreating an app for a product demo, feature walkthrough, onboarding clip, or release reel and asking

Remotion Compose

Turns a natural-language video brief into a complete, ready-to-preview Remotion composition - extracts duration, scenes, brand colors, aspect ratio, and real copy; plans the frame budget; and writes data-driven React/TypeScript using useCurrentFrame, interpolate, spring, AbsoluteFill, and Sequence, registered in Root.tsx. Use when someone says

Remotion Render

Renders a Remotion composition to MP4 and runs the edit-and-re-render loop - CLI render commands, 1080p/4K/9:16 presets, concurrency tuning, codec selection, batch variants from a JSON data file, and Lambda for cloud rendering. Use when someone says

Remotion Setup

Scaffolds a new Remotion video project wired for Claude Code Agent Skills - Node check, create-video scaffold, skills install, folder conventions, Google Fonts, and a smoke-test render. Use whenever someone wants to start making videos with Remotion and Claude, even just

Screencast Capture

Capture clean raw screen and camera footage for a tutorial or product demo - choosing the recorder (macOS Screenshot toolbar, QuickTime, OBS, Windows Game Bar), setting resolution / frame-rate / cursor / microphone, prepping a distraction-free stage, and recording in retakeable segments. Use when someone says

Social Video Formatter

Reframe and export a finished video for social platforms - 9:16 ↔ 16:9 cropping, burned-in captions, a platform-native first frame, loop design, and per-platform specs (aspect, length, safe areas) for TikTok, Reels, Shorts, X, and LinkedIn. Use when someone says

Sound and Music Sync

Score a video like an editor: beat-match cuts to the music, land SFX on transitions, pace the voiceover so it breathes, source royalty-free tracks safely, and duck the music so the VO sits clearly on top. Use when adding music, sound effects, or voiceover to a video, when asked to

관련 스킬