Svelte template basics

Skill morning-start/agent-skills/lang/svelte/svelte-template-basics

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

Install

npx -y skills add morning-start/agent-skills --skill svelte-template-basics

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.1 KB, as published. Nobody here has run it

Svelte Template Basics

任务目标

本 Skill 用于：编写 Svelte 组件的模板结构
能力包含：元素标签、属性绑定、文本插值、特殊渲染标签
触发条件：需要编写 Svelte 组件模板时

操作步骤

元素与组件标签

<!-- 小写标签 = HTML 元素 -->
<div>

<!-- 大写标签 = Svelte 组件 -->
<Widget />

<!-- 点号表示法 -->
<my.customComponent />

属性绑定

<!-- 表达式属性 -->
<button disabled={!clickable}>click</button>

<!-- 缩写形式 -->
<input {value} />
<!-- 等价于 -->
<input value={value} />

<!-- 展开属性 -->
<Widget {...props} />

事件处理

<!-- 事件属性 -->
<button onclick={() => count++}>+1</button>

<!-- 事件委托 -->
<input beforeinput onbeforeinput={handleInput} />

文本表达式

<p>{a} + {b} = {a + b}</p>

<!-- null/undefined 被省略 -->
<p>{value ?? 'default'}</p>

{@html} 渲染 HTML

<div>{@html htmlString}</div>

{@const} 局部常量

{#each items as item}
  {@const id = item.id + '-suffix'}
  <div {id}>{item.name}</div>
{/each}

{@debug} 调试标签

{@debug user}

<!-- 或指定变量 -->
{@debug user, count}

{@attach} 附加动作

<script>
  import { tooltip } from './actions';
</script>

<button {@attach tooltip={message}}>hover me</button>

组件注释

<!-- 普通注释 -->

<!-- svelte-ignore a11y_autofocus -->
<input bind:value autofocus />

资源索引

基础标记：https://svelte.dev/docs/svelte/basic-markup
@html：https://svelte.dev/docs/svelte/@html
@attach：https://svelte.dev/docs/svelte/@attach
@const：https://svelte.dev/docs/svelte/@const
@debug：https://svelte.dev/docs/svelte/@debug

注意事项

{@html} 内容不会被转义，注意 XSS 风险
事件属性以 on 开头，如 onclick、oninput
<script module> 可导出代码供其他组件使用