home / skills / partme-ai / full-stack-skills / svelte

svelte skill

safe

This skill provides comprehensive guidance for building Svelte applications, covering components, reactivity, stores, transitions, and compilation.

npx playbooks add skill partme-ai/full-stack-skills --skill svelte

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

666 B

---
name: svelte
description: Provides comprehensive guidance for Svelte framework including components, reactivity, stores, transitions, and compilation. Use when the user asks about Svelte, needs to create Svelte applications, implement Svelte components, or work with Svelte features.
license: Complete terms in LICENSE.txt
---

## When to use this skill

Use this skill whenever the user wants to:
- [待完善：根据具体工具添加使用场景]

## How to use this skill

[待完善：根据具体工具添加使用指南]

## Best Practices

[待完善：根据具体工具添加最佳实践]

## Keywords

[待完善：根据具体工具添加关键词]

Overview

This skill provides practical, hands-on guidance for building applications with the Svelte framework, covering components, reactivity, stores, transitions, and compilation. It helps you design, debug, and optimize Svelte apps from small widgets to full single-page applications. Use it to learn idiomatic patterns and to implement common tasks quickly and correctly.

How this skill works

The skill inspects your goals and code context, then explains Svelte concepts and offers concrete examples you can paste into projects. It covers reactive statements, component props and events, writable/derived stores, lifecycle hooks, transitions/animations, and build-time compilation details. Where relevant, it suggests structure, performance tips, and migration guidance from other frameworks.

When to use it

When creating new Svelte components or pages and you need correct patterns for props, slots, and events
When implementing reactivity, stores, or derived state and you want predictable updates
When adding transitions or animations to UI elements and need smooth, performant effects
When optimizing bundle size, tree-shaking, or build configurations with SvelteKit or Rollup/Vite
When migrating an app from React/Vue and you need mapping of concepts and migration steps

Best practices

Favor Svelte's built-in reactivity and avoid overusing external state libraries unless needed
Keep components small and focused; use slots and composition instead of deep prop drilling
Use readable stores for global state and derived stores for computed values to avoid redundant logic
Prefer CSS transitions and Svelte's transition directives for simple animations; reserve JS animations for complex cases
Lean on the compiler: write declarative templates and let Svelte optimize DOM updates and bundling

Example use cases

Build a reusable dropdown component with keyboard support, slot customization, and accessible ARIA attributes
Implement a shopping cart using writable stores with persistence to localStorage and a derived total price
Add enter/leave transitions to modal dialogs using Svelte's fade and custom transition functions
Optimize a SvelteKit route by code-splitting components and preloading essential data server-side
Migrate a small React component to Svelte by converting useState/useEffect to reactive statements and lifecycle hooks

FAQ

When should I use a store instead of component state?

Use component state for local concerns tied to one component. Use stores when multiple components need to read or update shared state or when you need persistence and global access.

How do I handle side effects like fetching data?

Perform data loading in onMount for client-side components or use load functions in SvelteKit for server-side/SSR data fetching. Keep effects idempotent and cancelable where appropriate.