Motion Lexicon

Motion Lexiconは、製品モーションのためのデザインシステムです。これは、正確な動作を記述する「Motion Primitives」と、1つ以上の動作を完全でコピー可能な製品インタラクションに変える「Components」という2つの同等のコレクションを結びつけます。ページ構成は、これらのインタラクションを一貫性のある製品サーフェス内に配置します。

ユーザーの製品イベントからデザインを開始します。明確な状態変化、焦点を当てたアクター、およびアクセシブルなハンドオフをサポートする場合にのみコードを生成します。

モードを選択する

リクエスト内のシグナル	モード	成果物
完全なページ、画面、ランディングページ、ダッシュボード、または設定サーフェス	ページを構築	ページ計画、正確なレジストリ構成、動作するページ、受け入れ証拠
感情、用語、または「どのアニメーション」という質問	推薦	ランク付けされた候補と1つの推奨
ワークフロー、遷移、またはマルチステップシーン	構成	モーションブループリントとビート計画
プロダクションコードまたはフレームワーク適応のリクエスト	実装	ポータブルHTML、CSS、JS、または要求されたフレームワークコード
既存のコード、録画、またはジャンクの報告	レビュー	優先順位付けされた診断と具体的な修正
新しいパターン、例、または提案されたライブラリ追加	貢献	メンテナーによるレビュー準備ができた候補レコード

モードの優先順位を決定的に適用します。完全なページまたはマルチリージョンサーフェスは「ページを構築」を使用します。コードまたは1つのインタラクションのフレームワーク実装の明示的なリクエストは「実装」を使用します。デザイン計画、ビート計画、またはブループリントのみのリクエストは「構成」を使用します。「実装」は内部的にブループリントを作成し、ユーザーが要求した実行可能な形式を提供します。「レビュー」リクエストは、現在のインタラクションに大きな変更が必要な場合に、修正されたブループリントを返すことができます。

すべてのリクエストを開始する

ユーザーの言語を保持します。中国語のリクエストには中国語、英語のリクエストには英語を使用します。
製品のジョブ、主要なアクション、その前後のユーザーに表示される状態、主要なアクター、および意図された感情を特定します。
以下のモード×参照テーブルを使用します。現在のタスクに選択されたファイルのみを読み込みます。
リクエストにマテリアルの深み、物理性、またはInteriorビジュアルプロファイルが必要な場合は、interior-principles.mdを読み込みます。
リクエストで製品コンテキストが未定義のままの場合、簡単に仮定を述べます。不足している制約がデザインを変更する場合にのみ、1つの焦点を絞った質問をします。
1つの主要なビジュアルアクターと、最大2つのサポートアクターをビート内に維持します。各アクターに意味論的な種類（トリガー、ヒーロー、ステータス、レコード、または環境）を割り当てます。各ビートに製品目的（方向付け、確認、継続性の維持、明らかにする、または回復）を割り当てます。
構成、実装、またはレビューされたすべてのインタラクションに、動きの低減計画とキーボード/フォーカス動作を含めます。
ページリクエストの場合、スタックを選択する前にホストプロジェクトを検査します。そのルーティング、コンポーネントシステム、デザイントークン、およびコンテンツ言語を保持します。グリーンフィールドページには、ユーザーが別のスタックを要求しない限り、ReactとTypeScriptを使用します。

モード×参照ルーティング

モードまたはタスク	読み込む	関連がある場合のみ追加
ページを構築	page-composition.md, page-system.md, および components.md	ホストに確立されたビジュアルシステムがない場合の motion-lexicon-page.css; ページの主要な状態変化のための1つのモーメントまたはプリミティブ参照
公開されたコンポーネントを推薦	components.md	ユーザーがモーションの仕組みを尋ねた場合の1つのプリミティブファミリー（下記）
1つの動作を推薦	motion-language.md	entrances, feedback, transitions, または sequencing
プロダクトモーメントを構成	composition.md および contract.md	feedback moment, choice moment, change moment, または workflow moment
実装	implementation-css.md	ブループリントを消費または生成する場合の contract.md; 正確な公開コンポーネントの場合の components.md
レビュー	review-rubric.md	観測された動作に一致する1つのプリミティブまたはモーメント参照
貢献	contribution.md および candidate-template.md	必要なブループリントのための contract.md および既存のコンポーネントを除外するための components.md

モーション言語

スキル全体を通じてInteriorに基づくプロファイルを使用します:

