home / skills / oimiragieo / agent-studio / class-based-state-management

class-based-state-management skill

safe

/.claude/skills/_archive/dead/class-based-state-management

This skill enforces class based state management in Svelte components to organize complex state machines in .svelte.ts files.

npx playbooks add skill oimiragieo/agent-studio --skill class-based-state-management

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

Files (3)

SKILL.md

1.8 KB

---
name: class-based-state-management
description: Enforces the use of classes for complex state management (state machines) in Svelte components. Applies specifically to `.svelte.ts` files.
version: 1.0.0
model: sonnet
invoked_by: both
user_invocable: true
tools: [Read, Write, Edit]
globs: '**/*.svelte.ts'
best_practices:
  - Follow the guidelines consistently
  - Apply rules during code review
  - Use as reference when writing new code
error_handling: graceful
streaming: supported
---

# Class Based State Management Skill

<identity>
You are a coding standards expert specializing in class based state management.
You help developers write better code by applying established guidelines and best practices.
</identity>

<capabilities>
- Review code for guideline compliance
- Suggest improvements based on best practices
- Explain why certain patterns are preferred
- Help refactor code to meet standards
</capabilities>

<instructions>
When reviewing or writing code, apply these guidelines:

- Use classes for complex state management (state machines):
  typescript
  // counter.svelte.ts
  class Counter {
  count = $state(0);
  incrementor = $state(1);
  increment() {
  this.count += this.incrementor;
  }
  resetCount() {
  this.count = 0;
  }
  resetIncrementor() {
  this.incrementor = 1;
  }
  }
  export const counter = new Counter();
  </instructions>

<examples>
Example usage:
```
User: "Review this code for class based state management compliance"
Agent: [Analyzes code against guidelines and provides specific feedback]
```
</examples>

## Memory Protocol (MANDATORY)

**Before starting:**

```bash
cat .claude/context/memory/learnings.md
```

**After completing:** Record any new patterns or exceptions discovered.

> ASSUME INTERRUPTION: Your context may reset. If it's not in memory, it didn't happen.

Overview

This skill enforces using classes for complex state management and state machines inside Svelte component TypeScript files (.svelte.ts). It ensures stateful logic is encapsulated in class instances to improve testability, reusability, and predictability. The guidance targets patterns like counters, toggles, and multi-step machines implemented as classes and exported for component use.

How this skill works

The skill inspects .svelte.ts files and flags state logic that is not organized into classes when complexity grows beyond trivial reactive stores. It looks for patterns such as multiple related state fields, methods that mutate state, and state machine transitions, recommending a class wrapper with $state-backed fields and methods. It provides concrete refactor suggestions and small code examples to convert ad-hoc state into a class-based design.

When to use it

When a component holds multiple related state values and transition logic.
When you need clear state machine transitions or lifecycle-controlled state.
When state needs to be unit-tested independently from the component.
When reusing complex state logic across components is desirable.
When component methods increasingly mutate several state variables together.

Best practices

Encapsulate related state and behavior in a single class and export an instance for the component.
Use descriptive method names for state transitions and keep mutations inside class methods.
Keep the class focused: one responsibility per state machine or domain concept.
Prefer simple primitives for trivial state; reserve classes for complexity.
Write unit tests against the class API rather than component internals.

Example use cases

A multi-step form where step transitions, validation state, and timers are managed by a FormState class.
A real-time widget with complex counters, increments, and reset behaviors encapsulated in a Counter class.
A modal manager that controls open/close state, focus tracking, and dismiss rules via a ModalController class.
A game UI with discrete states (idle, playing, paused, gameOver) implemented as a GameState machine class.

FAQ

Does every piece of state need a class?

No. Small, independent reactive values are fine as stores. Use classes when multiple related values and transition logic form a coherent unit.

How do I test class-based state?

Instantiate the class in unit tests and exercise its public methods, asserting state changes without rendering the component.