本文へ移動
cccskills
無料GitHub で公開

motion-engine

Use when a web project needs animation or motion-tool selection across native CSS/WAAPI/View Transitions, Motion, Anime.js, GSAP, Lenis, scroll choreography, SVG/text animation, or synchronized motion systems.

インストール方法を見る

含まれるファイル(7)

  • SKILL.md1.9 KB
  • agents/openai.yaml236 B
  • references/animejs.md499 B
  • references/capability-matrix-2026.md3.5 KB
  • references/gsap-lenis.md471 B
  • references/motion.md422 B
  • references/tool-router.md849 B

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Motion Engine

Rule: intent first, engine second

Read references/tool-router.md and references/capability-matrix-2026.md and choose the smallest engine that cleanly implements the interaction.

Native first

Use CSS transitions/keyframes, WAAPI, CSS Scroll-Driven Animations or View Transitions when they cover the behavior cleanly.

Motion

Prefer for React state/layout/shared-layout, presence, gestures, springs and common scroll-linked UI motion. Read references/motion.md.

Anime.js

Prefer for precise lightweight timelines, staggered choreography, SVG/text/value animation and deterministic sequencing. Read references/animejs.md.

GSAP

Prefer for advanced multi-part timelines, ScrollTrigger pin/scrub, Flip, SplitText, MotionPath and complex scroll/DOM/3D orchestration. Read references/gsap-lenis.md.

Lenis

Use only when smooth scrolling or a normalized scroll signal is an intentional part of the experience. Native scroll remains the default.

Cross-engine discipline

  • Do not install two engines that solve the same job unless distinct capabilities are actively used.
  • If multiple systems animate in the same frame, coordinate update loops rather than creating uncontrolled RAF competition.
  • Preserve logical state when motion is disabled.
  • Keep transform/opacity animation compositor-friendly where possible; avoid layout thrash in scroll handlers.
  • Pause offscreen or nonessential animation.

Output

For notable motion, record: Intent → Engine → Why → Reduced-motion behavior → Performance risk.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Use for release-level accessibility and performance review, including WCAG 2.2 AA, keyboard/focus, target size, reduced motion, semantic controls, Core Web Vitals, images/fonts/JavaScript, and animation or 3D performance budgets.

日本語の概要は準備中です。原文の説明を表示しています。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use to audit a generated or heavily templated interface for generic AI aesthetics, unjustified trend patterns, component-registry residue, vague copy, repetitive motion, novelty theater, or visual decisions that lack brand/UX rationale.

日本語の概要は準備中です。原文の説明を表示しています。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use when a website needs a strong visual point of view, distinct concept routes, composition, typography, color/materiality, imagery direction, spatial rhythm, or a memorable signature idea.

日本語の概要は準備中です。原文の説明を表示しています。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use when deciding whether to implement UI from native HTML/CSS, accessible primitives, shadcn-style source components, or visual component registries such as 21st.dev, Aceternity, React Bits, Motion Primitives, Magic UI, or Animate UI.

日本語の概要は準備中です。原文の説明を表示しています。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use after substantial web projects or repeated design defects to convert evidence into reusable skill improvements through root-cause analysis, regression scenarios, and controlled proposals without silently changing the core OS.

日本語の概要は準備中です。原文の説明を表示しています。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use when the design concept calls for Three.js or React Three Fiber 3D, WebGL/WebGPU, Rive, Spline, Theatre.js, SVG, canvas, shaders, particle systems, or other immersive creative-web techniques.

日本語の概要は準備中です。原文の説明を表示しています。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Lrinvl1203 のスキルをすべて見る

このスキルの問題を報告する