Svelte styling

Portable Agent Skills for coding agents, including Svelte/SvelteKit and workflow tooling skills.

Install

npx -y skills add spences10/skills --skill svelte-styling

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
13 stars13 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Svelte CSS styling patterns. Use for scoped styles, CSS custom properties, style: directive, :global, or styling child components.

SKILL.md

1.9 KB, as published. Nobody here has run it

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

styling-patterns.md - Complete CSS patterns and techniques

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
Prefer class arrays/objects in class={...} for conditional classes
Last verified: 2026-05-14