mcpField
S
svelte-styling

svelte-styling

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

svelte-styling について

コンポーネント CSS を扱う Svelte 開発者向けのスタイリングスキルです。動的な CSS 値、子コンポーネントのスタイル、条件付きクラスのパターンを扱います。

主な機能

  1. 01`style:` による CSS 変数の設定
  2. 02CSS プロパティによる子コンポーネントのスタイル
  3. 03代替手段としての `:global`
  4. 04配列やオブジェクトによる条件付きクラス

活用シーン

  1. 01JavaScript から動的なレイアウト値を設定
  2. 02子コンポーネントやライブラリのスタイル設定
  3. 03スコープ付き CSS とグローバル CSS の選択

インストール

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

$npx skills add https://github.com/spences10/skills --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>

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

<div>
	<LibraryComponent />
</div>

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

参照ファイル

注意事項

  • すべての <style> ブロックは、デフォルトでコンポーネントにスコープされます
  • 動的な値には、インラインの style 文字列ではなく style: ディレクティブを使用します
  • 子コンポーネントのスタイリングには、:global より CSS カスタムプロパティを優先します
  • 条件付きクラスには、class={...} でクラスの配列またはオブジェクトを優先して使用します
  • 最終確認日： 2026-05-14

コメント

Markdown 対応