감정 기반의 기술적으로 견고한 애니메이션과 전환을 만들기 위해 모션 디자인 원칙을 적용합니다. 타이밍, 이징, 안무 및 UI에 적용된 디즈니 애니메이션 원칙을 제공합니다. 애니메이션, 전환, 마이크로 인터랙션, 로딩 상태, 페이지 전환, 스크롤 트리거 효과 또는 모든 모션 작업에 사용하세요. CSS, Framer Motion, GSAP, Lottie, Spring 또는 모든 애니메이션 시스템과 함께 작동합니다.
lottiefiles/motion-design 스킬은 AI 어시스턴트가 사용자 인터페이스(UI)를 위한 애니메이션 및 전환을 디자인하고 구현할 때 모션 디자인 원칙을 체계적으로 적용할 수 있도록 안내하는 전문 기술입니다. 이 스킬의 핵심 가치는 단순한 코드 생성이 아니라, 감정적으로 공감을 이끌어내고 기술적으로 정확한 애니메이션을 만들기 위한 타이밍, 이징, 안무, 그리고 UI에 맞게 조정된 디즈니 애니메이션 원칙을 제공한다는 점입니다. 주로 Claude Code, Cursor, Codex와 같은 AI 코딩 도구에서 사용되며, CSS, Framer Motion, GSAP, Lottie, Spring 등 거의 모든 애니메이션 시스템과 호환됩니다. 이 스킬은 SKILL.md 문서를 통해 AI에게 모션 디자인의 이론적 기반과 실용적인 구현 방법을 알려주며, AI가 사용자에게 더 자연스럽고 매력적인 움직임을 제안하도록 돕습니다. 특히 버튼 호버, 로딩 스피너, 페이지 전환, 스크롤에 반응하는 효과와 같은 마이크로 인터랙션에서 인간 디자이너의 감각을 모방한 애니메이션을 생성하는 데 유용합니다.
npx skills add https://github.com/lottiefiles/motion-design-skill/tree/main/skills/motion-design감정 기반의 기술적으로 견고한 애니메이션과 전환을 만들기 위해 모션 디자인 원칙을 적용합니다. 타이밍, 이징, 안무 및 UI에 적용된 디즈니 애니메이션 원칙을 제공합니다. 애니메이션, 전환, 마이크로 인터랙션, 로딩 상태, 페이지 전환, 스크롤 트리거 효과 또는 모든 모션 작업에 사용하세요. CSS, Framer Motion, GSAP, Lottie, Spring 또는 모든 애니메이션 시스템과 함께 작동합니다.
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.