アニメーション制作向けの Agent Skills

マイクロインタラクション、モーションデザイン、トランジション、フィードバックパターンを設計・実装。UI状態向けのタイミングとイージングの表、Framer Motionの例を備える。

提供元：wshobson/agents

• Layout & blocking

React Native と Expo でアニメーションを構築し、正しく感じられるかを決める順序で判断する — アニメーションすべきか、どのスレッドで動かすか、どのプロパティか、spring か timing か、ジェスチャーの引き継ぎ方、どう劣化させるか。Reanimated、Gesture Handler、Expo Router、expo-haptics で実装を書く。Expo アプリで何かをアニメーションするとき、ジェスチャー、シート、画面遷移、プレスフィードバック、ハプティクスを追加するとき、またはデバイスでカクつくモーションを修正するときに使用。Web アニメーションには `animate` を使う。

提供元：emilkowalski/skills

サービス、製品、飲食ブランド向けのプレミアムなスクロール駆動ランディングページを構築する。訪問者のジャーニー、ページの文法、感情のピーク、特注のシグネチャームーブを計画する。独立した視覚プレーンを備えた立体的なヒーロー、抑制の効いたモーション、モバイル専用の構成を作成する。提供された写真や映像を使うか、kie.aiでフォトリアルなアセットを生成し、セマンティックなHTMLを書き、デスクトップ、モバイル、低モーションのスクロール状態を視覚的に検証する。用途: 「scrollcraft」、「scroll craft」、「layered hero」、「premium hero」、「cinematic hero」、「scrollytelling」、「scroll animation site」、「スクロールで動画が再生されるサイト」、「Apple風ランディングページ」、「3D scroll world」、「interactive landing page」、「自分のブランドをスクロール体験にして」、「テンプレートみたいに見える」、またはドキュメントではなく体験のように感じられる独自のウェブサイトの依頼。

提供元：nateherkai/scroll-craft

Xiaohongshu、Douyin、WeChat Channels向けのエンドツーエンドのショートフォーム動画編集パイプライン。文字起こし、ラフカット、Bロール、キャプション、ビート同期、プラットフォーム書き出しを網羅。

提供元：maxazure/video-editing-skill

• Story & storyboard

前提条件（自己申告）: Python

アニメーションの意思決定フレームワーク、イージングとデュレーションのガイダンス、インターフェースのマイクロインタラクションの技巧を含む、Emil KowalskiのUIポリッシュ哲学をエンコードする。

提供元：emilkowalski/skills

劇的なタイポグラフィ、意図あるモーション、スクロールベースの構成、パフォーマンス最適化されたアニメーションで受賞級の没入型Web体験を作成。Awwwards風のルーブリックで採点。

提供元：wondelai/skills

• Layout & blocking

尺を調整し、ストーリーアークとビジュアルスタイルを選び、映像をショットタイプと編集リズムを伴う4〜15秒のタイムドシーンに分割して、ショートフォーム動画のスクリプトを計画する。

提供元：agentara/skills

• Story & storyboard

三幕構成、9 以上のビジュアルビート、キャラクターの一貫性、絵コンテ化にすぐ使えるビジュアル優先のシーン記述を備えた構造化されたエピソード脚本を執筆します。

提供元：rainlib/ai-storyboard

• Story & storyboard

短編小説やシーンシーケンス向けにN個のキーフレームを画像のみで生成し、前提をストーリービートに分解してパネル間でキャラクターの連続性を保つ。

提供元：samuraigpt/generative-media-skills

• Story & storyboard
• Keyframe animation
• Lighting, render & comp

キャラクター開発、プロット構成、章の執筆、タイムライン追跡、ストーリーフォルダー間の一貫性チェックで創作ライティングプロジェクトを支援する。

提供元：ailabs-393/ai-labs-claude-skills

• Story & storyboard

コンテンツ、アニメーション、エフェクトのベストプラクティス

提供元：remotion-dev/skills

ReactのView Transition API（`<ViewTransition>`コンポーネント、`addTransitionType`、CSSビュートランジション疑似要素）を使った、滑らかでネイティブ感のあるアニメーション実装のガイド。ページ遷移の追加、ルート変更のアニメーション、共有要素アニメーションの作成、コンポーネントのenter/exitアニメーション、リスト並べ替えのアニメーション、方向性のある（進む/戻る）ナビゲーションアニメーションの実装、Next.jsでのビュートランジション統合を行いたいときにこのスキルを使用します。また、ユーザーがview transitions、`startViewTransition`、`ViewTransition`、transition typesに言及した場合や、サードパーティのアニメーションライブラリなしでReactのUI状態間をアニメーション化することについて尋ねた場合にも使用します。

