agentsclimarketplace

Svelte core

Skill morning-start/agent-skills/lang/svelte/svelte-core

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

Install
npx -y skills add morning-start/agent-skills --skill svelte-core

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 核心基础技能,掌握组件编写、文件结构、项目启动和 Rune 概念,为深入学习 Svelte 打下坚实基础

SKILL.md

1.8 KB, as published. Nobody here has run it

Svelte Core

任务目标

  • 本 Skill 用于:掌握 Svelte 核心概念和组件基础
  • 能力包含:.svelte 文件结构、项目创建、Rune 概念理解
  • 触发条件:需要创建 Svelte 组件或初始化 Svelte 项目时

前置准备

  • Node.js 18+ 环境
  • npm/pnpm/bun 包管理器

操作步骤

创建 SvelteKit 项目

npx sv create myapp
cd myapp
npm install
npm run dev

使用 Vite 独立模式

npm create vite@latest myapp -- --template svelte

.svelte 文件结构

<script module>
  // 模块级逻辑(仅执行一次)
  let total = 0;
</script>

<script>
  // 实例级逻辑(每个组件实例执行)
  let count = $state(0);
</script>

<!-- 模板标记 -->
<div>{count}</div>

<style>
  /* 作用域样式 */
  div { color: blue; }
</style>

Rune 概念

Rune 是 Svelte 5 引入的编译器指令,以 $ 前缀标识:

  • $state - 声明响应式状态
  • $derived - 声明派生状态
  • $effect - 声明副作用
  • $props - 声明组件属性

资源索引

注意事项

  • .svelte 文件中 script、style 和 markup 三部分都是可选的
  • <script module> 中的代码仅在模块首次加载时执行一次
  • Rune 无需导入,直接在 .svelte 和 .svelte.js/.svelte.ts 文件中使用

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.