Svelte 5 Documentation Generator

Generate comprehensive, well-structured documentation for Svelte 5 components, features, and patterns following official Svelte documentation standards.

Purpose

This skill helps you create detailed documentation for Svelte 5 codebases, covering:

Instructions

When generating Svelte 5 documentation, follow these steps:

1. Analyze the Component or Feature

2. Structure the Documentation

Organize documentation with clear sections:

**Overview**

**API Reference**

**Usage Examples**

**Reactive Patterns**

**Styling**

**TypeScript**

**Testing**

3. Follow Svelte 5 Conventions

**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:**

4. Include Code Examples

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>

```

5. Document Migration from Svelte 4

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>

```

6. Add Reference Links

Link to official documentation:

Output Format

Generate documentation as a Markdown file with:

Best Practices

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

Notes