svelte-code-writer
Developer tool for Svelte 5 syntax lookup and component code maintenance.
Install
mkdir -p .claude/skills/svelte-code-writer && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/7502" && unzip -o skill.zip -d .claude/skills/svelte-code-writer && rm skill.zipInstalls to .claude/skills/svelte-code-writer
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
CLI tools for Svelte 5 documentation lookup and code analysis. MUST be used whenever creating or editing any Svelte component (.svelte) or Svelte module (.svelte.ts/.svelte.js). If possible, this skill should be executed within the svelte-file-editor agent for optimal results.Key capabilities
- →List available Svelte 5 documentation sections
- →Retrieve detailed documentation for specific topics
- →Analyze Svelte code for common issues
- →Apply automated fixes to Svelte components
How it works
It provides a CLI interface to the @sveltejs/mcp tool, allowing users to query documentation and run an automated analysis and fix utility on Svelte files.
Inputs & outputs
When to use svelte-code-writer
- →Look up Svelte 5 documentation
- →Apply automated fixes to Svelte code
- →Analyze Svelte component structure
- →Update Svelte component syntax
About this skill
Svelte 5 Code Writer
CLI Tools
You have access to @sveltejs/mcp CLI for Svelte-specific assistance. Use these commands via npx:
List Documentation Sections
npx @sveltejs/mcp list-sections
Lists all available Svelte 5 and SvelteKit documentation sections with titles and paths.
Get Documentation
npx @sveltejs/mcp get-documentation "<section1>,<section2>,..."
Retrieves full documentation for specified sections. Use after list-sections to fetch relevant docs.
Example:
npx @sveltejs/mcp get-documentation "$state,$derived,$effect"
Svelte Autofixer
npx @sveltejs/mcp svelte-autofixer "<code_or_path>" [options]
Analyzes Svelte code and suggests fixes for common issues.
Options:
--async- Enable async Svelte mode (default: false)--svelte-version- Target version: 4 or 5 (default: 5)
Examples:
# Analyze inline code (escape $ as \$)
npx @sveltejs/mcp svelte-autofixer '<script>let count = \$state(0);</script>'
# Analyze a file
npx @sveltejs/mcp svelte-autofixer ./src/lib/Component.svelte
# Target Svelte 4
npx @sveltejs/mcp svelte-autofixer ./Component.svelte --svelte-version 4
Important: When passing code with runes ($state, $derived, etc.) via the terminal, escape the $ character as \$ to prevent shell variable substitution.
Workflow
- Uncertain about syntax? Run
list-sectionsthenget-documentationfor relevant topics - Reviewing/debugging? Run
svelte-autofixeron the code to detect issues - Always validate - Run
svelte-autofixerbefore finalizing any Svelte component
When not to use it
- →When working with frameworks other than Svelte
- →When the project does not use Svelte 5 or SvelteKit
Prerequisites
Limitations
- →Requires escaping $ characters in terminal commands
- →Autofixer targets specific Svelte versions
How it compares
It automates the lookup of Svelte 5 syntax and provides an integrated autofixer, replacing manual documentation searching and manual code refactoring.
Compared to similar skills
svelte-code-writer side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| svelte-code-writer (this skill) | 1 | 7mo | Review | Beginner |
| svelte-expert | 11 | 9mo | No flags | Intermediate |
| web-component-design | 5 | 5mo | No flags | Intermediate |
| svelte | 3 | 2mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by svelte-society
View all by svelte-society →You might also like
svelte-expert
Raudbjorn
Expert Svelte/SvelteKit development assistant for building components, utilities, and applications. Use when creating Svelte components, SvelteKit applications, implementing reactive patterns, handling state management, working with stores, transitions, animations, or any Svelte/SvelteKit development task. Includes comprehensive documentation access, code validation with svelte-autofixer, and playground link generation.
web-component-design
wshobson
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
svelte
EpicenterHQ
Svelte 5 patterns including TanStack Query mutations, shadcn-svelte components, and component composition. Use when writing Svelte components, using TanStack Query, or working with shadcn-svelte UI.
admin-crud-page
svelte-society
Create admin dashboard pages with tables, forms, and actions
component-builder
svelte-society
Create UI components using tailwind-variants for type-safe styling. Use when creating or editing components in src/lib/ui/.
add-component
torrust
Creates a new Svelte UI component for the Torrust website. Use when asked to add, create, or build a new reusable UI component, widget, or UI element.