UI 모션 및 애니메이션 구현을 생성, 검토, 디버깅합니다. 스프링, 제스처, 드래그 상호작용, 클립-패스 공개, 이징 곡선, 타이밍, CSS 전환 레시피 및 애니메이션 검토를 다룹니다.
이 스킬은 UI 모션과 애니메이션을 설계, 구현 또는 검토할 때 사용됩니다. 스프링 애니메이션, CSS 전환, 키프레임, framer-motion, 제스처(스와이프, 드래그) 등 다양한 애니메이션 기법을 지원합니다. 주로 Claude Code와 같은 AI 에이전트 플랫폼에서 동작하며, 개발자가 '애니메이션 추가', '부드럽게 만들기', '애니메이션 검토', '스와이프 제스처 추가' 등의 요청을 할 때 유용합니다. 또한 최종 결과물을 자연스럽고 매끄럽게 만들기 위한 이징 곡선과 타이밍 조정 기능을 제공합니다. 화면 녹화에서 모션을 재현해야 할 경우 `reverse-engineer-animation` 스킬을, 전체적인 시각적 방향과 스타일링이 필요하면 `ui-design` 스킬을, 특정 텍스트 효과(타자기, 라인 공개, 키네틱 빌드)는 `animate-text` 스킬을 사용하는 것이 좋습니다.
npx skills add https://github.com/mblode/agent-skills/tree/main/skills/ui-animationUI 모션 및 애니메이션 구현을 생성, 검토, 디버깅합니다. 스프링, 제스처, 드래그 상호작용, 클립-패스 공개, 이징 곡선, 타이밍, CSS 전환 레시피 및 애니메이션 검토를 다룹니다. 모션, CSS 전환, 키프레임, framer-motion, 스프링 애니메이션을 설계, 구현 또는 검토하거나 "애니메이션 추가", "부드럽게 만들기", "내 애니메이션 검토", "이거 애니메이션으로 만들어야 할까?", "스와이프 제스처 추가", "전환 추가" 같은 질문을 할 때 사용하세요. 화면 녹화나 비디오에서 모션을 재현하려면 reverse-engineer-animation을 사용하고, 전체적인 시각적 방향과 스타일링은 ui-design을, 명명된 텍스트 효과 사양(타자기, 라인 공개, 키네틱 빌드)은 animate-text를 사용하세요.
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.