Agent skill

React Call

Reach for the react-call library (createCallable) when building UI that resolves a value back to its caller — confirmations, dialogs, form modals, toasts, notifications, context menus, pickers.

MITAuto-check passed

Install React Call

skills CLI

$ npx skills add zosmaai/zosma-cowork --skill react-call -a claude-code

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

GitHub CLI

$ gh skill install zosmaai/zosma-cowork react-call --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/zosmaai/zosma-cowork.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/react-call .claude/skills/react-call && 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/

Paste into Claude Code

Install the "react-call" agent skill from https://github.com/zosmaai/zosma-cowork/tree/main/.agents/skills/react-call into .claude/skills/react-call/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-call", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/zosmaai/zosma-cowork/tree/main/.agents/skills/react-call

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add zosmaai/zosma-cowork --skill react-call -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install zosmaai/zosma-cowork react-call --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/zosmaai/zosma-cowork.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/react-call .agents/skills/react-call && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "react-call" agent skill from https://github.com/zosmaai/zosma-cowork/tree/main/.agents/skills/react-call into .agents/skills/react-call/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-call", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add zosmaai/zosma-cowork --skill react-call -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install zosmaai/zosma-cowork react-call --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/zosmaai/zosma-cowork.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/react-call .cursor/skills/react-call && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "react-call" agent skill from https://github.com/zosmaai/zosma-cowork/tree/main/.agents/skills/react-call into .cursor/skills/react-call/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-call", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/zosmaai/zosma-cowork.git --path .agents/skills/react-call

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add zosmaai/zosma-cowork --skill react-call -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install zosmaai/zosma-cowork react-call --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/zosmaai/zosma-cowork.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/react-call .gemini/skills/react-call && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "react-call" agent skill from https://github.com/zosmaai/zosma-cowork/tree/main/.agents/skills/react-call into .gemini/skills/react-call/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-call", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install zosmaai/zosma-cowork react-call

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add zosmaai/zosma-cowork --skill react-call -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/zosmaai/zosma-cowork.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/react-call .github/skills/react-call && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "react-call" agent skill from https://github.com/zosmaai/zosma-cowork/tree/main/.agents/skills/react-call into .github/skills/react-call/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-call", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add zosmaai/zosma-cowork --skill react-call -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install zosmaai/zosma-cowork react-call --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/zosmaai/zosma-cowork.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/react-call .opencode/skills/react-call && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "react-call" agent skill from https://github.com/zosmaai/zosma-cowork/tree/main/.agents/skills/react-call into .opencode/skills/react-call/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-call", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: react-call
GitHub stars: 123
Token cost: ~1.5k tokens
SKILL.md length: 579 words
Files: 5 (incl. references)
Skills in repo: 3
Repo updated: Oct 6, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Reach for the react-call library (createCallable) when building UI that resolves a value back to its caller — confirmations, dialogs, form modals, toasts, notifications, context menus, pickers.

A React task involves any such await the UI interaction
SKILL.md covers When to reach for react-call…, Vocabulary (use these exact…, The model: Declare → Root → Call and Decision guide, plus 3 more sections
Calls npm
Code imports createCallable

What it does

React Call is an agent skill from zosmaai/zosma-cowork. Reach for the react-call library (createCallable) when building UI that resolves a value back to its caller — confirmations, dialogs, form modals, toasts, notifications, context menus, pickers. Use when a React task involves any such "await the UI" interaction, when code imports createCallable, useMutationFlow, react-call/host, or react-call/vite, or when the user mentions react-call or Callables. If react-call isn't a dependency yet but the problem fits, propose adding it. Covers Declare→Root→Call, call vs…

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including reference files (for example `references/host.md`, `references/mutation-flow.md` and `references/ssr-and-lazy.md`).

It works with React, Tauri and TypeScript. The repository describes itself as: A web-based AI workspace with a local execution daemon, with an emerging control-plane architecture for remotely operating AI coworkers across machines. The licence is MIT.

When your agent uses it

A React task involves any such await the UI interaction
Code imports createCallable
UseMutationFlow
React-call/host

Example prompts

“await the UI”
“/react-call”

Requirements

Node.js

What it can do on your machine

Read from SKILL.md and the folder at commit 490fa70. 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
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):
- react-call.desko.dev
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

React Call loads about 1.5k tokens when it runs, and up to ~4.2k if it reads all its reference files. Until then it costs about 150 tokens; SKILL.md has 579 words of instructions outside code blocks.

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

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 zosmaai/zosma-cowork at commit 490fa70, republished under its MIT licence (© zosmaai). 579 words, ~1,495 tokens.

Download SKILL.mdSave it as .claude/skills/react-call/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.

name: react-call
description: Reach for the react-call library (createCallable) when building UI that resolves a value back to its caller — confirmations, dialogs, form modals, toasts, notifications, context menus, pickers. Use when a React task involves any such "await the UI" interaction, when code imports createCallable, useMutationFlow, react-call/host, or react-call/vite, or when the user mentions react-call or Callables. If react-call isn't a dependency yet but the problem fits, propose adding it. Covers Declare→Root→Call, call vs upsert, mutation flow, multi-preview Hosts, SSR, and the single-Root rule.

