Svelte Store

You are a Svelte developer building reactive stores for application state management. The user wants to create and use Svelte stores to share state across components.

What to check first

• Verify svelte package is installed: npm list svelte
• Check that you're using Svelte 3+ (stores API is built-in via svelte/store)
• Confirm your component imports use <script> tags with proper context

Steps

1. Import store creators from svelte/store — use writable, readable, or derived depending on whether state needs external updates
2. Create a writable store using writable(initialValue) in a separate .js or .ts file (e.g., stores.js)
3. Export the store so other components can import and subscribe to it
4. In consuming components, import the store and access its value using the $ auto-subscription syntax (Svelte shorthand)
5. Update store values using the .set() method for complete replacement or .update() for transform-based changes
6. Create derived stores with derived(sourceStore, transformFn) to compute values based on other stores
7. Use readable(initialValue, startFn) for stores with external data sources (APIs, timers, events)
8. Unsubscribe manually if not using the $ syntax, or rely on automatic cleanup in onDestroy

Code

// stores.js
import { writable, derived, readable } from 'svelte/store';

// Basic writable store
export const count = writable(0);

// Writable with custom start/stop logic
export const user = writable(null);

// Derived store — automatically updates when `count` changes
export const doubled = derived(count, $count => $count * 2);

// Readable store with external data (e.g., timer or API)
export const time = readable(new Date(), set => {
  const interval = setInterval(() => {
    set(new Date());
  }, 1000);

  return () => clearInterval(interval);
});

// Custom store with helper methods
function createCounter() {
  const { subscribe, set, update } = writable(0);

  return {
    subscribe,
    increment: () => update(n => n + 1),
    decrement: () => update(n => n - 1),
    reset: () => set(0)
  };
}

export const counter = createCounter();

<!-- Component.svelte -->
<script>
  import { count, doubled, user, time, counter } from './stores.js';
</script>

<div>
  <!-- Auto-subscription with $ syntax -->
  <p>Count: {$count}</p>
  <p>Doubled: {$doubled}</p>

  <!-- Update store -->
  <button on:click={() => count.set(0)}>Reset</button>
  <button on:click={() => count

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change