关于 svelte-core-bestpractices
svelte-core-bestpractices 是面向 Svelte 5 组件和模块开发的基础技能，汇总响应式、模板、样式和上下文等编码规则。它还指引开发者按需加载更具体的相关技能。
主要功能
- 01采用 runes 编写新代码
- 02按用途管理响应式状态
- 03使用 snippets 和渲染语法
- 04采用 keyed each 块
- 05使用 CSS 自定义属性
- 06指向专项 Svelte 技能
适用场景
- 01编写新的 Svelte 5 组件
- 02整理 props 与响应式派生值
- 03构建模板循环和组件内容
- 04查找 SvelteKit 专项开发指引
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/svelte-core-bestpractices确认已加载。
详细介绍
Svelte 核心最佳实践
将此作为所有 Svelte 5 组件／模块工作的基准，然后加载相应的专项技能以了解详情。
核心规则
- 新代码使用 runes 模式：
$state、$derived、$effect、$props、$bindable。 - 仅对会影响模板输出、
$derived或$effect的值使用$state。 - 对整体替换的大型对象／数组使用
$state.raw，尤其是 API 载荷。 - 优先使用
$derived／$derived.by，而不是在$effect中写入状态。 - 将 props 视为会随时间变化；使用
$derived从 props 派生值。 - 使用
onclick={...}和其他事件属性，而非旧式事件指令。 - 使用 snippets 和
{@render ...}表示组件内容。 - 使用
{let ...}／{const ...}声明标签定义局部标记变量；{@const ...}是旧式语法。 - 使用带键的
{#each}块；切勿将数组索引用作键。 - 使用 CSS 自定义属性和
style:实现动态样式。 - 对条件类名，优先在
class={...}中使用数组／对象。 - 使用
createContext实现类型化上下文，而非模块级共享状态。 - 使用
{@attach ...}实现与元素关联的 DOM／第三方集成。
加载进阶技能
- 响应性、props、可绑定状态 →
svelte-runes - Snippets、
{@attach}、全局事件、each 块 →svelte-template-directives - 作用域 CSS、自定义属性、类名 →
svelte-styling - 组件库、表单、Web 组件 →
svelte-components - SvelteKit 加载／操作／路由／错误 →
sveltekit-data-flow、sveltekit-structure - 远程函数 →
sveltekit-remote-functions - 部署／构建／库／PWA →
svelte-deployment
说明
- Effects 不会在服务器上运行；不要在 effect 主体外包一层
if (browser)。 - 使用
$inspect.trace(label)调试意外的响应性行为。 - 异步 Svelte 功能需要相应的实验性配置。
- **最后验证时间：**2026-05-31
评论
支持 Markdown