svelte-code-writer_skill

This skill helps you edit and analyze Svelte components using MCP tooling to ensure accurate, documented, and compliant code.

TypeScript

153

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill sveltejs/mcp --skill svelte-code-writer

SKILL.md1.9 KB

Overview

This skill provides CLI tools for Svelte 5 documentation lookup and automated code analysis. It must be used whenever creating or editing Svelte components (.svelte) or Svelte modules (.svelte.ts/.svelte.js) to ensure syntax correctness and up-to-date patterns. Run it inside the svelte-file-editor agent when available for best context and results.

How this skill works

The skill exposes npx commands from @sveltejs/mcp to list documentation sections, fetch targeted docs, and run the svelte-autofixer analyzer on code or files. Use list-sections to discover topics, get-documentation to retrieve full docs for those topics, and svelte-autofixer to scan code and suggest automatic fixes for common Svelte issues. When passing code with Svelte runes like $state or $derived in a shell, escape the $ as $ to avoid variable expansion.

When to use it

Creating a new Svelte 5 component or Svelte module file
Editing existing .svelte, .svelte.ts, or .svelte.js files
Before committing changes to ensure Svelte idioms and syntax are correct
When unsure about Svelte 5 feature usage or migration details
During code review to provide automated suggestions and lint-like fixes

Best practices

Run npx @sveltejs/mcp list-sections first to find the exact docs you need
Fetch only relevant documentation sections with get-documentation to save time
Run svelte-autofixer on the specific file path rather than piping large projects, when possible
Escape $ characters (use $) when passing inline code to the CLI to prevent shell substitution
Prefer running the skill inside the svelte-file-editor agent to include file and context awareness

Example use cases

Discover the correct usage of new Svelte 5 primitives before implementing a component
Automatically fix common migration issues when upgrading from Svelte 4 to Svelte 5
Validate .svelte and .svelte.ts files as part of a pre-commit or CI step
Quickly pull full documentation sections for teaching or code examples during development
Run svelte-autofixer on a component to surface styling, reactivity, or API misuse suggestions

FAQ

No. Use the CLI via npx (npx @sveltejs/mcp ...) so you do not need a global install.

How do I pass inline code with $state to the CLI?

Escape the dollar sign as $ (for example: npx @sveltejs/mcp svelte-autofixer '<script>let count = $state(0);</script>').