mcpField
S
studio-css-reset

studio-css-reset

github.com/remotion-devデザイン・UI68.6k483 回インストール今日更新
リポジトリ

studio-css-reset について

Remotion Studioのコントリビューター向けCSSガイドスキルです。`.css-reset`の適用範囲と、入れ子要素に明示的なスタイル指定が必要な理由を説明します。

主な機能

  1. 01リセットコンテナーの適用範囲を説明
  2. 02リセットされるプロパティを列挙
  3. 03子孫要素のスタイル動作を解説
  4. 04入れ子要素への明示的な指定を推奨

活用シーン

  1. 01リセットコンテナー内のテキストをスタイル設定
  2. 02Studio UI内のSVG図形をスタイル設定
  3. 03親要素のスタイルが子孫に反映されない原因を調査

インストール

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

$npx skills add https://github.com/remotion-dev/remotion --skill studio-css-reset

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

同梱ファイルagents/openai.yaml

詳細

Studio の CSS リセット

Studio では、ユーザースタイルが UI に及ぼす影響を抑えるため、.css-reset コンテナーを使用します。バンドラーは packages/bundler/src/setup-environment.ts で次のルールを挿入します。

.css-reset, .css-reset * {
  font-size: 16px;
  line-height: 1.5;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  background: transparent;
  box-sizing: border-box;
}

このルールは各リセットコンテナーとそのすべての子孫に適用されますが、対象となるのは表示されているプロパティのみです。これらのコンテナーの外にある要素には適用されず、より強いユーザー CSS ルールが優先されるのを防ぐものでもありません。

必ず守るルール

このリセットで対象となるプロパティについて、継承に依存しないでください。各子孫要素にはそれぞれ独自のリセット値が適用されるため、親要素だけをスタイル設定しても、ネストされたテキストや SVG の図形には適用されません。必要な値は、それを描画する要素に設定するか、その子孫を明示的に指定する CSS セレクターを使用してください。

コメント

Markdown 対応