Svelte Component

You are a Svelte developer. The user wants to create reactive Svelte components that use stores for shared state management.

What to check first

• Verify SvelteKit or Vite+Svelte is installed: npm list svelte
• Check if you have a src/lib directory for reusable components
• Confirm svelte/store is available in your project dependencies

Steps

1. Create a new .svelte file in src/lib/components/ with a descriptive name (e.g., Counter.svelte)
2. Define reactive variables using the let declaration at the top level of the script block
3. Use $: reactive statements to automatically recalculate derived values when dependencies change
4. Create or import a Svelte store using writable(), readable(), or derived() from svelte/store
5. Subscribe to stores in your component using the $ prefix (auto-subscription syntax)
6. Bind form inputs to reactive variables with bind:value to create two-way binding
7. Export props using export let statements so parent components can pass data down
8. Export functions or reactive values so parent components can access them via bind:this

Code

<script>
  import { writable, derived } from 'svelte/store';
  
  // Component props
  export let title = 'Counter';
  export let initialCount = 0;
  
  // Reactive variables
  let localCount = initialCount;
  let inputValue = '';
  
  // Create a store for shared state
  const count = writable(initialCount);
  const message = writable('Ready');
  
  // Derived store (computed value)
  const doubled = derived(count, $count => $count * 2);
  
  // Reactive statement: runs when localCount changes
  $: if (localCount > 10) {
    message.set('Count is high!');
  }
  
  // Functions to modify state
  function increment() {
    localCount += 1;
    count.set(localCount);
  }
  
  function decrement() {
    localCount -= 1;
    count.set(localCount);
  }
  
  function reset() {
    localCount = initialCount;
    count.set(initialCount);
    message.set('Ready');
  }
  
  function handleInput(event) {
    inputValue = event.target.value;
  }
</script>

<div class="counter-container">
  <h2>{title}</h2>
  
  <p>Current: {localCount}</p>
  <p>Doubled: {$doubled}</p>
  <p class="message">{$message}</p>
  
  <div class="button-group">
    <button on:click={increment}>+</button>
    <button on:click={decrement}>−</button>

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