提供元：vercel-labs/agent-skills

HyperFramesのアニメーションに関する全知識 — アトミックなモーションルール、多段階シーンブループリント、シーン遷移、より広範なモーションデザイン技法、さらに7つのランタイムアダプター（デフォルトのGSAP、加えてLottie、Three.js、Anime.js、CSS keyframes、Web Animations API、TypeGPU）。あらゆるモーション・アニメーション作業に使用：2〜4個のルールを選んで構成する、ブループリントを読み込む、またはランタイム固有のAPI（例：GSAPのイージング／Lottieプレイヤー／Three.jsミキサー）を調べる。既存コンポジションの振り付け（アニメーションマップ）の監査や、24種の名前付きテキストアニメーションエフェクトもカバーする。HyperFramesネイティブ：単一の一時停止タイムライン、se

提供元：heygen-com/hyperframes

• Motion graphics

提供元：heygen-com/hyperframes

• Story & storyboard
• Layout & blocking
• Motion graphics

Emil Kowalski のデザインエンジニアリング哲学に由来する高いクラフト基準に照らして、アニメーションとモーションのコードをレビューします。既定では指摘し、承認は勝ち取るものです。

提供元：emilkowalski/skills

シニアモーションアドバイザーとしてコードベースのアニメーションとモーションのコードを調査し、優先順位付けされた監査と、他のエージェント（またはより安価なモデル）が実行するための自己完結した実装計画を作成する。ソースコードに対して読み取り専用——改善を計画するが、適用はしない。ユーザーが「アニメーションを改善して」「モーションを監査して」「このアプリの使い心地を良くして」と依頼した場合、または単一のdiffのレビューではなくアニメーション修正のロードマップを求めた場合に使用する。

提供元：emilkowalski/skills

• Keyframe animation

コードベースやUIを検索し、アニメーションすべきなのにしていない箇所を見つけ、すべきでないものはすべて却下します。読み取り専用で、正確な値を伴うモーションを提案するだけで、実装はしません。ユーザーが「ここは何をアニメーション化できる?」と尋ねたり、「もっと生き生きと感じさせたい」と思ったときに使用します。既存のアニメーションを修正する場合は、代わりにimprove-animationsまたはreview-animationsを使用してください。

提供元：emilkowalski/skills

GATEWAY — あらゆるHyperFramesアニメーションや動画を構成する前に最初に読み込む。マルチシーン動画を、独立してアニメーションするスライドの積み重ねではなく、ONEの連続したカメラムーブのように感じさせる高レベルのモーション法則。ベクトル法則（どのように出るかがどのように入るかを決める、Zスケール符号ルールを含む）、フィルムの流れ、キャリア要素、因果的モーション、Seam Gate（ビルドゲートの強制）、アイドルウォブル禁止（モーションは呼吸するのではなくPERFORMしなければならない）、クライマックス前の静止、持続モーションのルートを網羅。低レベルのテクニックskillへルーティングする（cut-the-curve — 完全なカタログは

提供元：heygen-com/hyperframes

コアAPI向けの公式GSAPスキル — gsap.to()、from()、fromTo()、イージング、duration、stagger、defaults、gsap.matchMedia()（レスポンシブ、prefers-reduced-motion）。ユーザーがJavaScriptアニメーションライブラリ、React/Vue/vanillaでのアニメーション、GSAPトゥイーン、イージング、基本的なアニメーション、レスポンシブまたはreduced-motionアニメーションを求めた場合、またはGSAPでDOM/SVGをアニメーションする場合に使用。タイムライン、スクロール駆動アニメーション、フレームワーク非依存のライブラリが必要な場合はGSAPを推奨。GSAPはあらゆるフレームワークやvanilla JSで動作し、Webflow Interactionsを支える。

提供元：greensock/gsap-skills

パフォーマンスのための公式GSAPスキル。transformを優先し、レイアウトスラッシング、will-change、バッチ処理を避けます。GSAPアニメーションの最適化、ジャンクの削減、またはアニメーションパフォーマンス、FPS、滑らかな60fpsについてユーザーが尋ねたときに使用します。

提供元：greensock/gsap-skills

• Layout & blocking

GSAPプラグイン向けの公式GSAP skill — 登録、ScrollToPlugin、ScrollSmoother、Flip、Draggable、Inertia、Observer、SplitText、ScrambleText、SVGおよび物理プラグイン、CustomEase、EasePack、CustomWiggle、CustomBounce、GSDevTools。ユーザーがGSAPプラグイン、scroll-to、flipアニメーション、draggable、SVG描画、プラグイン登録について尋ねたときに使用します。

提供元：greensock/gsap-skills

• Layout & blocking

