Communitygithub.com

DhairyaS450/skill-screen-demo

원프롬프트 제품 데모 동영상 워크플로우로, Playwright 또는 UIA 캡처와 Screen Studio 스타일의 프로그래매틱 편집을 Remotion에서 결합합니다.

skill-screen-demo란 무엇인가요?

이 스킬은 개발자가 단 한 번의 프롬프트로 전문가 수준의 제품 데모 동영상을 제작할 수 있도록 지원합니다. Playwright 또는 UIA(UI 자동화) 캡처를 사용하여 화면 녹화를 자동으로 수행하고, Screen Studio 스타일의 프로그래매틱 편집을 Remotion 프레임워크 내에서 처리합니다. 결과적으로 수동 편집 없이도 매끄러운 데모 동영상을 얻을 수 있어, 제품 시연, 튜토리얼, 마케팅 자료 제작에 매우 유용합니다. 주요 플랫폼으로는 Claude Code, Cursor, Codex 등이 지원되며, 자동화된 캡처와 편집 파이프라인을 통해 생산성을 크게 향상시킵니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add DhairyaS450/skill-screen-demo

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

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

문서

skill-screen-demo은(는) 무엇을 하나요?

원프롬프트 제품 데모 동영상 워크플로우로, Playwright 또는 UIA 캡처와 Screen Studio 스타일의 프로그래매틱 편집을 Remotion에서 결합합니다.

개요

이 스킬은 개발자가 단 한 번의 프롬프트로 제품 데모 동영상을 생성할 수 있도록 설계되었습니다. Playwright를 사용한 브라우저 기반 화면 캡처 또는 UIA(UI 자동화) 캡처를 지원하며, 캡처된 영상을 Screen Studio 스타일로 프로그래매틱하게 편집하여 Remotion에서 최종 동영상을 렌더링합니다.

주요 기능

  • 원프롬프트 워크플로우: 단일 프롬프트로 전체 데모 동영상 제작을 자동화합니다.
  • 다중 캡처 방식 지원: Playwright(브라우저) 및 UIA(네이티브 UI) 캡처를 모두 지원합니다.
  • 프로그래매틱 편집: Screen Studio 스타일의 편집을 Remotion을 통해 자동으로 적용합니다.
  • 고품질 출력: 최종 동영상은 전문적인 제품 데모에 적합한 수준으로 출력됩니다.

사용 방법

  1. 프롬프트를 입력하여 데모 시나리오를 정의합니다.
  2. Playwright 또는 UIA를 통해 화면 캡처를 실행합니다.
  3. Remotion이 캡처된 영상을 Screen Studio 스타일로 편집하여 최종 동영상을 생성합니다.

요구 사항

  • Playwright: npm install playwright
  • Remotion: npm install remotion
  • UIA 캡처 도구 (선택 사항, 네이티브 UI 캡처 시 필요)

지원 플랫폼

  • Claude Code
  • Cursor
  • Codex

라이선스

MIT

관련 스킬