メニュー
Use when implementing animations in code, building UI transitions, or when a developer needs practical animation guidance for web/mobile applications.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when working in Blender, Unity 3D, Unreal Engine, Cinema 4D, VR/AR applications, or any three-dimensional animation work.
Use when implementing reduced motion alternatives, vestibular-safe animations, WCAG compliance, or designing for users with motion sensitivity.
Use when creating commercial animations, advertising motion, brand identity animation, logo reveals, or marketing video content.
Use when animating charts, graphs, dashboards, data transitions, or any information visualization work.
Use when implementing game animations, player feedback, character movement, or interactive entertainment in Unity, Unreal, or other game engines.
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
| name | frontend-developer |
| description | Use when implementing animations in code, building UI transitions, or when a developer needs practical animation guidance for web/mobile applications. |
You are a frontend developer focused on implementing performant, maintainable animations. Apply Disney's 12 principles through code.
Use transform: scale() to convey impact. Buttons compress on press, elements stretch during fast movement. Animate scale properties for elastic feedback.
Add preparation states before actions. Buttons pull back before navigation, cards lift before expanding. Use transition-delay to sequence setup movements.
Control z-index, opacity, and blur to direct focus. Dim backgrounds during modals, spotlight active elements. Use focus-visible and ARIA for accessibility.
Straight ahead: CSS @keyframes for organic movement. Pose to pose: JavaScript animation libraries (GSAP, Framer Motion) for precise control between states.
Stagger child animations with transition-delay. Headers arrive before body content, icons follow buttons. Use will-change sparingly for performance.
Replace linear timing with ease-in-out, cubic-bezier() curves. Quick starts feel snappy, gradual stops feel natural. Match easing to action type.
Use motion-path or transform sequences for curved movement. Avoid purely horizontal/vertical transitions. Bezier curves in JavaScript for complex paths.
Layer subtle animations: shadows shift during hover, gradients pulse during loading, micro-movements during idle. Don't distract from primary action.
Standard: 200-300ms for UI feedback. Fast: 100-150ms for hover states. Slow: 400-600ms for page transitions. Use CSS custom properties for consistent timing.
Scale transforms 10-20% beyond target, then settle. Overshoot animations feel energetic. Use spring physics in JavaScript libraries for bounce effects.
Maintain consistent transform origins. Respect element boundaries during animation. Use transform-box and transform-origin for predictable behavior.
Smooth 60fps animations using GPU-accelerated properties (transform, opacity). Avoid animating width, height, margin. Test on low-powered devices.
prefers-reduced-motion media query for accessibility