Svelte core
AI 编程助手的专业技能库,涵盖 30+ 技能,按 6 类组织
npx -y skills add morning-start/agent-skills --skill svelte-coreAssembled 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- 声明组件属性
资源索引
- 官方文档:https://svelte.dev/docs/svelte/overview
- 入门指南:https://svelte.dev/docs/svelte/getting-started
- Svelte 文件:https://svelte.dev/docs/svelte/svelte-files
- JS/TS 文件:https://svelte.dev/docs/svelte/svelte-js-files
- Rune 概念:https://svelte.dev/docs/svelte/what-are-runes
注意事项
- .svelte 文件中 script、style 和 markup 三部分都是可选的
<script module>中的代码仅在模块首次加载时执行一次- Rune 无需导入,直接在 .svelte 和 .svelte.js/.svelte.ts 文件中使用