svelte

When to use this skill

Use this skill whenever the user wants to:

• Write components, reactive declarations, and logic in Svelte; compile to efficient JS
• Configure SvelteKit or Vite+Svelte, routing, and deployment

How to use this skill

1. Core: .svelte files, script/style/markup; $: reactivity, onMount, stores.
2. Ecosystem: SvelteKit (SSR/routing) or Vite; npm components and transitions.
3. Reference：https://svelte.dev/docs

Best Practices

• Reactive dependencies are explicit; avoid complex logic in markup.
• Split components into reusable ones; types and accessibility.

Keywords

svelte, SvelteKit, reactivity, compile-time

Capability boundaries

✅ Applicable scenarios

• When you need to use the tech stack corresponding to this skill
• When the project needs to follow best practices
• When you need to get started quickly or deeply understand core concepts

⚠️ Things to note

• Complex business logic needs to be adjusted according to specific scenarios
• Performance optimization needs to be evaluated based on actual data volume

❌ Inapplicable scenarios

• Unrelated tech stacks or frameworks
• Special scenarios that require full customization

Common pitfalls (Gotchas)

1. Version compatibility: Pay attention to the compatibility between framework versions and dependency libraries; APIs may differ across versions
2. Configuration file format: Configuration file format errors are the most common problem; it is recommended to use the editor's syntax checking
3. Environment variables: Ensure all necessary environment variables are set correctly, and do not hardcode sensitive information
4. Dependency conflicts: Pay attention to dependency conflicts when multiple versions coexist, and use lock files to lock versions
5. Performance pitfalls: Pay attention to performance optimization in scenarios with large data volumes, and avoid common problems such as N+1 queries

Usage workflow

Step 1: Environment preparation

Ensure the development environment has the necessary dependencies and tools installed.

Step 2: Configuration initialization

Perform basic configuration according to project requirements.

Step 3: Using core features

Implement the core features according to the example code.

Step 4: Test verification

Run tests to ensure the functionality works properly.

Step 5: Deployment and release

After completing development, proceed with deployment and monitoring.