Generates comprehensive documentation for Svelte 5 components, including runes, reactivity patterns, and component structure
This skill has safety concerns that you should review before use. Some patterns were detected that may pose a risk.Safety score: 60/100.
KillerSkills scans all public content for safety. Use caution before installing or executing flagged content.
Generate comprehensive, well-structured documentation for Svelte 5 components, features, and patterns following official Svelte documentation standards.
This skill helps you create detailed documentation for Svelte 5 codebases, covering:
When generating Svelte 5 documentation, follow these steps:
Organize documentation with clear sections:
**Overview**
**API Reference**
**Usage Examples**
**Reactive Patterns**
**Styling**
**TypeScript**
**Testing**
**Runes syntax:**
```javascript
// State
let count = $state(0);
let user = $state({ name: 'Alice' });
// Derived
let doubled = $derived(count * 2);
// Effect
$effect(() => {
console.log(`Count is ${count}`);
});
// Props
let { title, description = 'Default' } = $props();
// Bindable (for two-way binding)
let { value = $bindable() } = $props();
```
**Component structure:**
```svelte
<script lang="ts">
// Imports
// Type definitions
// Props with $props()
// State with $state()
// Derived values with $derived()
// Effects with $effect()
// Functions
</script>
<!-- Template -->
<style>
/* Scoped styles */
</style>
```
**Template syntax patterns:**
Provide clear, runnable examples:
**Basic Example:**
```svelte
<script lang="ts">
let count = $state(0);
function increment() {
count++;
}
</script>
<button onclick={increment}>
Clicked {count} times
</button>
```
**Advanced Example with Multiple Runes:**
```svelte
<script lang="ts">
type Props = {
initialValue?: number;
onChange?: (value: number) => void;
};
let { initialValue = 0, onChange } = $props<Props>();
let count = $state(initialValue);
let doubled = $derived(count * 2);
$effect(() => {
onChange?.(count);
});
</script>
<div>
<p>Count: {count}</p>
<p>Doubled: {doubled}</p>
<button onclick={() => count++}>Increment</button>
</div>
```
If relevant, include migration notes:
**Before (Svelte 4):**
```svelte
<script>
export let value = 0;
let doubled;
$: doubled = value * 2;
</script>
```
**After (Svelte 5):**
```svelte
<script>
let { value = 0 } = $props();
let doubled = $derived(value * 2);
</script>
```
Link to official documentation:
Generate documentation as a Markdown file with:
1. **Be Accurate**: Base documentation on actual code behavior
2. **Be Concise**: Clear, brief explanations without unnecessary detail
3. **Be Practical**: Focus on real-world usage patterns
4. **Be Complete**: Cover all public APIs and common use cases
5. **Use Examples**: Show don't tell - provide working code samples
6. **Stay Current**: Use Svelte 5 runes and patterns, not legacy syntax
7. **Type Everything**: Include TypeScript types for props and functions
8. **Explain Reactivity**: Clearly describe state flow and side effects
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/svelte-5-documentation-generator/raw