svelte-code-writer
Build and fix Svelte 5 components with official tools
Struggling with Svelte 5 runes and modern patterns? Access official documentation and automated code fixes directly in your workflow.
Download the skill ZIP
Upload in Claude
Go to Settings → Capabilities → Skills → Upload skill
Toggle on and start using
Test it
Using "svelte-code-writer". Analyze a component with potential rune issues
Expected outcome:
The autofixer detects assignments to $state variables inside $effect blocks and suggests using proper state updates instead.
Using "svelte-code-writer". Look up documentation for $effect
Expected outcome:
Returns comprehensive documentation explaining $effect usage, lifecycle timing, cleanup patterns, and common pitfalls.
Security Audit
SafeStatic analysis flagged 22 external_commands patterns and 1 filesystem pattern, all false positives. The detected patterns are markdown documentation examples showing legitimate npx CLI command usage (@sveltejs/mcp). No actual code execution, network calls, or filesystem operations exist in the skill content. Safe for publication.
Quality Score
What You Can Build
Learning Svelte 5 Runes
New to Svelte 5? Look up documentation for $state, $derived, and $effect runes to understand modern reactivity patterns.
Debugging Component Issues
Run the autofixer on problematic components to detect common mistakes like state mutations in effects.
Code Review Validation
Validate Svelte components before merging by running the autofixer to catch issues early.
Try These Prompts
List all available Svelte documentation sections, then retrieve the documentation for $state and $derived runes.
Analyze this Svelte component for issues: [paste component code or provide file path]
Check this component for Svelte 5 compatibility using the autofixer with --svelte-version 5 flag.
Validate this async Svelte component with the autofixer, ensuring await usage is properly configured.
Best Practices
- Always run list-sections first to discover available documentation topics before requesting specific docs
- Execute svelte-autofixer before finalizing any Svelte component to catch issues early
- Escape $ characters as \$ when passing inline code containing runes via terminal commands
Avoid
- Using the autofixer without reviewing its suggestions - always validate recommendations
- Passing large codebases as inline arguments instead of file paths
- Forgetting to specify --async flag when analyzing components with top-level await