Agent skill

Data Client Endpoint Setup

by reactive in reactive/data-client

Set up @data-client/endpoint for custom async operations. An agent skill from reactive/data-client.

Apache-2.0Auto-check passedBackend & APIs

Install Data Client Endpoint Setup

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

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

GitHub CLI
$ gh skill install reactive/data-client data-client-endpoint-setup --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-endpoint-setup .claude/skills/data-client-endpoint-setup && 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-endpoint-setup
GitHub stars
2k
Token cost
~2k tokens
SKILL.md length
228 words
Files
4 (incl. references)
Skills in repo
17
Repo updated
First seen
Licence
Apache-2.0

At a glance

Set up @data-client/endpoint for custom async operations. An agent skill from reactive/data-client.

  • Works in 2 steps: Apply skill "data-client-schema" to… → Apply skill "data-client-react" or…
  • Tasks that involve GraphQL
  • SKILL.md covers Installation, When to Use, Wrapping Async Functions and Endpoint Options, plus 8 more sections
  • Calls npm, yarn and pnpm

What it does

Data Client Endpoint Setup is an agent skill from reactive/data-client. Set up @data-client/endpoint for custom async operations. Wraps existing async functions with Endpoint for use with Data Client hooks. Use after data-client-setup detects non-REST/GraphQL async patterns.

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

It sits in Backend & APIs, covering GraphQL and Realtime and WebSockets. It works with GraphQL and Vue.js. 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

  • Tasks that involve GraphQL
  • Tasks that involve Realtime and WebSockets

Example prompts

  • “/data-client-endpoint-setup”

Requirements

  • Node.js

Workflow steps

2 steps, taken from the first numbered list in SKILL.md.

  1. Apply skill "data-client-schema" to define Entity classes
  2. Apply skill "data-client-react" or "data-client-vue" for usage

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

    Shell commands in SKILL.md call:

    • npm
    • yarn
    • pnpm

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

  • Network

    No URLs in SKILL.md. Its commands use npm, yarn and pnpm, which can reach the network depending on how they are called.

    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 Endpoint Setup loads about 2k tokens when it runs, and up to ~11k if it reads all its reference files. Until then it costs about 58 tokens; SKILL.md has 228 words of instructions outside code blocks.

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

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). 228 words, ~2,038 tokens.

Download SKILL.mdSave it as .claude/skills/data-client-endpoint-setup/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
data-client-endpoint-setup
description
Set up @data-client/endpoint for custom async operations. Wraps existing async functions with Endpoint for use with Data Client hooks. Use after data-client-setup detects non-REST/GraphQL async patterns.
disable-model-invocation
true

Custom Endpoint Setup

This guide configures @data-client/endpoint for wrapping existing async functions. Use it once the Data Client provider is set up and the project has async operations that aren't REST or GraphQL.

Installation

Install the endpoint package alongside the core package:

bash
# npm
npm install @data-client/endpoint

# yarn
yarn add @data-client/endpoint

# pnpm
pnpm add @data-client/endpoint

When to Use

Use @data-client/endpoint when:

  • Working with third-party SDK clients (Firebase, Supabase, AWS SDK, etc.)
  • Using WebSocket connections for data fetching
  • Accessing local async storage (IndexedDB, AsyncStorage)
  • Any async function that doesn't fit REST or GraphQL patterns

Wrapping Async Functions

See Endpoint for full API documentation.

Detection

Scan for existing async functions that fetch data:

  • Functions returning Promise<T>
  • SDK client methods
  • WebSocket message handlers
  • IndexedDB operations
Basic Wrapping Pattern

Before (existing code):

ts
// src/api/users.ts
export async function getUser(id: string): Promise<User> {
  const response = await sdk.users.get(id);
  return response.data;
}

export async function listUsers(filters: UserFilters): Promise<User[]> {
  const response = await sdk.users.list(filters);
  return response.data;
}

After (with Endpoint wrapper):

ts
// src/api/users.ts
import { Endpoint } from '@data-client/endpoint';
import { User } from '../schemas/User';

// Original functions (keep for reference or direct use)
async function fetchUser(id: string): Promise<User> {
  const response = await sdk.users.get(id);
  return response.data;
}

async function fetchUsers(filters: UserFilters): Promise<User[]> {
  const response = await sdk.users.list(filters);
  return response.data;
}

// Wrapped as Endpoints for use with Data Client hooks
export const getUser = new Endpoint(fetchUser, {
  schema: User,
  name: 'getUser',
});

export const listUsers = new Endpoint(fetchUsers, {
  schema: [User],
  name: 'listUsers',
});

Endpoint Options

Configure based on the function's behavior:

