mcpField
S
svelte-code-writer

svelte-code-writer

github.com/midudev开发7.0k60 次安装2 周前更新
代码仓库

关于 svelte-code-writer

面向 Svelte 编码的 Skill，通过文档查询和代码自动修复器辅助组件编写与检查。

主要功能

  1. 01浏览 Svelte 5 和 SvelteKit 文档章节
  2. 02获取指定文档内容
  3. 03使用 svelte-autofixer 分析代码
  4. 04设置异步模式和 Svelte 版本

适用场景

  1. 01修改组件前查询语法
  2. 02检查组件中的常见问题
  3. 03定稿前验证 Svelte 代码

MCP 相关

通过 @sveltejs/mcp 命令行工具列出和获取文档，并运行 Svelte 自动修复器。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/midudev/autoskills --skill svelte-code-writer

安装后在 Claude Code 中输入/svelte-code-writer确认已加载。

详细介绍

CLI 工具

你可以使用 @sveltejs/mcp CLI 获取 Svelte 专属帮助。通过 npx 运行以下命令：

列出文档章节
npx @sveltejs/mcp list-sections

列出所有可用的 Svelte 5 和 SvelteKit 文档章节及其标题和路径。

获取文档
npx @sveltejs/mcp get-documentation "<section1>,<section2>,..."

获取指定章节的完整文档。先运行 list-sections，再获取相关文档。

示例：

npx @sveltejs/mcp get-documentation "$state,$derived,$effect"
Svelte 自动修复器
npx @sveltejs/mcp svelte-autofixer "<code_or_path>" [options]

分析 Svelte 代码，并针对常见问题提出修复建议。

选项：

  • --async - 启用异步 Svelte 模式（默认值：false）
  • --svelte-version - 目标版本，建议使用 package.json 中的完整版本号（例如 5.16.0），以启用针对特定版本的建议。主版本号必须为 4 或 5（默认值：5）

示例：

# 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

重要提示： 通过终端传递包含符文（$state、$derived 等）的代码时，请将 $ 字符转义为 \$，以免被 Shell 替换为变量。

工作流

  1. 不确定语法？ 运行 list-sections，然后运行 get-documentation 获取相关主题的文档
  2. 审查或调试？ 对代码运行 svelte-autofixer，以检测问题
  3. 始终进行验证 - 完成任何 Svelte 组件前，运行 svelte-autofixer

评论

支持 Markdown