mcpField
S
svelte-styling

svelte-styling

github.com/spences10Design & UI94127 installsUpdated 2w ago
Repository

About svelte-styling

A skill with guidance for styling Svelte components. It focuses on dynamic CSS custom properties, child-component styling, scoped styles, and when to use `:global`.

Key features

  1. 01Set dynamic CSS variables with `style:`
  2. 02Pass CSS custom properties to children
  3. 03Use `:global` as a fallback
  4. 04Understand component-scoped styles

Use cases

  1. 01Style dynamic Svelte component values
  2. 02Customize child component appearance
  3. 03Choose between custom properties and `:global`

Install

Copy the command and run it in a terminal.

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

After installing, type/svelte-stylingin Claude Code to confirm it loaded.

Bundled filesreferences/styling-patterns.md

Details

From the project README

Svelte Styling

Quick Start

JS vars in CSS: Use style: directive to set CSS custom properties from JavaScript.

<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>

Styling Child Components

Preferred: Pass CSS custom properties as component props:

<!-- Parent.svelte -->
<Child --color="red" --spacing="1rem" />

<!-- Child.svelte -->
<h1>Hello</h1>

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

Fallback: Use :global when custom properties aren't possible (e.g., library components):

<div>
	<LibraryComponent />
</div>

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

Reference Files

Notes

  • All <style> blocks are scoped to the component by default
  • Use style: directive, not inline style strings, for dynamic values
  • Prefer CSS custom properties over :global for child styling
  • Last verified: 2026-03-12

Comments

Markdown supported