ts
export const getUser = new Endpoint(fetchUser, {
  // Required for normalization
  schema: User,
  
  // Unique name (important if function names get mangled in production)
  name: 'getUser',
  
  // Mark as side-effect if it modifies data
  sideEffect: true, // for mutations
  
  // Cache configuration
  dataExpiryLength: 60000, // 1 minute
  errorExpiryLength: 5000, // 5 seconds
  
  // Enable polling
  pollFrequency: 30000, // poll every 30 seconds
  
  // Optimistic updates
  getOptimisticResponse(snap, id) {
    return snap.get(User, { id });
  },
});

Custom Key Function

If the default key function doesn't work for your use case:

ts
export const searchUsers = new Endpoint(fetchSearchUsers, {
  schema: [User],
  name: 'searchUsers',
  key({ query, page }) {
    // Custom key for complex parameters
    return `searchUsers:${query}:${page}`;
  },
});

Common Patterns

Firebase/Firestore
ts
import { Endpoint } from '@data-client/endpoint';
import { doc, getDoc, collection, getDocs } from 'firebase/firestore';
import { db } from './firebase';
import { User } from '../schemas/User';

async function fetchUser(id: string): Promise<User> {
  const docRef = doc(db, 'users', id);
  const docSnap = await getDoc(docRef);
  return { id: docSnap.id, ...docSnap.data() } as User;
}

async function fetchUsers(): Promise<User[]> {
  const querySnapshot = await getDocs(collection(db, 'users'));
  return querySnapshot.docs.map(doc => ({
    id: doc.id,
    ...doc.data(),
  })) as User[];
}

export const getUser = new Endpoint(fetchUser, {
  schema: User,
  name: 'getUser',
});

export const listUsers = new Endpoint(fetchUsers, {
  schema: [User],
  name: 'listUsers',
});
Supabase
ts
import { Endpoint } from '@data-client/endpoint';
import { supabase } from './supabase';
import { User } from '../schemas/User';

async function fetchUser(id: string): Promise<User> {
  const { data, error } = await supabase
    .from('users')
    .select('*')
    .eq('id', id)
    .single();
  if (error) throw error;
  return data;
}

async function fetchUsers(filters?: { role?: string }): Promise<User[]> {
  let query = supabase.from('users').select('*');
  if (filters?.role) {
    query = query.eq('role', filters.role);
  }
  const { data, error } = await query;
  if (error) throw error;
  return data;
}

export const getUser = new Endpoint(fetchUser, {
  schema: User,
  name: 'getUser',
});

export const listUsers = new Endpoint(fetchUsers, {
  schema: [User],
  name: 'listUsers',
});
IndexedDB
ts
import { Endpoint } from '@data-client/endpoint';
import { User } from '../schemas/User';

async function fetchUserFromCache(id: string): Promise<User | undefined> {
  const db = await openDB('myapp', 1);
  return db.get('users', id);
}

async function fetchUsersFromCache(): Promise<User[]> {
  const db = await openDB('myapp', 1);
  return db.getAll('users');
}

export const getCachedUser = new Endpoint(fetchUserFromCache, {
  schema: User,
  name: 'getCachedUser',
  dataExpiryLength: Infinity, // Never expires
});

export const listCachedUsers = new Endpoint(fetchUsersFromCache, {
  schema: [User],
  name: 'listCachedUsers',
  dataExpiryLength: Infinity,
});
WebSocket Fetch
ts
import { Endpoint } from '@data-client/endpoint';
import { socket } from './socket';
import { Message } from '../schemas/Message';

async function fetchMessages(roomId: string): Promise<Message[]> {
  return new Promise((resolve, reject) => {
    socket.emit('getMessages', { roomId }, (response: any) => {
      if (response.error) reject(response.error);
      else resolve(response.data);
    });
  });
}

export const getMessages = new Endpoint(fetchMessages, {
  schema: [Message],
  name: 'getMessages',
});

Mutations with Side Effects

ts
export const createUser = new Endpoint(
  async (userData: Omit<User, 'id'>): Promise<User> => {
    const { data, error } = await supabase
      .from('users')
      .insert(userData)
      .select()
      .single();
    if (error) throw error;
    return data;
  },
  {
    schema: User,
    name: 'createUser',
    sideEffect: true,
  },
);

export const deleteUser = new Endpoint(
  async (id: string): Promise<{ id: string }> => {
    const { error } = await supabase.from('users').delete().eq('id', id);
    if (error) throw error;
    return { id };
  },
  {
    name: 'deleteUser',
    sideEffect: true,
  },
);

Using extend() for Variations

ts
const baseUserEndpoint = new Endpoint(fetchUser, {
  schema: User,
  name: 'getUser',
});

// With different cache settings
export const getUserFresh = baseUserEndpoint.extend({
  dataExpiryLength: 0, // Always refetch
});

