菜单
Svelte CSS styling patterns. Use for scoped styles, CSS custom properties, style: directive, :global, or styling child components.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | svelte-styling |
| description | Svelte CSS styling patterns. Use for scoped styles, CSS custom properties, style: directive, :global, or styling child components. |
| metadata | {"last_updated":"2026-05-14","verified_against":"Svelte 5 official docs and current local skill refresh"} |
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 stylingclass={...} for conditional classesCoordinate parallel agent work. Use when decomposing complex tasks, running review/implementation in parallel, managing task lists, or choosing shared vs isolated workspaces.
Svelte deployment guidance. Use for adapters, Vite config, pnpm setup, library authoring, PWA, or production builds.
SvelteKit data flow guidance. Use when working with load functions, form actions, server/client boundaries, serialization, or invalidation.
Implement SvelteKit remote functions. Use for query(), query.live(), form(), command(), and prerender() patterns in .remote.ts files.
SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.
Svelte 5 core best practices. Use when creating, editing, or reviewing .svelte, .svelte.ts, or .svelte.js files. Routes to deeper Svelte skills.