웹 페이지에 모션을 추가하거나 수정할 때 사용합니다 - 스크롤 리빌, 히어로 인트로 및 크로스페이드, 앰비언트 루프, 배경 비디오 루프, 이미지 로테이터, 스티키 요소 등 - 또는 애니메이션이 끊기거나, 잘못된 타이밍에 실행되거나, 화면 밖에서 재생되거나, 전혀 실행되지 않을 때 사용합니다.
이 스킬은 웹 페이지 애니메이션을 디버깅하고 최적화하는 방법을 개발자에게 가르칩니다. 주요 원칙은 애니메이션의 타이밍이나 이징을 조정하기 전에 애니메이션이 의도한 요소에서 실행되고 있는지 먼저 확인하는 것입니다. 이 스킬은 애니메이션이 전혀 실행되지 않는 경우(예: 선택자 일치 실패, 잘못된 트리거 이벤트, 교차 페이드에서 누락된 초기 상태)를 해결하고, 스크롤 리빌, 인트로, 앰비언트 모션을 구현하는 모범 사례를 설명하며, 비디오 배경, 스크롤 기반 애니메이션의 끊김 현상, CSS 그리드의 스티키 요소, 'prefers-reduced-motion' 및 자바스크립트 미지원 환경에 대한 폴백을 다룹니다. Cursor, Claude Code, Codex를 포함한 모든 주요 AI 코딩 에이전트와 호환되며, SKILL.md 문서에 설명된 대로 구체적이고 실행 가능한 디버깅 체크리스트와 스타일 규칙을 제공합니다.
npx skills add https://github.com/igal-commits/landing-page-skills/tree/HEAD/skills/animating-web-pagesThis repo contains 1 individual skill — each has its own dedicated page.
Extract frames or short clips from videos using ffmpeg.
Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.
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.
Obra superpowers agent skills.
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...
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.