Stats
Actions
Tags
From svelte-skills
Provides Svelte CSS styling patterns for scoped styles, CSS custom properties, style: directive, :global, and styling child components. Use when working with dynamic styles or component hierarchies.
How this skill is triggered — by the user, by Claude, or both
Slash command
/svelte-skills:svelte-stylingThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**JS vars in CSS:** Use `style:` directive to set CSS custom properties
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>
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>
<style> blocks are scoped to the component by defaultstyle: directive, not inline style strings, for dynamic values:global for child stylingnpx claudepluginhub spences10/svelte-skills-kit --plugin svelte-skillsProvides best practices for Svelte runes: $state for reactive variables, $derived for computations, minimal $effect use, reactive $props handling, and $inspect.trace debugging. For Svelte component writing, editing, analysis.
Build flexible Svelte 5 components using snippets, {@render}, typed children props, and named content areas. Covers render props, headless patterns, and slot migration.
Builds token-driven Svelte 5 components with runes ($state, $props) and TypeScript. Use when creating Svelte component libraries, integrating design tokens, or building SvelteKit design system components.