マテリアルの深みが方向付けに役立つ場合、ベゼル、隆起したパネル、および凹んだウェルで実際の製品状態をモデル化します。
イベント（押下、選択、ルート変更、ステータス更新、または直接操作）からモーションを開始します。
ラベル、ボタン、レコードがその形状を維持できるように、状態変化のためにスペースを予約します。
新しいコンテキストには到着モーションを使用します: 約200～280msで cubic-bezier(.23, 1, .32, 1)。削除されたコンテキストには退出モーションを使用します: 約110～180msで cubic-bezier(.23, 1, .32, 1)。
移動する作業には transform と opacity を使用します。フィードバックが即時の応答を必要とする場合は、短い色またはフォーカスの遷移を使用します。
2番目のユーザーアクションが最初のアクションを中断、逆転、または解決できるようにします。
動きの低減では、静的な状態または短いopacityクロスフェードを通じて、状態、階層、フォーカス、フィードバックを保持します。

詳細なルールは interior-principles.md を参照してください。

ページを構築

ユーザーのプロジェクトに、完全で実行可能な製品サーフェスを構築します。ページを計画する前に、page-composition.md、page-system.md、およびcomponents.mdを読んでください。

ターゲットリポジトリ、フレームワーク、ルート、既存のトークン、およびインストールされた依存関係を検査します。一貫性がある場合はホストシステムを再利用します。
ファイルを編集する前に、以下に示すホスト検査テーブルとコンパクトなページ計画を出力します。ページのジョブとアーキタイプ、すべての主要なリージョン、正確な公開コンポーネントIDまたは none、主要な状態境界、およびレスポンシブとテーマの決定を含めます。すべてのホスト検査値は、検査されたファイルパスを引用します。散文での実装意図はこのゲートを満たしません。
公開されたコンポーネントには、https://motion-lexicon.pages.dev/r/<id>.json のソースを使用します。編集前に、その files、dependencies、およびランタイムを読み取ります。提供されたソースと依存関係をインストールします。そのprops、ラベル、データ、コールバック、およびホスト配置のみを適応させます。同じコンポーネントの近似値を再生成しないでください。
IDを選択する前に、レジストリ統合ゲートを完了します。現在のすべてのレジストリソースはTailwindユーティリティクラスを使用しています。ホストが既にTailwindをコンパイルしていることを確認するか、ホストツールチェーンの変更がスコープ内にある場合にサポートされているTailwindセットアップを追加します。そのセットアップを追加できない場合は、リージョンに none を選択し、プレーンなセマンティックUIを構築します。レジストリコンポーネントのCSS再実装を黙って貼り付けないでください。JSON URL、ターゲットファイル、依存関係リスト、および必要なランタイムをページ計画に記録します。
統合後にレンダリングされたインタラクティブノードを監査します。ページ標準は少なくとも44x44 CSS pxです。レジストリコンポーネントのデフォルトのビジュアル高さがこれより小さい場合でも同様です。文書化された className prop を通じてホストクラスを渡し、そのノードに min-width と min-height を設定します。ソースが安全なスタイリングフックを提供しない場合は、それを行う適切なコンポーネントを選択するか、リージョンをプレーンなままにします。
ページに1つの支配的な作業サーフェス、1つの主要なモーションモーメント、および最大2つのサポートモーションモーメントを与えます。静的なコンテンツは落ち着かせます。
ホストデザインシステムを使用します。グリーンフィールドサーフェスの場合は、motion-lexicon-page.css をコピーして適応させ、page-system.md の正確な階層とレスポンシブルールを適用します。
ルートまたはページ全体を、そのジョブに属する現実的なコンテンツ、ローディング、空、成功、失敗、および回復状態を含めて提供します。
320、390、768、および1440 pxレイアウト、ライトテーマとダークテーマ、キーボードの順序とフォーカス、動きの低減、44 pxインタラクティブターゲット、オーバーフロー、およびコンソールまたはハイドレーションエラーを確認します。ビルド成功だけではページ受け入れを満たしません。ローカルアプリまたはプロダクションプレビューを起動し、利用可能なブラウザ自動化を使用して主要なアクションを実行し、すべての必要なビューポートでレンダリングされたジオメトリを検査します。プロジェクトにブラウザテストスクリプトがないことはブロッカーではありません。ローカルプレビューに対して利用可能なブラウザツールを使用します。各ビューポートで、表示されているすべての button、リンク、input、select、textarea、およびカスタムインタラクティブノードを列挙し、最小レンダリング幅と高さ、およびいずれかの寸法が44 px未満のノードの offenders リストを記録します。すべてのオフェンダーを修正し、受け入れを報告する前に4つのビューポート監査をすべて再実行します。コマンド、インタラクション、測定値、および観測可能な結果を報告します。

ページ計画は簡潔に保ちます:

## ホスト検査

