Communitygithub.com

assafkip/claude-video-editor

웹사이트를 캡처하여 HyperFrames 비디오로 제작합니다. 사용자가 URL을 제공하고 비디오를 원하거나, '이 사이트를 캡처해 줘', '이것을 비디오로 만들어 줘', '내 사이트로 프로모션을 만들어 줘', 소셜 광고, 제품 투어, 기존 웹사이트 기반 비디오 등 링크를 공유하며 모든 종류의 비디오 콘텐츠를 요청할 때 사용하세요.

claude-video-editor란 무엇인가요?

이 스킬은 사용자가 제공한 URL의 웹사이트를 캡처하여 전문적인 HyperFrames 비디오로 변환하는 7단계 워크플로우를 제공합니다. 각 단계는 순차적으로 진행되며, 이전 단계의 결과물이 다음 단계의 입력이 됩니다. Step 1에서는 사이트를 캡처하고 데이터를 분석하며, Step 2에서는 디자인 참고서(DESIGN.md)를 작성합니다. Step 3에서 내레이션 스크립트를 작성하고, Step 4에서 스토리보드를 통해 비트별 창의적 방향을 설정합니다. Step 5에서는 TTS 음성을 생성하고 타임라인을 동기화하며, Step 6에서 실제 컴포지션을 구축하고 셀프 리뷰를 수행합니다. 마지막으로 Step 7에서 lint와 validate를 통과하여 최종 전달합니다. 소셜 광고(10-15초), 제품 데모(30-60초), 기능 발표(15-30초), 브랜드 릴(20-45초), 런칭 티저(10-20초) 등 다양한 비디오 유형과 가로/세로/정사각형 형식을 지원합니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/assafkip/claude-video-editor/tree/HEAD/skills/website-to-hyperframes
원본 보기→모든 스킬 둘러보기

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

웹사이트 to HyperFrames

웹사이트를 캡처하고, 그로부터 전문적인 비디오를 제작합니다.

사용자들은 다음과 같이 말합니다:

  • "https://...를 캡처해서 25초짜리 제품 런칭 비디오를 만들어 줘"
  • "이 웹사이트를 인스타그램용 15초 소셜 광고로 바꿔 줘"
  • "https://...에서 30초짜리 제품 투어를 만들어 줘"

워크플로우는 7단계로 구성됩니다. 각 단계는 다음 단계의 조건이 되는 결과물을 생성합니다.

1단계: 캡처 및 이해

읽기: references/step-1-capture.md

캡처를 실행하고, 추출된 데이터를 읽고, 기록 후 잊기(write-down-and-forget) 방법을 사용하여 작업 요약을 작성합니다.

조건: 사이트 요약(이름, 주요 색상, 폰트, 주요 에셋, 한 문장 분위기)을 출력합니다.

2단계: DESIGN.md 작성

읽기: references/step-2-design.md

캡처된 웹사이트에 대한 간단한 브랜드 참고서를 작성합니다. 6개 섹션, 약 90줄. 이것은 치트 시트이지 창의적인 계획이 아닙니다. 창의적인 계획은 4단계에서 수립합니다.

조건: 프로젝트 디렉토리에 DESIGN.md가 존재해야 합니다.

3단계: SCRIPT 작성

읽기: references/step-3-script.md

내레이션 스크립트를 작성합니다. 이야기의 뼈대입니다. 장면 시간은 추측이 아닌 내레이션에서 결정됩니다.

조건: 프로젝트 디렉토리에 SCRIPT.md가 존재해야 합니다.

4단계: STORYBOARD 작성

읽기: references/step-4-storyboard.md

비트별 창의적 방향을 작성합니다: 분위기, 카메라, 애니메이션, 전환, 에셋, 깊이 레이어, SFX. 이것이 창의적인 나침반입니다 — 엔지니어가 각 구성을 빌드할 때 따르는 문서입니다.

조건: 비트별 방향과 에셋 감사 테이블이 포함된 STORYBOARD.md가 존재해야 합니다.

5단계: VO 생성 및 타이밍 매핑

읽기: references/step-5-vo.md

TTS 오디오를 생성하고, 단어 수준 타임스탬프를 위해 전사하고, 타임스탬프를 비트에 매핑합니다. 실제 지속 시간으로 STORYBOARD.md를 업데이트합니다.

조건: narration.wav (또는 .mp3) + transcript.json이 존재해야 합니다. STORYBOARD.md의 비트 타이밍이 업데이트되어야 합니다.

6단계: 컴포지션 빌드

읽기: /hyperframes 스킬 (호출하세요 — 모든 규칙이 중요합니다) 읽기: references/step-6-build.md

스토리보드에 따라 각 컴포지션을 빌드합니다. 각각 후에: 레이아웃, 에셋 배치, 애니메이션 품질에 대한 셀프 리뷰를 수행합니다.

