style-library について
style-library は、動画プロジェクトで再利用可能なスタイルカードやテンプレートを選び、組み込むためのスキルです。カタログの絞り込み、依存ファイルの扱い、レンダー結果の確認を案内します。
主な機能
- 01階層や用途でスタイルを絞り込み
- 02デザイントークンとスロット制限を確認
- 03依存ファイルとカードをコピー
- 04選択したカードを検査・レンダー
- 05スタイル追加後にレジストリを再構築
活用シーン
- 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を実行します。プロジェクト固有の文言はプロジェクト内に置き、再利用可能なライブラリカードは汎用のままにします。