svelte-styling
installsforks
How to install svelte-styling?
spences10/svelte-skills-kit/svelte-styling
$npx -y skills add spences10/svelte-skills-kit --skill svelte-stylingSvelte CSS styling patterns. Use for scoped styles, CSS custom properties, style: directive, :global, or styling child components.
SKILL.md
| 1 | # Svelte Styling |
| 2 | |
| 3 | ## Quick Start |
| 4 | |
| 5 | **JS vars in CSS:** Use `style:` directive to set CSS custom properties |
| 6 | from JavaScript. |
| 7 | |
| 8 | ```svelte |
| 9 | <script> |
| 10 | let columns = $state(3); |
| 11 | </script> |
| 12 | |
| 13 | <div style:--columns={columns}> |
| 14 | {@render children()} |
| 15 | </div> |
| 16 | |
| 17 | <style> |
| 18 | div { |
| 19 | display: grid; |
| 20 | grid-template-columns: repeat(var(--columns), 1fr); |
| 21 | } |
| 22 | </style> |
| 23 | ``` |
| 24 | |
| 25 | ## Styling Child Components |
| 26 | |
| 27 | **Preferred:** Pass CSS custom properties as component props: |
| 28 | |
| 29 | ```svelte |
| 30 | <!-- Parent.svelte --> |
| 31 | <Child --color="red" --spacing="1rem" /> |
| 32 | |
| 33 | <!-- Child.svelte --> |
| 34 | <h1>Hello</h1> |
| 35 | |
| 36 | <style> |
| 37 | h1 { |
| 38 | color: var(--color, blue); |
| 39 | margin: var(--spacing, 0); |
| 40 | } |
| 41 | </style> |
| 42 | ``` |
| 43 | |
| 44 | **Fallback:** Use `:global` when custom properties aren't possible |
| 45 | (e.g., library components): |
| 46 | |
| 47 | ```svelte |
| 48 | <div> |
| 49 | <LibraryComponent /> |
| 50 | </div> |
| 51 | |
| 52 | <style> |
| 53 | div :global { |
| 54 | h1 { color: red; } |
| 55 | } |
| 56 | </style> |
| 57 | ``` |
| 58 | |
| 59 | ## Reference Files |
| 60 | |
| 61 | - [styling-patterns.md](references/styling-patterns.md) - Complete CSS |
| 62 | patterns and techniques |
| 63 | |
| 64 | ## Notes |
| 65 | |
| 66 | - All `<style>` blocks are scoped to the component by default |
| 67 | - Use `style:` directive, not inline style strings, for dynamic values |
| 68 | - Prefer CSS custom properties over `:global` for child styling |
| 69 | - **Last verified:** 2026-03-12 |
| 70 | |
| 71 | <!-- |
| 72 | PROGRESSIVE DISCLOSURE GUIDELINES: |
| 73 | - Keep this file ~50 lines total (max ~150 lines) |
| 74 | - Use 1-2 code blocks only (recommend 1) |
| 75 | - Keep description <200 chars for Level 1 efficiency |
| 76 | - Move detailed docs to references/ for Level 3 loading |
| 77 | - This is Level 2 - quick reference ONLY, not a manual |
| 78 | --> |
People who liked this also viewed
6 picksType
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026
- request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026
- explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026
- ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
