New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Data Client Manager

by reactive in reactive/data-client

Implement @data-client Managers for global/background side effects - websocket, SSE, polling, real-time updates, subscriptions, logging, analytics, metrics/timing, error reporting (Sentry), toast…

Apache-2.0Auto-check passedBackend & APIs

Install Data Client Manager

skills CLI
$ npx skills add reactive/data-client --skill data-client-manager -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install reactive/data-client data-client-manager --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/reactive/data-client.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/data-client-manager .claude/skills/data-client-manager && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
data-client-manager
GitHub stars
2k
Token cost
~2.6k tokens
SKILL.md length
394 words
Files
15 (incl. references)
Skills in repo
17
Repo updated
First seen
Licence
Apache-2.0

At a glance

Implement @data-client Managers for global/background side effects - websocket, SSE, polling, real-time updates, subscriptions, logging, analytics, metrics/timing, error reporting (Sentry), toast…

  • Adding cross-cutting store behavior
  • SKILL.md covers Single Responsibility, Use cases, References and Dispatching actions, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Reacting to dispatched actions

What it does

Data Client Manager is an agent skill from reactive/data-client. Implement @data-client Managers for global/background side effects - websocket, SSE, polling, real-time updates, subscriptions, logging, analytics, metrics/timing, error reporting (Sentry), toast notifications, refetch on window focus or network reconnect, cross-tab sync (BroadcastChannel), offline persistence (localStorage/IndexedDB), auth logout on 401, middleware, intercepting Controller actions, DataProvider managers prop, redux-style action handling. Use when adding cross-cutting store behavior, reacting to…

Its SKILL.md is about 2.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 16 other files, including reference files (for example `evals/evals.json`, `references.json` and `references/Actions.md`).

It sits in Backend & APIs, covering Realtime and WebSockets and State management. It works with Redux and Sentry. The repository describes itself as: Async State Management without the Management. REST, GraphQL, SSE, Websockets. The licence is Apache-2.0.

When your agent uses it

  • Adding cross-cutting store behavior
  • Reacting to dispatched actions
  • Handling external event streams

Example prompts

  • “/data-client-manager”

What it can do on your machine

Read from SKILL.md and the folder at commit 02c0932. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • redux.js.org

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Data Client Manager loads about 2.6k tokens when it runs, and up to ~33k if it reads all its reference files. Until then it costs about 148 tokens; SKILL.md has 394 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~148
When it runs · the whole SKILL.md, loaded when a task matches
~2.6k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~33k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from reactive/data-client at commit 02c0932, republished under its Apache-2.0 licence (© reactive). 394 words, ~2,584 tokens.

