svelte-template-directives

Name: svelte-template-directives
Author: spences10

83installs2forks

How to install svelte-template-directives?

spences10/svelte-skills-kit/svelte-template-directives

$npx -y skills add spences10/svelte-skills-kit --skill svelte-template-directives

Installs into the current project.

Summary

Svelte template directives ({@attach}, {@html}, {@render}, {@const}, {@debug}). Use for DOM manipulation, third-party libs, tooltips, canvas, dynamic HTML. @attach replaces use: actions.

Files · 1

View on GitHub

SKILL.md

1	# Svelte Template Directives
2
3	## @attach (Svelte 5.29+)
4
5	The reactive alternative to `use:` actions. Re-runs when dependencies
6	change, passes through components via spread, supports cleanup functions.
7
8	```svelte
9	<script>
10	import ImageZoom from 'js-image-zoom';
11
12	function useZoom(options) {
13	return (element) => {
14	new ImageZoom(element, options);
15	return () => console.log('cleanup');
16	};
17	}
18	</script>
19
20	<!-- Re-runs if options changes (use: wouldn't!) -->
21	<figure {@attach useZoom({ width: 400 })}>
22	<img src="photo.jpg" alt="zoomable" />
23	</figure>
24	```
25
26	## Quick Reference
27
28	\| Directive \| Purpose \| Reactive? \|
29	\| ---------------- \| ------------------------------ \| --------- \|
30	\| `{@attach}` \| DOM manipulation, 3rd-party \| Yes \|
31	\| `{@html}` \| Render raw HTML strings \| Yes \|
32	\| `{@render}` \| Render snippets \| Yes \|
33	\| `{@const}` \| Local constants in blocks \| N/A \|
34	\| `{@debug}` \| Pause debugger on value change \| N/A \|
35	\| `{#each (key)}` \| Keyed iteration (always key!) \| Yes \|
36	\| `<svelte:window>` \| Window event listeners \| N/A \|
37
38	## @attach vs use: Actions
39
40	\| Feature \| `use:` \| `@attach` \|
41	\| --------------------- \| ------- \| ------------------- \|
42	\| Re-runs on arg change \| No \| Yes \|
43	\| Composable \| Limited \| Fully \|
44	\| Pass through props \| Manual \| Auto via spread \|
45	\| Convert legacy \| N/A \| `fromAction()` \|
46
47	## Reference Files
48
49	- [attach-patterns.md](references/attach-patterns.md) - Real-world @attach
50	examples
51	- [other-directives.md](references/other-directives.md) - @html, @render,
52	@const, @debug
53
54	## Notes
55
56	- `@attach` requires Svelte 5.29+
57	- Use `fromAction` from `svelte/attachments` to convert legacy actions
58	- Attachments pass through wrapper components when you spread props
59	- Always use keyed each blocks — never use index as key
60	- Use `<svelte:window>`/`<svelte:document>` for global events, not `$effect`
61	- Last verified: 2026-03-12
62
63	<!--
64	PROGRESSIVE DISCLOSURE GUIDELINES:
65	- Keep this file ~50 lines total (max ~150 lines)
66	- Use 1-2 code blocks only (recommend 1)
67	- Keep description <200 chars for Level 1 efficiency
68	- Move detailed docs to references/ for Level 3 loading
69	- This is Level 2 - quick reference ONLY, not a manual
70	-->

People who liked this also viewed

6 picks

Type

svelte-template-directives

83installs2forks

View on GitHub

How to install svelte-template-directives?

spences10/svelte-skills-kit/svelte-template-directives

$npx -y skills add spences10/svelte-skills-kit --skill svelte-template-directives

Installs into the current project.

Summary

Svelte template directives ({@attach}, {@html}, {@render}, {@const}, {@debug}). Use for DOM manipulation, third-party libs, tooltips, canvas, dynamic HTML. @attach replaces use: actions.

Files · 1

View on GitHub

SKILL.md

1	# Svelte Template Directives
2
3	## @attach (Svelte 5.29+)
4
5	The reactive alternative to `use:` actions. Re-runs when dependencies
6	change, passes through components via spread, supports cleanup functions.
7
8	```svelte
9	<script>
10	import ImageZoom from 'js-image-zoom';
11
12	function useZoom(options) {
13	return (element) => {
14	new ImageZoom(element, options);
15	return () => console.log('cleanup');
16	};
17	}
18	</script>
19
20	<!-- Re-runs if options changes (use: wouldn't!) -->
21	<figure {@attach useZoom({ width: 400 })}>
22	<img src="photo.jpg" alt="zoomable" />
23	</figure>
24	```
25
26	## Quick Reference
27
28	\| Directive \| Purpose \| Reactive? \|
29	\| ---------------- \| ------------------------------ \| --------- \|
30	\| `{@attach}` \| DOM manipulation, 3rd-party \| Yes \|
31	\| `{@html}` \| Render raw HTML strings \| Yes \|
32	\| `{@render}` \| Render snippets \| Yes \|
33	\| `{@const}` \| Local constants in blocks \| N/A \|
34	\| `{@debug}` \| Pause debugger on value change \| N/A \|
35	\| `{#each (key)}` \| Keyed iteration (always key!) \| Yes \|
36	\| `<svelte:window>` \| Window event listeners \| N/A \|
37
38	## @attach vs use: Actions
39
40	\| Feature \| `use:` \| `@attach` \|
41	\| --------------------- \| ------- \| ------------------- \|
42	\| Re-runs on arg change \| No \| Yes \|
43	\| Composable \| Limited \| Fully \|
44	\| Pass through props \| Manual \| Auto via spread \|
45	\| Convert legacy \| N/A \| `fromAction()` \|
46
47	## Reference Files
48
49	- [attach-patterns.md](references/attach-patterns.md) - Real-world @attach
50	examples
51	- [other-directives.md](references/other-directives.md) - @html, @render,
52	@const, @debug
53
54	## Notes
55
56	- `@attach` requires Svelte 5.29+
57	- Use `fromAction` from `svelte/attachments` to convert legacy actions
58	- Attachments pass through wrapper components when you spread props
59	- Always use keyed each blocks — never use index as key
60	- Use `<svelte:window>`/`<svelte:document>` for global events, not `$effect`
61	- Last verified: 2026-03-12
62
63	<!--
64	PROGRESSIVE DISCLOSURE GUIDELINES:
65	- Keep this file ~50 lines total (max ~150 lines)
66	- Use 1-2 code blocks only (recommend 1)
67	- Keep description <200 chars for Level 1 efficiency
68	- Move detailed docs to references/ for Level 3 loading
69	- This is Level 2 - quick reference ONLY, not a manual
70	-->

People who liked this also viewed

6 picks

Type