About svelte-styling
A Svelte styling skill for developers working with component CSS. It covers dynamic CSS values, child-component styling, and patterns for conditional classes.
Key features
- 01Set CSS variables with `style:`
- 02Style child components with CSS properties
- 03Use `:global` as a fallback
- 04Apply conditional class arrays or objects
Use cases
- 01Setting dynamic layout values from JavaScript
- 02Styling child or library components
- 03Choosing scoped and global CSS patterns
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/svelte-stylingin Claude Code to confirm it loaded.
Bundled filesreferences/styling-patterns.md
Details
From the project READMESvelte 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
:globalfor child styling - Prefer class arrays/objects in
class={...}for conditional classes - Last verified: 2026-05-14
Comments
Markdown supported