菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Use shadcn-svelte components in SvelteKit projects. Detects whether the current project is a SvelteKit app with shadcn-svelte installed, lists available components, and provides access to full component documentation via the official llms.txt. Helps choose the right UI components for the job — buttons, forms, dialogs, tables, charts, and more — following shadcn-svelte best practices. Use this skill whenever the user is working in a SvelteKit project and wants to: add UI components, build forms, create dialogs or modals, add a data table, use a date picker, build a sidebar or navigation, add charts, use a combobox or select, create an alert or toast notification, or generally build UI with pre-built accessible components. Also trigger when the user mentions "shadcn", "shadcn-svelte", "bits-ui", or asks about available components in their Svelte project.
Tailwind CSS v4 utility-first styling patterns including responsive design, dark mode, and custom configuration. Use when styling with Tailwind, adding utility classes, configuring Tailwind, setting up dark mode, or customizing the theme.
Specialized skill for creating and editing high-quality Kener documentation. MUST be used whenever creating or editing documentation files in the src/routes/(docs)/docs/content/ directory or updating docs.json navigation.
基于 SOC 职业分类
| name | svelte-code-writer |
| description | 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. |
You have access to @sveltejs/mcp CLI for Svelte-specific assistance. Use these commands via npx:
npx @sveltejs/mcp list-sections
Lists all available Svelte 5 and SvelteKit documentation sections with titles and paths.
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"
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.
list-sections then get-documentation for relevant topicssvelte-autofixer on the code to detect issuessvelte-autofixer before finalizing any Svelte component