mcpField
S
svelte-styling

svelte-styling

github.com/spences10デザイン・UI94127 回インストール2 週間前に更新
リポジトリ

svelte-styling について

Svelteコンポーネントのスタイリングを解説するスキルです。動的なCSSカスタムプロパティ、子コンポーネントのスタイル、スコープ付きスタイル、`:global`の使いどころを扱います。

主な機能

  1. 01`style:`による動的CSS変数の設定
  2. 02子コンポーネントへのCSSカスタムプロパティの受け渡し
  3. 03代替手段としての`:global`の使用
  4. 04コンポーネント単位のスコープ付きスタイル

活用シーン

  1. 01Svelteコンポーネントの動的な値のスタイリング
  2. 02子コンポーネントの外観調整
  3. 03カスタムプロパティと`:global`の選択

インストール

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

$npx skills add https://github.com/spences10/svelte-skills-kit --skill svelte-styling

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

同梱ファイルreferences/styling-patterns.md

詳細

Svelte のスタイリング

クイックスタート

CSS 内の JS 変数： JavaScript から CSS カスタムプロパティを設定するには、 style: ディレクティブを使用します。

<script>
	let columns = $state(3);
</script>

<div style:--columns={columns}>
	{@render children()}
</div>

<style>
	div {
		display: grid;
		grid-template-columns: repeat(var(--columns), 1fr);
	}
</style>

子コンポーネントのスタイリング

推奨： CSS カスタムプロパティをコンポーネントの props として渡します。


<Child --color="red" --spacing="1rem" />


<h1>Hello</h1>

<style>
	h1 {
		color: var(--color, blue);
		margin: var(--spacing, 0);
	}
</style>

代替方法： カスタムプロパティを使用できない場合 （ライブラリコンポーネントなど）は、:global を使用します。

<div>
	<LibraryComponent />
</div>

<style>
	div :global {
		h1 { color: red; }
	}
</style>

参考ファイル

注意事項

  • すべての <style> ブロックは、デフォルトでコンポーネントにスコープされます
  • 動的な値には、インラインの style 文字列ではなく style: ディレクティブを使用します
  • 子コンポーネントのスタイリングには、:global より CSS カスタムプロパティを優先します
  • 最終確認日： 2026-03-12

コメント

Markdown 対応