| 懸念事項 | 観測されたホストの証拠 |
| --- | --- |
| フレームワーク | 名前/バージョン — `package.json` |
| ルート | 現在のルートとターゲットファイル — `src/router.tsx` |
| コンポーネントシステム | 再利用されたコンポーネントまたはなし — `src/components/...` |
| トークン / テーマ | トークンとテーマメカニズム — `src/styles.css` |
| Tailwind | インストール済み/コンパイル済みまたは不在 — `package.json`, `vite.config.ts` |
| 依存関係 | 再利用されたパッケージとバージョン — `package.json` |

## ページ計画

ジョブ: …
アーキタイプ: …
主要アクション: …
主要状態: idle → pending → success/error

| リージョン | 製品目的 | 公開コンポーネント | 状態またはモーション |
| --- | --- | --- | --- |
| … | … | `component-id` または `none` | … |

レジストリ:
- `component-id` — https://motion-lexicon.pages.dev/r/component-id.json —
  `target/file.tsx` — 依存関係: `package` / none

レスポンシブ: 320/390 …; 768 …; 1440 …
テーマ: ライト …; ダーク …; 動きの低減 …

この計画のすべての行が具体的になるまで実装を開始しないでください。

最終的なハンドオフは、中間メッセージが折りたたまれた後も独立して監査可能でなければなりません。完全なホスト検査テーブルとページ計画（リージョンテーブルとレジストリ行を含む）を繰り返し、次に以下の各項目に対して1つの観測行を持つ受け入れテーブルを追加します:

| チェック | 観測された証拠 |
| --- | --- |
| ビルド | コマンドと終了結果 |
| 320 | ビューポート/文書幅、最小ターゲット幅/高さ、オフェンダー数 |
| 390 | ビューポート/文書幅、最小ターゲット幅/高さ、オフェンダー数 |
| 768 | ビューポート/文書幅、最小ターゲット幅/高さ、オフェンダー数 |
| 1440 | ビューポート/文書幅、最小ターゲット幅/高さ、オフェンダー数 |
| ライト / ダーク | 各テーマがどのようにアクティブ化され検査されたか |
| キーボード / フォーカス | 正確なキーパス、フォーカスエントリ、およびフォーカスリターン |
| 動きの低減 | エミュレートされた設定と観測された静的またはクロスフェード結果 |
| ターゲット | 表示されているインタラクティブノードの最小幅と高さの測定値 |
| 主要状態 | 該当するペンディング、成功、エラー/リトライ、および中断状態の実行 |
| ランタイム | コンソール、ページ、リクエスト、およびハイドレーションエラーの数 |

インストールされたコンポーネントIDと変更されたファイルを指定します。観測されていない行には 未完了 を使用し、欠落している機能を述べてください。観測されていないチェックをサポート済みまたは合格として記述しないでください。

ユーザーがMotion Lexiconの外観を要求した場合、コンテンツと情報アーキテクチャを実際の製品に適応させながら、ビジュアルプロファイルとインタラクション品質を保持します。ページをライブラリデモで埋めないようにしてください。

構成

実装の詳細に拡張する前に、Motion Blueprintを作成します。契約として assets/motion-blueprint.schema.json を使用します。すべてのCompose応答には、1つのスキーマ検証済みのフェンスで囲まれたJSONオブジェクトが含まれます。ブループリントの代わりに散文テーブルまたはテキスト図を使用しないでください。チャットでは文字列値をコンパクトに保ち、ユーザーが再利用可能なアーティファクトを要求した場合は、同じJSONをファイルに書き込みます。

すべての beats[].primitive およびすべての provenance.foundations[] 値は、選択された参照からコピーされた正確な公開プリミティブIDでなければなりません。人間のラベルや未公開の疑似IDはブループリント契約を満たしません。

応答する前に、最終的なJSONを一時ファイルに書き込み、次を実行します:

node "$CODEX_HOME/skills/motion-lexicon/scripts/validate-motion-blueprint.mjs" /tmp/blueprint.json

すべての検証エラーを修正し、コマンドが 0 で終了するまで再実行します。フェンスで囲まれたJSONブロックを応答にコピーします。

ブループリントスキーマは6つのビートフィールドを定義します。推奨されるデフォルトのビートセットは次のとおりです:

ビート	目的	プリミティブ	アクター	トリガー
エントリ	コンテキストに入る; 既存のデータがある場合は期待を設定する	到着	トリガー、ヒーロー	マウント
フィードバック	アクションの即時の結果を示す	フィードバック	トリガー	ヒーローアクション
遷移	古い状態から新しい状態への焼き付きのない変化	遷移	ヒーロー	状態解決
確認	変更が定着したことをユーザーに知らせる	フィードバック	ステータス	遷移完了

このテーブルは便宜的なものです。すべての beats[].purpose と beats[].primitive は、参照に一致する任意の値にできます。

ブループリントの例

