Svelte control flow

Skill morning-start/agent-skills/lang/svelte/svelte-control-flow

AI 编程助手的专业技能库，涵盖 30+ 技能，按 6 类组织

Install

npx -y skills add morning-start/agent-skills --skill svelte-control-flow

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Svelte 控制流技能，掌握条件渲染、列表渲染、异步处理和代码片段，实现复杂的组件逻辑流程

SKILL.md

2.8 KB, as published. Nobody here has run it

Svelte Control Flow

任务目标

本 Skill 用于：实现条件、循环、异步等控制流逻辑
能力包含：if/each/await/key/snippet 块及 render 标签
触发条件：需要条件渲染、列表渲染或处理异步数据时

操作步骤

{#if} 条件块

{#if answer === 42}
  <p>正确!</p>
{:else if count > 10}
  <p>太大了</p>
{:else}
  <p>太小了</p>
{/if}

{#each} 循环块

<!-- 基本用法 -->
{#each items as item}
  <li>{item.name}</li>
{/each}

<!-- 带索引 -->
{#each items as item, i}
  <li>{i + 1}: {item.name}</li>
{/each}

<!-- 带 key 的循环 -->
{#each items as item (item.id)}
  <li>{item.name}</li>
{/each}

<!-- 解构和剩余模式 -->
{#each objects as { id, ...rest }}
  <li><span>{id}</span><Component {...rest} /></li>
{/each}

<!-- 空数据占位 -->
{#each items as item}
  <p>{item}</p>
{:else}
  <p>没有数据</p>
{/each}

{#await} 异步块

<!-- 完整形式 -->
{#await promise}
  <p>加载中...</p>
{:then value}
  <p>结果: {value}</p>
{:catch error}
  <p>错误: {error.message}</p>
{/await}

<!-- 简化形式 -->
{#await promise then value}
  <p>{value}</p>
{/await}

{#await promise catch error}
  <p>错误: {error.message}</p>
{/await}

{#key} 键控块

<!-- 当 key 变化时重新渲染内容 -->
{#key count}
  <div>{Math.random()}</div>
{/key}

{#snippet} 代码片段

{#snippet greeting(name)}
  <p>你好, {name}!</p>
{/snippet}

{@render greeting('Alice')}
{@render greeting('Bob')}

片段参数与解构

{#snippet row(d)}
  <tr><td>{d.name}</td><td>{d.price}</td></tr>
{/snippet}

片段作用域

{#snippet hello(name)}
  <p>你好 {name}!</p>
{/snippet}

{@render hello('world')}

向组件传递片段

<!-- 作为属性传递 -->
<Table {header} {row} />

<!-- 隐式 children -->
<Button>点击我</Button>

{@render} 渲染片段

<script>
  let { children } = $props();
</script>

<button>{@render children?.()}</button>

资源索引

if：https://svelte.dev/docs/svelte/if
each：https://svelte.dev/docs/svelte/each
await：https://svelte.dev/docs/svelte/await
key：https://svelte.dev/docs/svelte/key
snippet：https://svelte.dev/docs/svelte/snippet
@render：https://svelte.dev/docs/svelte/@render
await 表达式：https://svelte.dev/docs/svelte/await-expressions

注意事项

优先使用带 key 的 each 块以获得更好的性能
snippet 可以引用外部变量，但不能引用模块级 <script> 外的变量
{@render children?.()} 使用可选链处理未提供的情况