// With polling
export const getUserLive = baseUserEndpoint.extend({
  pollFrequency: 5000, // Poll every 5 seconds
});

Important: Function Name Mangling

In production builds, function names may be mangled. Always provide explicit name option:

ts
// Bad - name may become 'a' or similar in production
const getUser = new Endpoint(fetchUser);

// Good - explicit name survives minification
const getUser = new Endpoint(fetchUser, { name: 'getUser' });

Usage in with hooks and controller

tsx
useSuspense(getUser, id);
ctrl.fetch(createUser, userData);

Both hooks and controller methods take endpoint as first argument, with the endpoint's function arguments following.

Next Steps

  1. Apply skill "data-client-schema" to define Entity classes
  2. Apply skill "data-client-react" or "data-client-vue" for usage

References

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

© 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 3 other files (references) in .agents/skills/data-client-endpoint-setup of reactive/data-client.

  • SKILL.md
  • references.json
  • references/Endpoint.md
  • references/Endpoint.vue.md

Open the folder on GitHubat commit 02c0932

Compare with similar skills

Data Client Endpoint Setup 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 Endpoint Setup compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Data Client Endpoint Setup this skillreactive/data-client2k—~2kAutomated safety check: PassApache-2.0
GraphQL ArchitectJeffallan/claude-skills12k1 repos~1.3kAutomated safety check: PassMIT
Spider Kingaoyunyang/spider-king-skill507—~7.3kAutomated safety check: PassMIT
Domain Webfjrevoredo/mini-diarium3081 repos~1kAutomated safety check: PassMIT
Sentry Nestjs SDKgetsentry/sentry-for-ai268—~8.7kAutomated safety check: PassApache-2.0
API ForgeEliasOulkadi/shokunin114—~2.9kAutomated safety check: PassMIT

Similar skills

  • GraphQL Architect

    Jeffallan/claude-skills

    Designs GraphQL schemas and Apollo Federation graphs, with DataLoader resolvers, subscriptions, query complexity limits and caching.

    12k GitHub starsUsed in 1 repo~1.3k tokens
    Backend & APIsAuto-check passed
  • Spider King

    aoyunyang/spider-king-skill

    Pure-web protocol reverse skill: turn hostile browser clients into browser-free Python collectors.

    507 GitHub stars~7.3k tokensUpdated 1 mo ago
    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 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
  • API Forge

    EliasOulkadi/shokunin

    Design REST/GraphQL APIs with OpenAPI 3.1, error handling, pagination, rate limiting, webhooks, and idempotency.

    114 GitHub stars~2.9k tokensUpdated 2 days ago
    Backend & APIsAuto-check passed
  • User Enumeration

    NeoTheCapt/RedteamAgent

    Discover any interface (HTTP, WebSocket, GraphQL, gRPC, or other) that distinguishes between existing and non-existing users through any observable difference

    140 GitHub stars~2.9k tokensUpdated 2 mo ago
    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 Manager

    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…

    2k GitHub stars~2.6k 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

Works with

Categories

Questions about Data Client Endpoint Setup

What does Data Client Endpoint Setup do?

Set up @data-client/endpoint for custom async operations. An agent skill from reactive/data-client. Data Client Endpoint Setup is an agent skill from reactive/data-client. Set up @data-client/endpoint for custom async operations.

When should I use Data Client Endpoint Setup?

Data Client Endpoint Setup fits situations like: tasks that involve GraphQL; tasks that involve Realtime and WebSockets.

How do I install Data Client Endpoint Setup in Claude Code?

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

How do I install Data Client Endpoint Setup in Codex?

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

Can I use Data Client Endpoint Setup 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-endpoint-setup -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-endpoint-setup, .gemini/skills/data-client-endpoint-setup, .github/skills/data-client-endpoint-setup and .opencode/skills/data-client-endpoint-setup in your project.

What does Data Client Endpoint Setup need to run?

Going by SKILL.md and its folder, Data Client Endpoint Setup needs the command-line tools its instructions call (npm, yarn and pnpm). Our summary lists: Node.js.

Does Data Client Endpoint Setup access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Data Client Endpoint Setup 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 Endpoint Setup use?

Data Client Endpoint Setup is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Data Client Endpoint Setup use?

About 2k tokens (SKILL.md is roughly 8.2k 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 8.5k tokens, read only when the agent opens those files.

What are the alternatives to Data Client Endpoint Setup?

Skills that share tags, products or a category with Data Client Endpoint Setup: GraphQL Architect (Jeffallan/claude-skills, 12k stars), Spider King (aoyunyang/spider-king-skill, 507 stars), Domain Web (fjrevoredo/mini-diarium, 308 stars) and Sentry Nestjs 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 Endpoint Setup?

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.