publish-element

Remotion Element を公開する

デザインと品質基準の正本は、Element ガイドラインです。変更を加える前に、すべて読んでください。このスキルとガイドラインで合格基準が異なる場合は、ガイドラインに従ってください。

このスキルが担当するのは、技術的な公開ワークフローです。scaffold-element スキルで作成された Element のスキャフォールドを起点とし、初期開発用のスキャフォールドは作成しません。

1. Element の準備ができていることを確認する

次のファイルと、packages/docs/src/components/Elements/element-definitions.ts 内の対応するエントリーがすでに存在することを確認します。

• packages/docs/elements/<category>/<slug>/index.mdx
• packages/docs/elements/<category>/<slug>/<slug>.tsx

このスキルから Studio を起動しないでください。続行する前に、開発者から、docs Remotion Studio で element-<category>-<slug> を目視で確認し、正しく表示されていることを明示的に確認してください。テストの完了やエージェント自身の確認から承認を推測しないでください。開発者が承認していない場合、またはビジュアル面でさらに開発が必要な場合は、次のコマンドを案内して公開ワークフローを中止してください。

bun run build
cd packages/docs
bun run remotion

2. 公開レビューを実施する

完成したソース、MDX ページ、中央定義を、Element ガイドラインとscaffold-element スキルの技術要件に照らしてレビューします。プレースホルダーの内容を解消し、説明、表示名、コントリビューター、寸法、長さ、installationMode、宣言された依存関係、プレビューのパディング、ポスターフレーム、preview オブジェクトを確定してください。

posterUrl と videoUrl が、https://remotion.media/elements/<category>-<slug>-preview.png および .mp4 のフラットなパスを使用していることを確認してください。プレビューアセットは標準の背景に合成し、幅広いブラウザー、ソーシャルカード、埋め込みとの互換性のために、Element 自体が透明度に対応している場合でも MP4 を使用します。これらの明示的な URL が公開時の正本です。

Element に Studio で編集可能なコントロールがある場合は、インタラクティビティのベストプラクティススキルも使用してレビューしてください。

Element が packages/docs で利用できないパッケージをインポートしている場合は、packages/docs/package.json に追加し、bun install を実行して、bun.lock を含めてください。

3. ギャラリーに追加する

• packages/docs/src/components/Elements/element-definitions.ts のエントリーによって、Element が生成される概要ページとカテゴリライブラリに配置されていることを確認します。
• 対応するカテゴリの packages/docs/elements-sidebars.ts に、'<category>/<slug>/index' を追加します。

サイドバーの順序を維持してください。カテゴリインデックスに手動でリンクを追加しないでください。ビジュアルライブラリと生の Markdown ライブラリは、中央定義から生成されます。タスクで新しいカテゴリを明示的に追加する場合は、この手順の一環として、フィルター済みの ElementLibrary をレンダリングするインデックスを作成し、サイドバーグループも追加してください。

ギャラリーへの登録が完了したと判断する前に、Element が概要ページ、カテゴリページ、生成された生の Markdown ルートに表示されることを確認してください。

packages/docs/src/remotion/Root.tsx は編集しないでください。Element のコンポジションは中央定義から生成されます。

4. フォーマットとテスト

変更した TypeScript ファイルと TSX ファイルのみをフォーマットします。通常のファイルについては、次のコマンドを実行します。

bunx oxfmt \
  packages/docs/elements/<category>/<slug>/<slug>.tsx \
  packages/docs/src/components/Elements/element-definitions.ts \
  packages/docs/elements-sidebars.ts \
  --write

cd packages/docs
bun test src/test/elements.test.ts

5. プレビューをレンダリングして確認する

Element Guidelines で必須とされているプレビュー検証を実施します。element-definitions.ts の posterFrame を使用して、新しい Element のみをレンダリングします。

cd packages/docs
mkdir -p .element-previews/<category>/<slug>
bunx remotion still \
  src/remotion/entry.ts \
  element-<category>-<slug> \
  .element-previews/<category>/<slug>/preview.png \
  --frame=<poster-frame> --gl=angle --overwrite
bunx remotion render \
  src/remotion/entry.ts \
  element-<category>-<slug> \
  .element-previews/<category>/<slug>/preview.mp4 \
  --codec=h264 --crf=23 --image-format=png --pixel-format=yuv420p \
  --gl=angle --muted --overwrite
cd ../..

Element を指定せずに render-element-previews を実行しないでください。すべての Element がレンダリングされ、プレビュー出力全体が消去されます。後からアップロードが明示的に依頼された場合は、次を使用します。

cd packages/docs
bun run render-element-previews --element=<category>/<slug> --upload
cd ../..

フィルター付きのコマンドは、その Element のローカルレビュー用のネストされた出力のみを消去して再生成し、明示的に指定されたメタデータ URL を公開先の場所と R2 キーに使用します。

packages/docs/.element-previews/<category>/<slug>/preview.png と preview.mp4 を確認し、両方のパスを開発者に伝えて目視レビューを依頼します。両方のプレビューが正しく見えることを開発者が明示的に確認するまで、作業を停止して待ちます。承認を受けるまで、最終リポジトリチェックを実行したり、公開ワークフローを完了したりしないでください。

アップロードが明示的に依頼され、メンテナーの R2 認証情報が利用可能でない限り、無視対象の出力をコミットしたり、プレビューをアップロードしたりしないでください。

6. 最終リポジトリチェックを実行する

bun run build
bun run stylecheck
git diff --check
git status --short

作業を完了する前に、ページが生成された概要とカテゴリライブラリ、生成された Raw Markdown、サイドバーに含まれていること、すべてのチェックに合格していること、変更に意図したファイルのみが含まれていることを確認します。実行したコマンド、その結果、確認したプレビューファイルを報告します。