ReddRadar
Agent skill
svelte-styling
Install this agent skill to your Project
npx add-skill https://github.com/spences10/svelte-skills-kit/tree/main/plugins/svelte-skills/skills/svelte-styling
SKILL.md
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
:globalfor child styling - Last verified: 2026-03-12
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
spences10/svelte-skills-kit
sveltekit-data-flow
SvelteKit data flow guidance. Use for load functions, form actions, server/client data, and invalidation. Covers +page.server.ts vs +page.ts, serialization, fail(), redirect(), error(), invalidateAll().
spences10/svelte-skills-kit
sveltekit-structure
SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.
spences10/svelte-skills-kit
layerchart-svelte5
LayerChart Svelte 5 patterns. Use for chart components with tooltip snippets, Chart context access, and all Svelte 5 snippet patterns for tooltips, gradients, highlights, and axes.
spences10/svelte-skills-kit
svelte-runes
Svelte runes guidance. Use for reactive state, props, effects, or migration. Covers $state, $derived, $effect, $props, $bindable. Prevents reactivity mistakes.
spences10/svelte-skills-kit
svelte-deployment
Svelte deployment guidance. Use for adapters, Vite config, pnpm setup, library authoring, PWA, or production builds.
spences10/svelte-skills-kit
svelte-template-directives
Didn't find tool you were looking for?