조건: 모든 컴포지션이 셀프 리뷰를 완료해야 합니다. 겹치는 요소 없음, 잘못 배치된 에셋 없음, 모션이 없는 정적 이미지 없음.

7단계: 검증 및 전달

읽기: references/step-7-validate.md

린트, 검증, 미리보기. 멀티 세션 연속성을 위해 HANDOFF.md를 생성합니다.

조건: npx hyperframes lint와 npx hyperframes validate가 오류 없이 통과해야 합니다.

빠른 참고

비디오 유형

유형지속 시간비트내레이션
소셜 광고 (IG/TikTok)10-15초3-4선택적 후크 문장
제품 데모30-60초5-8전체 내레이션
기능 발표15-30초3-5전체 내레이션
브랜드 릴20-45초4-6선택적, 음악 중심
런칭 티저10-20초2-4최소, 높은 에너지

형식

  • 가로: 1920x1080 (기본값)
  • 세로: 1080x1920 (Instagram Stories, TikTok)
  • 정사각형: 1080x1080 (Instagram 피드)

참고 파일

파일읽을 시기
step-1-capture.md1단계 — 캡처된 데이터 읽기
step-2-design.md2단계 — DESIGN.md 작성
step-3-script.md3단계 — 내레이션 스크립트 작성
step-4-storyboard.md4단계 — 비트별 창의적 방향
step-5-vo.md5단계 — TTS, 전사, 타이밍
step-6-build.md6단계 — 셀프 리뷰와 함께 컴포지션 빌드
step-7-validate.md7단계 — 린트, 검증, 미리보기, 인계
techniques.md4단계 및 6단계 — 코드 패턴이 포함된 10가지 시각적 기법 (SVG 드로잉, Canvas 2D, 3D, 타이포그래피, Lottie, 비디오, 타이핑, 가변 폰트, MotionPath, 전환)

Individual skills in this repo

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

assafkip/claude-video-editor

Build videos from stills when there is nothing to cut — narration first (ElevenLabs v3 with audio tags), then still keyframes from ANY source (AI image tools, screenshots, photos, HyperFrames-rendered HTML), animated deterministically with the animate-stills recipe (HyperFrames camera moves + GSAP atmosphere). Use when the user wants an explainer, documentary-style video, or any video built from generated or collected visuals instead of recorded footage.

assafkip/claude-video-editor

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

assafkip/claude-video-editor

HyperFrames CLI tool — hyperframes init, lint, preview, render, transcribe, tts, doctor, browser, info, upgrade, compositions, docs, benchmark. Use when scaffolding a project, linting or validating compositions, previewing in the studio, rendering to video, transcribing audio, generating TTS, or troubleshooting the HyperFrames environment.

assafkip/claude-video-editor

Install and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add, installing a block or component, wiring an installed item into index.html, or working with hyperframes.json. Covers the add command, install locations, block sub-composition wiring, component snippet merging, and registry discovery.

assafkip/claude-video-editor

Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.

assafkip/claude-video-editor

Beginner-friendly end-to-end video creator for HyperFrames. Use when the user says "make a video", "create a video", "new video", "build a video", "video from scratch", "I want to make a video", "help me create a video", or when someone who's never used HyperFrames before arrives with a concept, script, or rough idea and wants a finished MP4. Interviews the user in one pass, then builds the full video with mandatory preview and visual-verification gates.

assafkip/claude-video-editor

Build and iterate short-form vertical (9:16) videos in Hyperframes — TikTok/Reels/Shorts style. Use when Nate says "short-form video", "vertical video", "TikTok/Reels/Shorts", "make a short", "talking-head + motion graphics", or when the target is a 1080x1920 composition with face video + synced scene overlays + karaoke captions. Encodes the full May Shorts 19 playbook: face-mode choreography, audio-synced scene timing, karaoke captions, and the 10-rule quality checklist.

assafkip/claude-video-editor

Edit any video by conversation — the orchestrator for the bundled video pipeline. Use when the user wants to edit, cut, caption, grade, or add motion graphics to footage; drops a folder of clips and says "edit this"; or asks to make a promo/teaser/tutorial/short. Routes to video-use (the cut engine) and HyperFrames (motion-graphics overlays), with a motion-craft library for taste.

assafkip/claude-video-editor

Production pipeline for mathematical and technical animations using Manim Community Edition. Creates 3Blue1Brown-style explainer videos, algorithm visualizations, equation derivations, architecture diagrams, and data stories. Use when users request: animated explanations, math animations, concept visualizations, algorithm walkthroughs, technical explainers, 3Blue1Brown style videos, or any programmatic animation with geometric/mathematical content.

관련 스킬

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community