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.
npx claudepluginhub spences10/svelte-skills-kit --plugin svelte-skillsThis skill uses the workspace's default tool permissions.
**JS vars in CSS:** Use `style:` directive to set CSS custom properties
Guides Svelte 5 best practices for reactivity using $state, $derived, $effect, $props; covers event handling, styling, library integration. For writing/editing Svelte components.
Guides Svelte and SvelteKit development for reactive components, stores, transitions, lifecycle hooks, SSR, file-based routing, and Vite deployment.
Provides step-by-step guidance, code generation, and best practices for styled-components helper tasks in React, Vue, and CSS frontend development. Activates on phrases like 'styled components helper'.
Share bugs, ideas, or general feedback.
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 styling