사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/frankxai/awesome-motion-design-agent-skills --skill site-motion-excellence-director시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 Skill 문서
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
Site Motion Excellence Director
Use this skill before adding substantial motion to a website or app.
Workflow
- Identify the brand, route, audience, and first user task.
- Define the first read before animation.
- Name the motion job: orient, reveal, explain, confirm, compare, express brand, or convert.
- Pass the still-frame gate.
- Write a beat sequence: setup, trigger, primary move, secondary support, hold, final state.
- Choose the lightest runtime that preserves the intent.
- Specify reduced motion in the same pass.
- Implement only after the spec is clear.
- Verify with browser screenshots, mobile, reduced motion, and video/frame proof.
- Score with the excellence gate.
Runtime Rules
- Use CSS for simple state changes, hover/focus, skeletons, and low-risk reveals.
- Use Motion for React for component choreography, layout transitions, presence, and React scroll work.
- Use GSAP ScrollTrigger for pinned, scrubbed, snapped, SVG/canvas, or complex authored timelines.
- Use Rive for interactive vector state machines.
- Use Lottie/dotLottie for portable non-interactive vector loops.
- Use Three.js only when 3D is central and visually verified.
- Use Remotion for rendered video, social variants, product explainers, and exact text/layout in media.
- Use Grok/imagegen/Veo/Sora/Luma/Runway/Higgsfield only as source generation, then finish and QA in context.
Taste Rules
- Motion is hierarchy over time.
- Do not animate a weak still frame.
- Make one object the hero.
- Use stillness as contrast.
- Keep repeated task motion short and quiet.
- Do not bake exact product text into generated images or videos.
- Treat mobile as separate choreography.
- Never ship meaningful motion without reduced-motion behavior.
Required Spec
Use templates/site-motion/SITE_MOTION_SPEC.md for substantial site motion.
Use rubrics/site-motion-excellence-gate.md before handoff.
Output Shape
Return: motion thesis, first-read diagnosis, still-frame verdict, motion map, runtime choice, reduced-motion plan, implementation tasks, QA proof required, and excellence score.
