mcpField
A
animation-principles

animation-principles

github.com/raphaelsalajaその他4210 回インストール今日更新
リポジトリ

animation-principles について

コントロール、リスト、オーバーレイ、登場アニメーションの構成を確認するスキルです。押下フィードバックや変形、スタガー、焦点を調べ、コードを変更せずに指摘を報告します。

主な機能

  1. 01操作時の押下フィードバック確認
  2. 02変形とスケールのレビュー
  3. 03リストのスタガー時間確認
  4. 04アニメーションの焦点評価
  5. 05オーバーレイの暗転と重なり確認

活用シーン

  1. 01操作コントロールの動きのレビュー
  2. 02リスト登場アニメーションの確認
  3. 03オーバーレイやダイアログの動きの評価

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/raphaelsalaja/skills --skill animation-principles

インストール後、Claude Code で/animation-principlesを入力して読み込まれたか確認します。

同梱ファイルagents/openai.yaml

詳細

アニメーションの原則

このスキルでは、タイミング関数を選んだ後にモーションがどのように演出されているかを確認します。押下時のフィードバック、変形、スタガー、フォーカスをチェックします。

すべてのチェックはペアです。問題のある行と、それを置き換える行を並べて示します。

以下の押下時のスケール、スクワッシュ、スタガーの値は厳密です。コントロールに押下時のフィードバックがないプロジェクトは指摘事項です。一貫して 0.98 前後のスケールを使っているプロジェクトは該当しません。曲線、300ms の上限、コンテキストメニューの表示アニメーションは timing-functions で扱います。退出時のマウント解除は exit-animations で扱います。

使用するタイミング

コントロール、リスト、オーバーレイ、または表示アニメーションを追加・レビューするときに使用します。スプリングかイージングかが問題の場合は、まず timing-functions を使用します。コンポーネントがツリーから消えない場合は、exit-animations を使用します。

1. 対象のモーションを確認する

ユーザーが指定したファイルを読みます。指定がない場合は、どの画面をレビューするのか尋ねます。アニメーションする各要素と、それが押下、リストの表示、オーバーレイ、背景の装飾のどれに当たるかを記録します。

2. 演出を確認する

類似するコントロールは同じ duration を使用します。プライマリボタンが 200ms、セカンダリボタンが 150ms であれば、timing-consistent に該当します。

インタラクティブなコントロールにはアクティブ時のスケールが必要です。公開されている押下時のスケールは 0.98 です。スクワッシュとストレッチは 0.95 から 1.05 の範囲に収めます。whileTap が 0.8 の場合は physics-subtle-deformation に該当します。

スタガーは項目あたり 50ms 未満にします。staggerChildren: 0.03 は問題ありません。0.15 は physics-no-excessive-stagger に該当します。

目立つアニメーションを同時に実行する要素は1つだけにします。これは staging-one-focal-point に該当します。モーダルやダイアログでは、背後を background: var(--black-a6) のように暗くします。これは staging-dim-background に該当します。兄弟要素の下に描画される可能性があるツールチップやオーバーレイは、staging-z-index-hierarchy に該当します。

オーバーシュートに使うスプリング、イージング曲線、300ms の上限については timing-functions を参照します。duration に関する指摘には、そのスキルを併記してください。ここで曲線の表を再掲しないでください。

3. 報告して終了する

指摘事項を記述し、その後に概要表を記載します。ユーザーから修正を依頼されていない限り、報告中にモーションのスタイルを変更しないでください。

ペア

すべてのチェックはペアです。問題のある行と、それを置き換える行を並べて示します。

ルール問題のある例置き換え例
timing-consistent.button-primary { transition: 200ms } および .button-secondary { transition: 150ms }両方のコントロールを transition: 200ms にする
physics-active-state.button:hover { background: var(--gray-3) } で :active がない.button:active { transform: scale(0.98) }
physics-subtle-deformationwhileTap={{ scale: 0.8 }}whileTap={{ scale: 0.98 }}
physics-no-excessive-staggerstaggerChildren: 0.15staggerChildren: 0.03
staging-one-focal-point2つの兄弟要素がどちらも animate={{ scale: 1.1 }}1つの要素に表示アニメーションを持たせる
staging-dim-background.overlay { background: transparent }.overlay { background: var(--black-a6) }
staging-z-index-hierarchyスタッキングの指定がない .tooltip {}.tooltip { z-index: 50 }

報告

重大度。 このスキルの段階基準を使用します。好みの問題を HIGH に引き上げないでください。

検証。 対象ファイルで宣言されている値を読み取ります。ブラウザーの使用は任意です。実行できなかったチェックには Not verified と記載します。

形式。 根本原因ごとに指摘事項を1件記載します。

file:line - [rule-id] what is wrong

続いて概要を記載します。

ルール件数重大度

HIGH が1件でも残っている場合は Block とします。それ以外は Approve とし、重大度の低い行も表に残します。読んでいないファイルを Approve にしないでください。報告事項がない場合は「対応が必要な指摘事項はありません」と記載し、未検証の項目を列挙します。

コメント

Markdown 対応