Communitygithub.com

claudes-world/plugins (모션 가이드라인)

CSS, JS, SwiftUI/UIKit, Remotion/비디오, Framer Motion, GSAP, 캔버스 또는 수동 애니메이션 등 모든 애니메이션 또는 전환을 작성하기 전에 반드시 읽어야 할 모션 가이드라인입니다.

plugins (모션 가이드라인)란 무엇인가요?

이 스킬은 다양한 플랫폼에서 애니메이션을 구현할 때 반드시 숙지해야 할 모션 디자인 원칙을 제공합니다. CSS, JavaScript, SwiftUI/UIKit, Remotion/비디오, Framer Motion, GSAP, 캔버스 기반 애니메이션 등 모든 유형의 모션 구현 전에 참조해야 합니다. 주요 내용으로는 애니메이션 결합 시 스태거(stagger) 사용과 동기화 금지, 스프링 느낌 대 타이밍 함수 선택, 가산 애니메이션, 제스처에서 애니메이션으로의 속도 전달, 그리고 인터럽트 가능성(interruptibility)을 다룹니다. 'animate', 'animation', 'transition', 'fade in', 'slide in', 'easing', 'spring', 'duration', 'keyframes', 'motion design', 'micro-interaction' 등 관련 키워드가 감지되면 자동으로 트리거됩니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/claudes-world/plugins/tree/dev/plugins/interaction-craft/skills/motion
원본 보기→모든 스킬 둘러보기

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

plugins (모션 가이드라인)은(는) 무엇을 하나요?

CSS, JS, SwiftUI/UIKit, Remotion/비디오, Framer Motion, GSAP, 캔버스 또는 수동 애니메이션 등 모든 애니메이션 또는 전환을 작성하기 전에 반드시 읽어야 합니다.

다음 주제에 대한 모션 가이드라인을 다룹니다:

  • 애니메이션 결합 방법 (스태거, 절대 동기화 금지)
  • 스프링 느낌 vs 타이밍 함수
  • 가산 애니메이션
  • 제스처에서 애니메이션으로의 속도 전달
  • 인터럽트 가능성

다음 키워드가 감지되면 트리거됩니다: 'animate', 'animation', 'transition', 'fade in', 'slide in', 'easing', 'spring', 'duration', 'keyframes', 'motion design', 'micro-interaction', 'make it feel'

관련 스킬

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