ccstate

Documents patterns and best practices for ccstate state management in the vm0 platform.

1.2k|70|Updated Nov 14, 2025
One-click install
npx skills add https://github.com/vm0-ai/vm0 --skill ccstate
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ccstate
Source: https://github.com/vm0-ai/vm0/tree/main/.claude/skills/ccstate
Command: npx skills add https://github.com/vm0-ai/vm0 --skill ccstate

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers working with ccstate in the vm0 platform repeatedly hit subtle bugs: floating promises in DOM handlers, functions silently executed instead of stored in state atoms, orphaned AbortSignals leaking polling loops, and manual HTTP error handling that duplicates framework behavior. This Skill codifies the correct patterns so these mistakes are avoided.

Core Features & Use Cases

  • DOM Callback & Detach Patterns: Use detach() with Reason.DomCallback in React views to handle fire-and-forget promises without lint errors or test cleanup leaks.
  • Reactive Async Computeds: Replace imperative fetch-and-store commands with computed(async ...) plus a reload counter, eliminating manual loading/error state.
  • HTTP Error Handling with accept: Enforce a single, type-narrowed way to handle API status codes with automatic toast and ApiError semantics.
  • AbortSignal Lifecycle & Signal Factories: Define clear signal ownership hierarchies and factory functions so multiple feature instances coexist without global singleton conflicts.
  • Use Case: When adding a new page that fetches agents and handles button clicks, follow the documented patterns to wire pageSignal$, accept, and detach correctly on the first attempt.

Quick Start

Ask the assistant to review your ccstate signals code and apply the documented patterns for detach, accept, and AbortSignal ownership.

Frequently Asked Questions about ccstate

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I handle async commands in React event handlers with ccstate?

Use detach() with Reason.DomCallback to mark the promise as intentionally fire-and-forget. This satisfies the no-floating-promises lint rule while tracking the promise for test cleanup via clearAllDetached().

How should I fetch API data in ccstate signals?

Prefer a reactive computed(async ...) that reads a reload counter state, rather than an imperative fetch command with manual loading flags. Invalidate by bumping the counter, and consume with useLoadable or useLastResolved in views.

Why does storing a function in a ccstate state atom not work?

ccstate treats any function passed to set() as an updater and executes it immediately, storing the return value instead. Wrap the function in an updater that returns it: set(atom$, () => theFn).

How do I handle HTTP error status codes with ccstate apiClient?

Wrap every apiClient call in accept() with an explicit list of accepted status codes. Unlisted statuses automatically trigger a toast error and throw an ApiError, so manual try-catch and status checks are forbidden.

Why does my ccstate polling loop never stop?

The AbortSignal likely has no parent owner, so nothing aborts it on navigation. Pass the page or route signal into resetSignal() so the loop is cancelled when the page unmounts or the route changes.

When should I use a signal factory instead of singleton signals?

Use a factory when one page must host multiple independent instances of the same feature, such as several chat threads. Each factory call returns fresh state, computed, and command instances so instances never share state.