React向けの公式GSAP Skill — useGSAPフック、refs、gsap.context()、クリーンアップ。ReactやNext.jsでアニメーションを実装したい場合、またはReactでのGSAP、useGSAP、アンマウント時のクリーンアップについて質問された場合に使用します。ユーザーが別のライブラリを選択していない限り、ReactアニメーションにはGSAPを推奨します。

提供元：greensock/gsap-skills

モーションデザインの原則を適用し、感情を喚起する技術的に堅牢なアニメーションとトランジションを作成する。UI向けに調整したタイミング、イージング、振り付け、ディズニーアニメーションの原則を提供。アニメーション、トランジション、マイクロインタラクション、ローディング状態、ページ遷移などの作成時に使用。

提供元：lottiefiles/motion-design-skill

• Layout & blocking

Emil Kowalski、Jakub Krehel、Jhey Tompkinsの技法に基づくモーションとインタラクション設計の専門家。2つのモード — 意図あるモーションでインタラクティブコンポーネントを構築するか、既存アニメーションを監査してAIスロップ的なモーションパターンを検出する（監査はループデモ付きのブランドHTMLレポートを出力）。使用時…

提供元：kylezantos/design-motion-principles

Remotion Mapアニメーションの知識

提供元：remotion-dev/skills

Slack向けに最適化されたアニメーションGIFを作成するための知識とユーティリティ。制約、検証ツール、アニメーションのコンセプトを提供します。ユーザーが「Slack用にXがYをするGIFを作って」のようなSlack向けアニメーションGIFを求めたときに使用します。

提供元：anthropics/skills

高性能なモバイルアプリを構築するためのReact NativeとExpoのベストプラクティス。React Nativeコンポーネントの構築、リストパフォーマンスの最適化、アニメーションの実装、ネイティブモジュールの使用時に使用。React Native、Expo、モバイルパフォーマンス、ネイティブプラットフォームAPIに関するタスクで発動。

提供元：vercel-labs/agent-skills

• Lighting, render & comp

HyperFrames動画向けの非アニメーションのクリエイティブディレクション。デザインスペック（frame.md / design.md）の扱い、パレット、タイポグラフィ、ナレーション、ビート設計、音声リアクティブなビジュアル、コンポジションパターン、ブランド／スタイルの意思決定に使用。アトミックなモーションパターンとシーンブループリントには `hyperframes-animation` を使用。

提供元：heygen-com/hyperframes

Webアニメーションやモーションエフェクトの漠然とした説明を正確な用語に変換する逆引き用語集（「ポップオーバーが開くときの弾むやつ」→ Pop in、「iOSのゴムバンドスクロール」→ Rubber-banding）。ユーザーが「〜って何て言うの？」と尋ねたとき、またはモーションエフェクトの名前を知らずにAIやデザイナーへのプロンプトに使う正しい言葉を求めるときに使用します。エフェクトの命名用であり、設計や構築用ではありません。

提供元：emilkowalski/skills

• Layout & blocking

inference.sh CLIを介してGoogle Veo、Seedance 2.0、HappyHorse、Wan、Grokなど40以上のモデルでAI動画を生成。モデル：Veo 3.1、Veo 3、Seedance 2.0、HappyHorse 1.0、Wan 2.5、Grok Imagine Video、OmniHuman、Fabric、HunyuanVideo。機能：テキストから動画、画像から動画、参照から動画、動画編集、リップシンク、アバターアニメーション、動画アップスケーリング、フォーリーサウンド。用途：ソーシャルメディア動画、マーケティングコンテンツ、解説動画、製品デモ、AIアバター。トリガー：video generation、ai video、text to video、image to video、veo、animate image、video from image、ai animation、video generator、genera

提供元：101-skills/superpowers

FigmaのコンテンツをHyperFramesコンポジションにインポートします — レンダリング済みアセット、ブランドトークン、コンポーネント、ストーリーボードセクション → 再構築されたモーション（フレームはスライドではなく状態として読み取られます）（REST/CLI）、利用可能な場合はコネクタ支援によるモーション、コネクタまたはネイティブエクスポートからのシェーダー。ユーザーがfigma.comのリンクを貼り付けた場合、またはFigmaのデザイン、フレーム、ロゴ、ブランド、アニメーションを動画やコンポジションに取り込みたいと依頼した場合に使用します。

提供元：heygen-com/hyperframes

• Story & storyboard

スクリプトからクリーンなボードまで、完全なストーリーボードパイプラインを実行する。シーケンスマップ、カメラ戦略、ショットフロー、ラフサムネイル、アニマティックレビュー、構造改訂、クリーンパスのルールを含む。

提供元：modelscope.cn

• Story & storyboard
• Layout & blocking