{
  "$schema": "../../assets/motion-blueprint.schema.json",
  "provenance": {
    "request": "Loading state for a data table",
    "foundations": ["feedback-brief"],
    "developerNotes": "Uses feedback-brief to keep the loading treatment unobtrusive"
  },
  "beats": [
    {
      "id": "entry",
      "purpose": "orient",
      "primitive": "entrances-fade",
      "actors": [
        {
          "kind": "hero",
          "role": "skeleton"
        }
      ],
      "trigger": "mount",
      "timing": "250ms",
      "easing": "cubic-bezier(.23, 1, .32, 1)",
      "reducedMotion": "opacity 200ms"
    },
    {
      "id": "feedback",
      "purpose": "confirm",
      "primitive": "feedback-brief",
      "actors": [
        {
          "kind": "status",
          "role": "indicator"
        }
      ],
      "trigger": "data arrival",
      "timing": "150ms",
      "easing": "cubic-bezier(.23, 1, .32, 1)",
      "reducedMotion": "opacity 100ms"
    }
  ],
  "accessibility": {
    "reducedMotionPlan": "静的なスケルトンからコンテンツへのフェード; インジケータの点滅なし",
    "keyboardBehavior": "データ到着後にテーブル本体にフォーカス"
  },
  "direction": "ステータスフィードバックはスケルトンプレースホルダーの横に配置された小さなドットとして表示。読み込みが完了したらフェードアウト。"
}

検証が合格しなかった場合、ブループリントは出力しません。

実装

ユーザーのプロジェクトで実行可能なコードを提供します。implementation-css.md を読み込んでから編集してください。

モーションブループリント契約を満たす。ユーザーがブループリントの作成を要求しない場合でも、内部的に1つを作成し、そのビート駆動計画に従ってコードを構築します。すべての beats[].primitive 値は、上記の構成モードと同じルールを使用して、選択された参照からコピーされた正確なプリミティブIDでなければなりません。
すべてのコードはベンダープレフィックスなしで、広くサポートされている機能を使用します。transform、opacity、clip-path、mask、filter、およびcolor-mixはすべてのモダンブラウザでポリフィルなしでサポートされています。CSSアニメーションを生成する場合は、最適化可能なプロパティのみをアニメートします（transformおよびopacityが最も効率的です）。
アクセシビリティを含めます。各インタラクションにprefers-reduced-motionメディアクエリ、キーボードイベントハンドラ、およびフォーカス管理を含めます。
フレームワークコードを生成する場合（React、Vue、Svelteなど）、フレームワークの標準に従ってコンポーネント構造を維持します。スタイルにはインラインスタイルまたはCSSモジュールを使用します。
1つのコンポーネントを提供する場合、そのプロパティインターフェースを文書化します。複数のファイルを提供する場合、それらとその関係をリストします。
ユーザーが特定のフレームワークを要求しない限り、出力は常にポータブルなHTML、CSS、JSでなければなりません。
実装ブロックを開始する前に、完全なファイルパスと説明を提供します。

実装例

<!-- 実装例: フェードインアニメーション -->
<div class="fade-in">コンテンツ</div>
<style>
  @media (prefers-reduced-motion: no-preference) {
    .fade-in {
      animation: fadeIn 250ms cubic-bezier(.23, 1, .32, 1);
    }
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
</style>

レビュー

インタラクションを分析し、優先順位付けされた診断を提供します。

review-rubric.md を読み込みます。
提供されたコード、録画、または説明を観測された動作と照らし合わせて検査します。
以下の各基準を合格/不合格/該当なしとして評価します：
- 目的のある状態変化？
- 明確なアクター？
- 適切なタイミング？
- アクセシブルなフォーカス？
- 動きの低減サポート？
- 中断可能なモーション？
各不合格について、正確な問題、根本原因、および具体的な修正を文書化します。
1つの推奨される修正を選択し、選択したモード（実装または構成）を使用してそれを実現する1つのコードサンプルまたはブループリントを含めます。

貢献

新しいパターンをMotion Lexiconに追加します。

contribution.md および candidate-template.md を読み込みます。
既存のcomponents.mdを確認して、重複を排除します。
contract.md に従ってブループリントを作成します。
候補テンプレートに記入します。
保守担当者によるレビューの準備ができた候補レコードとして返します。

参考文献の読み込み

スキルは、ファイルの読み込みに相対パスを使用します。これらは、このSKILL.mdと同じディレクトリ構造にあります。参照読み込みのルールは次のとおりです:

正確なルールについては常に完全なマークダウンファイルを読み込みます。
ファイルパスはスキルルートディレクトリを基準にしています。
同じファイルを複数回読み込まないでください。
参照ファイルを変更する必要はありません。

スキルは、次のベースURLからのレジストリコンポーネントも参照します: https://motion-lexicon.pages.dev/r/<id>.json。

モーション・レキシコン