style-library について
スタイルライブラリから再利用可能なモーションデザインのカードやテンプレートを選び、動画コンポジション向けに調整するスキルです。アセットのローカライズ、スロット設定、レンダリング品質の確認を案内します。
主な機能
- 01スタイルを階層と用途で絞り込み
- 02デザイントークンとスロット上限の確認
- 03オーバーレイや全面表示向けのカード調整
- 04CSS・フォント・依存関係のローカライズ
- 05Lintとレンダリングによる品質確認
活用シーン
- 01動画に使う再利用可能なスタイルの選択
- 02コンポジションへのカードオーバーレイ追加
- 03プロジェクト解像度でのカード検証
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/style-libraryを入力して読み込まれたか確認します。
詳細
スタイルライブラリを再利用する
style-library/GUIDE.mdを読み、続けてstyle-library/registry.jsonを読みます。スタイル、ティア、用途で絞り込んでから、個別のカードを開きます。選択したスタイルのDESIGN.md、tokens.css、およびマニフェストのスロット上限を確認します。
オーバーレイでは、カードの外側と話者の顔の周囲の透明度を保ちます。全面表示では、不透明な背景を使用します。選んだカードを動画のcompositions/にコピーし、CSS、フォント、GSAPの依存関係をローカライズして、名前付きのdata-slot値を入力し、HyperFramesスキルを使ってタイミングを設定します。相対依存関係を含めずにカードをコピーしても、アセットは完成しません。
シーン全体のひな形としてstyle-templates/を使用します。メディアテンプレートでは、学生自身のassets/source.mp4が必要な場合があります。レンダリングする前にREADMEを確認してください。
カタログにはドラフトのリソースが含まれており、すべてのカードがレンダリングQAに合格しているとは限りません。選択したカードを実際のプロジェクト解像度でリントおよびレンダリングし、ヒーローフレームとトランジションを確認して、スロットのテキストが最大長の場合もチェックします。
スタイルを追加する場合は、node scripts/style-library/new-style.mjs 03 my-style "My Style"を実行し、デザイントークン、マニフェスト、カードを完成させます。マニフェストを変更した後は、node scripts/style-library/build-registry.mjsを実行します。プロジェクト固有の文言はプロジェクト内に置き、再利用可能なライブラリカードは汎用のままにします。