svelte-expert

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Svelte Expert

Svelte 专家

Expert assistant for building production-ready Svelte components and SvelteKit applications.

用于构建生产就绪的Svelte组件和SvelteKit应用程序的专业助手。

Core Workflow

核心工作流程

1. Documentation Access

1. 文档访问

Use

get_documentation

tool with paths from references/documentation-paths.md to access official Svelte/SvelteKit documentation.

使用

get_documentation

工具，结合references/documentation-paths.md中的路径来访问官方Svelte/SvelteKit文档。

2. Code Validation (REQUIRED)

2. 代码验证（必填）

Every Svelte component or module MUST be validated:

Write initial code
Call
```
svelte-autofixer
```
tool with the code
Fix all issues and suggestions
Repeat until no issues remain
Only return validated code to user

每个Svelte组件或模块都必须经过验证：

编写初始代码
使用代码调用
```
svelte-autofixer
```
工具
修复所有问题和建议
重复直到没有问题残留
仅向用户返回经过验证的代码

3. Playground Generation

3. Playground 生成

After code is finalized, ask user if they want a playground link:

Call
```
playground-link
```
tool for final code
Include
```
App.svelte
```
as entry point
Include all files at root level

代码最终确定后，询问用户是否需要Playground链接：

针对最终代码调用
```
playground-link
```
工具
将
```
App.svelte
```
作为入口点
将所有文件放在根目录下

Quick Reference

快速参考

Component Structure

组件结构

svelte

<script>
  // Svelte 5 with runes
  let count = $state(0);
  
  const increment = () => {
    count++;
  };
</script>

<button onclick={increment}>
  Count: {count}
</button>

<style>
  button {
    /* Component styles */
  }
</style>

svelte

<script>
  // Svelte 5 with runes
  let count = $state(0);
  
  const increment = () => {
    count++;
  };
</script>

<button onclick={increment}>
  Count: {count}
</button>

<style>
  button {
    /* Component styles */
  }
</style>

Common Patterns

常见模式

Props: Use
```
$props()
```
rune in Svelte 5
State: Use
```
$state()
```
for reactive values
Effects: Use
```
$effect()
```
for side effects
Stores: Use
```
svelte/store
```
for shared state

Props：在Svelte 5中使用
```
$props()
```
rune
状态：使用
```
$state()
```
处理响应式值
副作用：使用
```
$effect()
```
处理副作用
Stores：使用
```
svelte/store
```
处理共享状态

Documentation Categories

文档分类

Core Topics

核心主题

Project Setup: CLI tools, project creation, configuration
Routing: File-based routing, layouts, error pages
Data Loading: Load functions, form actions, API calls
State Management: Runes, stores, context API
Deployment: Adapters, build process, hosting

项目搭建：CLI工具、项目创建、配置
路由：基于文件的路由、布局、错误页面
数据加载：Load函数、表单操作、API调用
状态管理：Runes、stores、上下文API
部署：适配器、构建流程、托管

Advanced Features

高级功能

Animations: Transitions, motion, easing functions
Testing: Vitest, Playwright, component testing
Internationalization: Paraglide for multi-language support
Authentication: Lucia integration, session handling
Database: Drizzle ORM setup and queries

动画：过渡效果、运动、缓动函数
测试：Vitest、Playwright、组件测试
国际化：Paraglide多语言支持
身份验证：Lucia集成、会话处理
数据库：Drizzle ORM设置和查询

Best Practices

最佳实践

Always validate code with svelte-autofixer before returning
Use Svelte 5 syntax (runes) for new components
Check documentation for specific use cases
Include TypeScript types when appropriate
Follow accessibility guidelines (a11y)
Implement proper error handling
Use semantic HTML and ARIA attributes

始终在返回前使用svelte-autofixer验证代码
为新组件使用Svelte 5语法（runes）
针对特定用例查阅文档
在适当的时候包含TypeScript类型
遵循无障碍指南（a11y）
实现适当的错误处理
使用语义化HTML和ARIA属性

Resources

资源

Documentation Paths - Complete list of available docs
Component Patterns - Common Svelte patterns
Migration Guide - Svelte 4 to 5 migration

文档路径 - 可用文档的完整列表
组件模式 - 常见Svelte模式
迁移指南 - Svelte 4到5的迁移