Download SKILL.mdSave it as .claude/skills/data-client-manager/SKILL.md (or your agent's skills folder). This skill also uses 14 other files; get the full folder from GitHub.
name
data-client-manager
description
Implement @data-client Managers for global/background side effects - websocket, SSE, polling, real-time updates, subscriptions, logging, analytics, metrics/timing, error reporting (Sentry), toast notifications, refetch on window focus or network reconnect, cross-tab sync (BroadcastChannel), offline persistence (localStorage/IndexedDB), auth logout on 401, middleware, intercepting Controller actions, DataProvider managers prop, redux-style action handling. Use when adding cross-cutting store behavior, reacting to dispatched actions, or handling external event streams.
license
Apache 2.0

Guide: Using @data-client Managers for global side effects

Managers are singletons that handle global side-effects. Kind of like useEffect() for the central data store. They interface with the store using Controller, and redux middleware is run in response to actions.

Single Responsibility

One concern per Manager; compose many small managers (e.g. transport, subscriptions, logging, auth) rather than one large one.

Use cases

Minimal working examples for each use case live in references/managers.md (see the named section) unless another file is linked:

Use caseReferenceKey technique
Logging actions/state"Middleware logging" in managers.mdlog around await next(action)
Error reporting/monitoring (Sentry)"Error reporting" in managers.mdSET_RESPONSE with action.error
Analytics/metrics (fetch timing)"Metrics" in managers.mdFETCH action's action.meta.promise
Toast notifications on mutations"Notifications" in managers.mdSET_RESPONSE with action.endpoint.sideEffect
Refetch on window focus / network reconnect"Refresh on focus or reconnect" in managers.mdcontroller.expireAll() from event listeners in init()/cleanup()
Cross-tab sync"Cross-tab synchronization" in managers.mdBroadcastChannel + controller.expireAll()
Offline persistence (IndexedDB)"Offline persistence" in managers.mddebounced IndexedDB write of controller.getState() (drop optimistic - not cloneable); restore via DataProvider initialState. Never use localStorage (blocking)
Websocket/SSE push streams"Middleware data stream" in managers.mdcontroller.set() on message; connect in init(), close in cleanup()
High-frequency streams / snapshots"Batching high-frequency updates" in managers.mdbuffer, then one controller.set([Entity], rows) per flush
Polling/interval updates (ticker)"Dispatching Actions" in Manager.md; TimeManager belowsetInterval + controller.set()
Custom transport subscriptions"Reading and Consuming Actions" in Manager.mdconsume SUBSCRIBE/UNSUBSCRIBE without calling next
Auth: logout on 401, reset store on deauthLogoutManager.mdhandleLogout(controller) + controller.resetEntireStore()
Show full SKILL.md (150 more words)Show less

References

Vue projects: read <name>.vue.md instead of <name>.md when it exists.

For detailed API documentation, see the references directory:

Always use actionTypes when comparing action.type. Refer to Actions for list of actions and their payloads.

Dispatching actions

Controller has dispatchers: ctrl.fetch(), ctrl.fetchIfStale(), ctrl.expireAll(), ctrl.invalidate(), ctrl.invalidateAll(), ctrl.setResponse(), ctrl.set(), ctrl.setError(), ctrl.resetEntireStore(), ctrl.subscribe(), ctrl.unsubscribe().

ts
import type { Manager, Middleware } from '@data-client/react'; // or '@data-client/vue'
import CurrentTime from './CurrentTime';

export default class TimeManager implements Manager {
  declare protected intervalID?: ReturnType<typeof setInterval>;

  middleware: Middleware = controller => {
    this.intervalID = setInterval(() => {
      controller.set(CurrentTime, { id: 1 }, { id: 1, time: Date.now() });
    }, 1000);

    return next => async action => next(action);
  };

  cleanup() {
    clearInterval(this.intervalID);
  }
}

Write many entities in one store update with controller.set([Entity], rows) (websocket snapshots, buffered stream messages). Never loop controller.set(Entity, args, row) per row, and never add an endpoint or setResponse() just to batch.

Reading and Consuming Actions

Controller has data accessors: ctrl.getResponse(), ctrl.getState(), ctrl.get(), ctrl.getError(), ctrl.snapshot().

ts
import type { Manager, Middleware } from '@data-client/react';
import { actionTypes } from '@data-client/react';

export default class LoggingManager implements Manager {
  middleware: Middleware = controller => next => async action => {
    switch (action.type) {
      case actionTypes.SET_RESPONSE:
        if (action.endpoint.sideEffect) {
          console.info(
            `${action.endpoint.name} ${JSON.stringify(action.response)}`,
          );
          // wait for state update to be committed to React
          await next(action);
          // get the data from the store, which may be merged with existing state
          const { data } = controller.getResponse(
            action.endpoint,
            ...action.args,
            controller.getState(),
          );
          console.info(`${action.endpoint.name} ${JSON.stringify(data)}`);
          return;
        }
      // actions must be explicitly passed to next middleware
      default:
        return next(action);
    }
  };

  cleanup() {}
}

Always use actionTypes members to check action.type. actionTypes has: FETCH, SET, SET_RESPONSE, RESET, SUBSCRIBE, UNSUBSCRIBE, INVALIDATE, INVALIDATEALL, EXPIREALL

actions docs details the action types and their payloads.

Consuming actions

ts
import type { Manager, Middleware, EntityInterface } from '@data-client/react';
import { actionTypes } from '@data-client/react';
import isEntity from './isEntity';

export default class CustomSubsManager implements Manager {
  declare protected entities: Record<string, EntityInterface>;

  middleware: Middleware = controller => next => async action => {
    switch (action.type) {
      case actionTypes.SUBSCRIBE:
      case actionTypes.UNSUBSCRIBE:
        const { schema } = action.endpoint;
        // only process registered entities
        if (schema && isEntity(schema) && schema.key in this.entities) {
          if (action.type === actionTypes.SUBSCRIBE) {
            this.subscribe(schema.key, action.args[0]?.product_id);
          } else {
            this.unsubscribe(schema.key, action.args[0]?.product_id);
          }

          // consume subscription to prevent it from being processed by other managers
          return Promise.resolve();
        }
      default:
        return next(action);
    }
  };

  cleanup() {}

  subscribe(channel: string, product_id: string) {}
  unsubscribe(channel: string, product_id: string) {}
}

Usage

tsx
import { DataProvider, getDefaultManagers } from '@data-client/react';
import { createRoot } from 'react-dom/client';

const managers = [...getDefaultManagers(), new MyManager()];

createRoot(document.body).render(
  <DataProvider managers={managers}>
    <App />
  </DataProvider>,
);

© reactive, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 14 other files (references) in .agents/skills/data-client-manager of reactive/data-client.

  • SKILL.md
  • evals/evals.json
  • references.json
  • references/Actions.md
  • references/Actions.vue.md
  • references/Controller.md
  • references/Controller.vue.md
  • references/LogoutManager.md
  • references/LogoutManager.vue.md
  • references/Manager.md
  • references/Manager.vue.md
  • references/getDefaultManagers.md
  • references/getDefaultManagers.vue.md
  • references/managers.md
  • references/managers.vue.md

Open the folder on GitHubat commit 02c0932

Compare with similar skills

Data Client Manager next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Data Client Manager compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Data Client Manager this skillreactive/data-client2k—~2.6kAutomated safety check: PassApache-2.0
Rx JSvalkey-io/valkey-admin148—~666Automated safety check: PassApache-2.0
Agents SDKhodgef/apiker1273 repos~3kAutomated safety check: PassMIT
Domain Webfjrevoredo/mini-diarium3081 repos~1kAutomated safety check: PassMIT
Sentry React SDKgetsentry/sentry-for-ai268—~4.8kAutomated safety check: PassApache-2.0
Sentry Nestjs SDKgetsentry/sentry-for-ai268—~8.7kAutomated safety check: PassApache-2.0

Similar skills

  • Rx JS

    valkey-io/valkey-admin

    Guidance for Redux Toolkit and RxJS middleware patterns. An agent skill from valkey-io/valkey-admin.

    148 GitHub stars~666 tokensUpdated yesterday
    Backend & APIsAuto-check passed

  • Agents SDK

    hodgef/apiker

    Build AI agents on Cloudflare Workers using the Agents SDK. An agent skill from hodgef/apiker.

    127 GitHub starsUsed in 3 repos~3k tokens
    Backend & APIsAuto-check passed

  • Domain Web

    fjrevoredo/mini-diarium

    A skill your agent uses when building web services. An agent skill from fjrevoredo/mini-diarium.

    308 GitHub starsUsed in 1 repo~1k tokens
    Backend & APIsAuto-check passed

  • Sentry React SDK

    getsentry/sentry-for-ai

    Official

    Full Sentry SDK setup for React. An agent skill from getsentry/sentry-for-ai.

    268 GitHub stars~4.8k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Sentry Nestjs SDK

    getsentry/sentry-for-ai

    Official

    Full Sentry SDK setup for NestJS. An agent skill from getsentry/sentry-for-ai.

    268 GitHub stars~8.7k tokensUpdated today
    Backend & APIsAuto-check passed

  • Building AI Agent On Cloudflare

    majiayu000/claude-skill-registry

    Builds AI agents on Cloudflare using the Agents SDK with state management, real-time WebSockets, scheduled tasks, tool integration, and chat capabilities.

    666 GitHub starsUsed in 1 repo~2.3k tokens
    Backend & APIsAuto-check passed

More from reactive/data-client

All 17 skills in this repo

  • Data Client REST Setup

    reactive/data-client

    Set up and migrate to @data-client/rest for REST APIs. An agent skill from reactive/data-client.

    2k GitHub stars~2.9k tokensUpdated today
    Auto-check passed

  • Data Client React

    reactive/data-client

    Use @data-client/react hooks for data fetching, mutations, and rendering - useSuspense, useFetch, useQuery, useCache, useLive, useDLE, useSubscription, useController, DataProvider, AsyncBoundary…

    2k GitHub stars~1.9k tokensUpdated today
    Auto-check passed

  • Data Client React Testing

    reactive/data-client

    Test @data-client/react with renderDataHook and mountDataClient - jest unit tests, fixtures, interceptors, MockResolver, mock responses, nock HTTP mocking, fake timers for polling/subscription…

    2k GitHub stars~1.5k tokensUpdated today
    Auto-check passed

  • Data Client REST

    reactive/data-client

    Define REST APIs with @data-client/rest - resource(), RestEndpoint, CRUD (GET/POST/PUT/PATCH/DELETE), HTTP fetch, normalize, cache, urlPrefix, path-to-regexp parameters, searchParams, pagination…

    2k GitHub stars~2k tokensUpdated today
    Auto-check passed

  • Data Client Schema

    reactive/data-client

    Model data with @data-client schemas (Entity, EntityMixin, Collection, Union, Query, Values, All, Invalidate, Lazy, Scalar) for atomic, consistent, referentially-equal async data via normalization…

    2k GitHub stars~2.3k tokensUpdated today
    Auto-check passed

  • Data Client Vue

    reactive/data-client

    Use @data-client/vue composables for data fetching, mutations, and rendering - useSuspense, useFetch, useQuery, useCache, useLive, useDLE, useSubscription, useController, useLoading, useDebounce…

    2k GitHub stars~2.5k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Data Client Manager

What does Data Client Manager do?

Implement @data-client Managers for global/background side effects - websocket, SSE, polling, real-time updates, subscriptions, logging, analytics, metrics/timing, error reporting (Sentry), toast…. Data Client Manager is an agent skill from reactive/data-client. Implement @data-client Managers for global/background side effects - websocket, SSE, polling, real-time updates, subscriptions, logging, analytics, metrics/timing, error reporting (Sentry), toast notifications, refetch on window focus or network reconnect, cross-tab sync (BroadcastChannel), offline persistence (localStorage/IndexedDB), auth logout on 401, middleware, intercepting Controller actions, DataProvider managers prop, redux-style action handling.

When should I use Data Client Manager?

Data Client Manager fits situations like: adding cross-cutting store behavior; reacting to dispatched actions; handling external event streams.

How do I install Data Client Manager in Claude Code?

Run `npx skills add reactive/data-client --skill data-client-manager -a claude-code`. Or copy the skill folder (.agents/skills/data-client-manager in reactive/data-client) into .claude/skills/data-client-manager in your project. Claude Code loads it when a task matches its description.

How do I install Data Client Manager in Codex?

Run `npx skills add reactive/data-client --skill data-client-manager -a codex`. Or copy the skill folder (.agents/skills/data-client-manager in reactive/data-client) into .agents/skills/data-client-manager in your project. Codex loads it when a task matches its description.

Can I use Data Client Manager in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add reactive/data-client --skill data-client-manager -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/data-client-manager, .gemini/skills/data-client-manager, .github/skills/data-client-manager and .opencode/skills/data-client-manager in your project.

What does Data Client Manager need to run?

SKILL.md names no scripts, command-line tools or credentials: Data Client Manager is instructions for the agent only.

Does Data Client Manager access the network?

SKILL.md names 1 domain. As links in the text: redux.js.org. This is read from the text; nothing was executed.

Is Data Client Manager safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Data Client Manager use?

Data Client Manager is published under the Apache-2.0 licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Data Client Manager use?

About 2.6k tokens (SKILL.md is roughly 10k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 31k tokens, read only when the agent opens those files.

What are the alternatives to Data Client Manager?

Skills that share tags, products or a category with Data Client Manager: Rx JS (valkey-io/valkey-admin, 148 stars), Agents SDK (hodgef/apiker, 127 stars), Domain Web (fjrevoredo/mini-diarium, 308 stars) and Sentry React SDK (getsentry/sentry-for-ai, 268 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Data Client Manager?

reactive (a GitHub organization) maintains it in reactive/data-client, which has 2,037 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on October 7, 2026.

Source: reactive/data-client on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.