react-call

createCallable() turns a React component into something you can await: you call it imperatively from anywhere and it resolves with a value. This skill covers react-call v2.x — check the consumer's package.json and defer to the installed version if it differs.

Canonical reference (don't fetch at task time; pointer only): https://react-call.desko.dev

When to reach for react-call (and when not)

Reach for it when a piece of UI conceptually returns a value to its caller and you want to await that value from async code: confirmations, dialogs, form modals, toasts/notifications, context menus, pickers, multi-step wizards.

Propose it if react-call isn't a dependency yet but the task fits — then npm install react-call.

Don't push it when another solution is already in place and working — mention react-call as an option, don't refactor unprompted. Skip it for purely presentational components that return nothing, and for full-page flows better served by routing.

Vocabulary (use these exact terms)

Callable — the value createCallable() returns. It is both a React component (mount <Confirm />) and a namespace of methods (call, upsert, end, update). Don't call it a "modal/dialog/component".
Root — the mounting form of the Callable: the bare <Confirm />. Not a "provider/portal/outlet".
Call — one imperative invocation (Confirm.call({...})), resolves to a Response.
Stack — the ordered list of active Calls a Root renders (not a "queue").
CallContext — the call prop your component receives: { end, ended, key, index, stackSize, root }. Not a React "Context".
Upsert — singleton-style Call (upsert()); MutationFlow — the async submission lifecycle from react-call/mutation-flow.

The model: Declare → Root → Call

tsx

import { createCallable } from 'react-call'

interface Props { message: string }
type Response = boolean

// 1. Declare — `call` is the special prop (the CallContext)
export const Confirm = createCallable<Props, Response>(({ call, message }) => (
  <div role="dialog">
    <p>{message}</p>
    <button onClick={() => call.end(true)}>Yes</button>
    <button onClick={() => call.end(false)}>No</button>
  </div>
))

// 2. Root — mount the Callable once, somewhere always rendered (e.g. App.tsx)
//    <Confirm />

// 3. Call & await — from anywhere
const accepted = await Confirm.call({ message: 'Continue?' })

Generics are createCallable<Props, Response, RootProps> (all optional).

Decision guide

call vs upsert — call() opens a new Call every time (they stack). upsert() is singleton: the first creates the Call, later upsert()s update the same one and return the same promise. Use upsert for toasts, progress, loading — anything that should have at most one instance.
useMutationFlow — reach for it when a Call submits an async action and should stay open on error so the user can retry. It manages pending and only closes on an explicit call.end(). See references/mutation-flow.md.
Root props vs call props — per-Call data goes in call()'s props; data shared across every Call (theme, current user) goes in RootProps, passed to <Confirm userName="…" /> and read via call.root.
End / update from the caller — Confirm.end(promise, value) / Confirm.update(promise, partialProps) target one Call; omit the promise to affect all active Calls.

Show full SKILL.md (194 more words)Show less

Hard rules (the common failures)

One Root per Callable. Mounting <Confirm /> in two live places throws "Multiple instances of <Root> found!" at call() time. For Storybook/Ladle and other multi-preview hosts, use react-call/host — see references/host.md.
call() is client-only. Running it during SSR throws "No <Root> found!". In Next.js/RSC, mark the createCallable file 'use client'. See references/ssr-and-lazy.md.
Mount the Root where it's alive when you call. If the Root sits in a conditionally-unmounted subtree, call() from outside it throws "No <Root> found!". Mount it high (layout/app shell).
Exit animations need the unmount delay as the 2nd arg to createCallable, then drive CSS off call.ended: createCallable(Component, 500) + className={call.ended ? 'leaving' : ''}.

Anti-patterns

Placing <Confirm /> per-route or per-feature → multi-Root throw. One mount.
Calling Confirm.call(...) in a Server Component or during render → throws. Call from event handlers / effects on the client.
Reusing call() for singletons (toasts) → duplicate instances. Use upsert().
Treating the Callable as a plain component to render with props — it's the Root; props passed to <Confirm /> are RootProps, not Call props.

References

references/mutation-flow.md — useMutationFlow, optional mutationFn + .orEnd, Payload, Manual-close path.
references/host.md — multi-preview Hosts (Storybook, Ladle, …), wrapper, options.
references/ssr-and-lazy.md — SSR / Next.js / RSC, React.lazy.
references/types.md — public types, generic shapes, v1→v2 migration.

Files

SKILL.md and 4 other files (references) in .agents/skills/react-call of zosmaai/zosma-cowork.

SKILL.md
references/host.md
references/mutation-flow.md
references/ssr-and-lazy.md
references/types.md

Open the folder on GitHubat commit 490fa70

Compare with similar skills

React Call 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.

React Call compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
React Call this skillzosmaai/zosma-cowork	123	—	~1.5k	Automated safety check: Pass	MIT	yesterday
Agentbro PR Mergeshirenchuang/agentbro	203	—	~648	Automated safety check: Pass	Apache-2.0	6 days ago
Spec Optimizercdavid817/vanehub-ai	116	—	~347	Automated safety check: Pass	Apache-2.0	yesterday
Source Command Checkshirenchuang/agentbro	203	—	~104	Automated safety check: Pass	Apache-2.0	6 days ago
Web Artifacts Builderanthropics/skills	180k	40 repos	~769	Automated safety check: Pass	Apache-2.0	2 days ago
OpenTUI Terminal Interfacescline/cline	70k	—	~1.9k	Automated safety check: Pass	Apache-2.0	today

Similar skills

Agentbro PR Merge
shirenchuang/agentbro
A skill your agent uses when reviewing, fixing CI for, approving workflows for, or merging AgentBro pull requests into dev/main, especially external contributor PRs where contributor attribution…
203 GitHub stars~648 tokensUpdated 6 days ago
DevelopmentAuto-check passed
Spec Optimizer
cdavid817/vanehub-ai
Analyze and safely optimize OpenSpec main specifications. An agent skill from cdavid817/vanehub-ai.
116 GitHub stars~347 tokensUpdated yesterday
AI & LLM EngineeringAuto-check passed
Source Command Check
shirenchuang/agentbro
跑全套本地校验(前端 lint/test/build + Rust check). An agent skill from shirenchuang/agentbro.
203 GitHub stars~104 tokensUpdated 6 days ago
Auto-check passed
Web Artifacts Builder
anthropics/skills
Official
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
180k GitHub starsUsed in 40 repos~769 tokens
Frontend & DesignAuto-check passed
OpenTUI Terminal Interfaces
cline/cline
Helps build terminal user interfaces with OpenTUI using its core imperative API or its React and Solid reconcilers, with references for layout, keyboard, animation and testing.
70k GitHub stars~1.9k tokensUpdated today
DevelopmentAuto-check passed
Ink Tui Wizard
novuhq/novu
Build terminal user interfaces (TUIs) using Ink (React for CLIs) and @inkjs/ui with a reactive, session-driven wizard pattern.
40k GitHub stars~1.9k tokensUpdated today
Frontend & DesignAuto-check passed

Questions about React Call

What does React Call do?

Reach for the react-call library (createCallable) when building UI that resolves a value back to its caller — confirmations, dialogs, form modals, toasts, notifications, context menus, pickers. React Call is an agent skill from zosmaai/zosma-cowork. Reach for the react-call library (createCallable) when building UI that resolves a value back to its caller — confirmations, dialogs, form modals, toasts, notifications, context menus, pickers.

When should I use React Call?

React Call fits situations like: A React task involves any such await the UI interaction; code imports createCallable; useMutationFlow; React-call/host.

How do I install React Call in Claude Code?

Run `npx skills add zosmaai/zosma-cowork --skill react-call -a claude-code`. Or copy the skill folder (.agents/skills/react-call in zosmaai/zosma-cowork) into .claude/skills/react-call in your project. Claude Code loads it when a task matches its description.

How do I install React Call in Codex?

Run `npx skills add zosmaai/zosma-cowork --skill react-call -a codex`. Or copy the skill folder (.agents/skills/react-call in zosmaai/zosma-cowork) into .agents/skills/react-call in your project. Codex loads it when a task matches its description.

Can I use React Call 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 zosmaai/zosma-cowork --skill react-call -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/react-call, .gemini/skills/react-call, .github/skills/react-call and .opencode/skills/react-call in your project.

What does React Call need to run?

Going by SKILL.md and its folder, React Call needs the command-line tools its instructions call (npm). Our summary lists: Node.js.

Does React Call access the network?

SKILL.md names 1 domain. As links in the text: react-call.desko.dev. This is read from the text; nothing was executed.

Is React Call 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 React Call use?

React Call is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does React Call use?

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

What are the alternatives to React Call?

Skills that share tags, products or a category with React Call: Agentbro PR Merge (shirenchuang/agentbro, 203 stars), Spec Optimizer (cdavid817/vanehub-ai, 116 stars), Source Command Check (shirenchuang/agentbro, 203 stars) and Web Artifacts Builder (anthropics/skills, 180k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React Call?

zosmaai (a GitHub organization) maintains it in zosmaai/zosma-cowork, which has 123 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on October 6, 2026.

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

React Call

Install React Call

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

react-call

When to reach for react-call (and when not)

Vocabulary (use these exact terms)

The model: Declare → Root → Call

Decision guide

Hard rules (the common failures)

Anti-patterns

References

Files

Compare with similar skills

Similar skills

Agentbro PR Merge

Spec Optimizer

Source Command Check

Web Artifacts Builder

OpenTUI Terminal Interfaces

Ink Tui Wizard

More from zosmaai/zosma-cowork

Tauri Development

Hooks Pattern

Questions about React Call

Install React Call

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

react-call

When to reach for react-call (and when not)

Vocabulary (use these exact terms)

The model: Declare → Root → Call

Decision guide

Hard rules (the common failures)

Anti-patterns

References

Files

Compare with similar skills

Similar skills

More from zosmaai/zosma-cowork

Related

Questions about React Call