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

Wrdn Effect Atom Optimistic

by UsefulSoftwareCo in UsefulSoftwareCo/executor

Detects hand-rolled optimistic-update plumbing in React code that should be using effect-atom's Atom.optimistic and Atom.optimisticFn instead.

MITAuto-check: notesFrontend & Design

Install Wrdn Effect Atom Optimistic

skills CLI
$ npx skills add UsefulSoftwareCo/executor --skill wrdn-effect-atom-optimistic -a claude-code

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

GitHub CLI
$ gh skill install UsefulSoftwareCo/executor wrdn-effect-atom-optimistic --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/UsefulSoftwareCo/executor.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/wrdn-effect-atom-optimistic .claude/skills/wrdn-effect-atom-optimistic && 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
wrdn-effect-atom-optimistic
GitHub stars
4.1k
Token cost
~2.9k tokens
SKILL.md length
1,000 words
Files
1
Skills in repo
21
Repo updated
First seen
Licence
MIT

At a glance

Detects hand-rolled optimistic-update plumbing in React code that should be using effect-atom's Atom.optimistic and Atom.optimisticFn instead.

  • Works in 5 steps: Find the mutation. Is the component… → Find the read. Is the same component or… → Find the bookkeeping. Look for any of… → …
  • Tasks that involve React components
  • SKILL.md covers Trace before reporting, What to Report, What NOT to Report and Severity ladder, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Wrdn Effect Atom Optimistic is an agent skill from UsefulSoftwareCo/executor. Detects hand-rolled optimistic-update plumbing in React code that should be using effect-atom's Atom.optimistic and Atom.optimisticFn instead. Run on diffs touching packages/react/src/api/atoms.tsx, packages/react/src/pages//.tsx, or any file that imports an effect-atom mutation atom from ./api/atoms. The hand-rolled patterns race on concurrent mutations and the codebase has chosen the effect-atom primitives as the canonical answer.

Its SKILL.md is about 2.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering React components. It works with React. The repository describes itself as: The missing integration layer for AI agents. Let them call any OpenAPI / MCP / GraphQL / custom js functions in secure environment. The licence is MIT.

When your agent uses it

  • Tasks that involve React components

Example prompts

  • “Use the wrdn-effect-atom-optimistic skill to detect hand-rolled optimistic-update plumbing in React code that should be using effect-atom's…”
  • “/wrdn-effect-atom-optimistic”

Requirements

  • Pre-approved tools (allowed-tools): Read, Grep, Glob, Bash

Workflow steps

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

  1. Find the mutation. Is the component calling useAtomSet() from packages/react/src/api/atoms.tsx? If not, this skill does not apply.
  2. Find the read. Is the same component or its parent reading the matching list via useAtomValue((scopeId))? If yes, the optimistic…
  3. Find the bookkeeping. Look for any of these alongside the mutation call
  4. Confirm the optimistic atom exists or is missing. Open packages/react/src/api/atoms.tsx and check for OptimisticAtom = Atom.family(scopeId…
  5. Check for grandfathered code. usePendingSources, useSourcesWithPending, useConnectionsWithPendingRemovals, and…

What it can do on your machine

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

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Grep
    • Glob
    • Bash

    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

    No URLs in SKILL.md.

    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

Wrdn Effect Atom Optimistic loads about 2.9k tokens when it runs. Until then it costs about 117 tokens; SKILL.md has 1,000 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~117
When it runs · the whole SKILL.md, loaded when a task matches
~2.9k

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: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Read, Grep, Glob, Bash

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 UsefulSoftwareCo/executor at commit 27dccb8, republished under its MIT licence (© UsefulSoftwareCo). 1,000 words, ~2,867 tokens.

Download SKILL.mdSave it as .claude/skills/wrdn-effect-atom-optimistic/SKILL.md (or your agent's skills folder).
name
wrdn-effect-atom-optimistic
description
Detects hand-rolled optimistic-update plumbing in React code that should be using effect-atom's Atom.optimistic and Atom.optimisticFn instead. Run on diffs touching packages/react/src/api/atoms.tsx, packages/react/src/pages/**/*.tsx, or any file that imports an effect-atom mutation atom from ./api/atoms. The hand-rolled patterns race on concurrent mutations and the codebase has chosen the effect-atom primitives as the canonical answer.
allowed-tools
Read, Grep, Glob, Bash

You audit React code in this repo for one thing: did the author roll their own optimistic-update layer on top of an effect-atom query atom instead of using Atom.optimistic / Atom.optimisticFn?

This is not a security skill. It is a correctness skill. The hand-rolled patterns have a known race condition: concurrent mutations on the same row stomp each other's done() calls and the UI flickers back to a stale server value. The fix is the effect-atom primitives, which track transitions and refresh authoritatively. The repo already migrated policies and codified the pattern at .skills/effect-atom-optimistic-updates/SKILL.md.

Trace. Do not pattern-match a useState and call it a day. The signal is "this state is tracking an in-flight mutation alongside an effect-atom query," not "this component uses local state."

Trace before reporting

  1. Find the mutation. Is the component calling useAtomSet(<somethingMutation>) from packages/react/src/api/atoms.tsx? If not, this skill does not apply.
  2. Find the read. Is the same component or its parent reading the matching list via useAtomValue(<sameThingAtom>(scopeId))? If yes, the optimistic substitute exists or should exist.
  3. Find the bookkeeping. Look for any of these alongside the mutation call:
    • useState, useReducer, useRef holding "pending" / "placeholder" / "in-flight" / "optimistic" values keyed by row id
    • Atom.make of a list / map / set of pending entries, in the component or in packages/react/src/api/optimistic.tsx
    • Calls into usePendingResource, usePoliciesWithPending, usePendingPolicies, mergePending, or any helper named like that
    • try { await doMutate(...) } finally { placeholder.done() } shapes
    • Manual id minting (pending-${...}, crypto.randomUUID) in the page-level handler rather than inside an optimisticFn reducer
  4. Confirm the optimistic atom exists or is missing. Open packages/react/src/api/atoms.tsx and check for <thing>OptimisticAtom = Atom.family(scopeId => Atom.optimistic(<thing>Atom(scopeId))). If a sibling resource (sources, secrets, policies) has the optimistic wrapper and this one doesn't, the bug is the missing wrapper plus the hand-rolled substitute.
  5. Check for grandfathered code. usePendingSources, useSourcesWithPending, useConnectionsWithPendingRemovals, and usePendingConnectionRemovals in packages/react/src/api/optimistic.tsx are legacy. New code should not extend them. Their continued existence is not a finding by itself; new consumers or new entries in PendingResource are.

When the trace cannot resolve with the files at hand, drop the finding.

What to Report

  • Hand-rolled pending state next to an effect-atom mutation. Component imports a mutation from ./api/atoms (e.g. updatePolicy, createSecret, removeConnection) and tracks the in-flight value in useState / useRef / a custom atom for the purpose of immediate UI feedback. Severity: medium.
  • New entries in PendingResource or new helpers in packages/react/src/api/optimistic.tsx. The file is closed for new patterns. New rows, new usePending<X> hooks, new use<X>WithPending hooks should instead be Atom.optimistic + Atom.optimisticFn families in atoms.tsx. Severity: medium.
  • try/finally cleanup of a placeholder around await doMutate(...). This shape is the tell. optimisticFn clears its own transition; manual cleanup means the author is reimplementing it. Severity: medium.
  • Reading <thing>Atom(scopeId) in a component that also writes through <thing>OptimisticAtom's mutations. The reads and writes must both go through the optimistic family or both bypass it; mixing them produces visual jumps. Severity: medium.
  • Atom.optimisticFn reducer that derives next state from a captured snapshot of the parent atom instead of from the current argument. The reducer signature is (current, update) => W — the runtime reads the optimistic state itself and passes it as current, which already reflects in-flight transitions. Code that closes over a useAtomValue(...) snapshot or a captured policies variable instead of using current will see stale state under racing edits. A placeholder row id derived from Date.now() or random is fine; the bug is reducer state that ignores current. Severity: low.
  • Atom.optimistic wrapped via Atom.optimistic(policiesAtom(scopeId)) outside an Atom.family. Without Atom.family, every render builds a new optimistic atom and transitions don't share state. Severity: medium.
Show full SKILL.md (416 more words)Show less

What NOT to Report

  • useState / useReducer for UI-local state that has nothing to do with mutation lifecycle: form input values, modal open flags, hover state, derived display values. Read the surrounding code; if there is no useAtomSet or await doMutate near the state, it is not in scope.
  • The legacy hooks themselves in packages/react/src/api/optimistic.tsx (useSourcesWithPending, useConnectionsWithPendingRemovals, usePendingSources, usePendingConnectionRemovals). Existing call sites are grandfathered. Only flag new call sites or new helpers added to that file.
  • useState for a "busy" / "submitting" boolean used to disable a button while the mutation runs. That is not optimistic state.
  • setTimeout / setInterval based debouncing or rate-limiting around a mutation. Different concern.
  • Toast / error-message state. UI feedback, not optimistic data.
  • Server-only code (apps/cloud, apps/local, packages/core/**). This skill is React-specific; do not flag backend handlers, plugin storage, or test helpers.
  • Storybook files, test files, and example-only code. The pattern matters in shipped UI; not in fixtures.

Severity ladder

LevelCriteria
mediumNew optimistic-mutation code that bypasses Atom.optimistic / Atom.optimisticFn and rolls its own pending state. Or a mixed read/write where the read goes through the plain query atom and the write goes through the optimistic mutation.
lowSubtle defects in an Atom.optimisticFn reducer that work today but degrade under racing (clock-based identity, missing Atom.family wrapper, computed-once captures of scopeId).

Do not invent high. Pick low when in doubt and explain why.

Reference patterns (TypeScript)

The repo's reference implementation lives in packages/react/src/api/atoms.tsx (search for policiesOptimisticAtom, updatePolicyOptimistic).

Bad: hand-rolled pending state
tsx
// packages/react/src/pages/secrets.tsx (hypothetical)
import { useState } from "react";
import { useAtomSet, useAtomValue } from "@effect-atom/atom-react";

import { secretsAtom, updateSecret } from "../api/atoms";

export function SecretsPage() {
  const scopeId = useScope();
  const secrets = useAtomValue(secretsAtom(scopeId));
  const doUpdate = useAtomSet(updateSecret, { mode: "promise" });
  const [pendingValue, setPendingValue] = useState<Map<string, string>>(new Map());

  const handleEdit = async (id: string, value: string) => {
    setPendingValue((m) => new Map(m).set(id, value));
    try {
      await doUpdate({ path: { scopeId, secretId: id }, payload: { value } });
    } finally {
      setPendingValue((m) => {
        const next = new Map(m);
        next.delete(id);
        return next;
      });
    }
  };
  // ...
}

The Map keyed by id, the try/finally, the manual cleanup. All three signal a hand-rolled optimistic layer. Two fast edits to the same secret race: A's finally deletes B's pending entry, UI flickers to A's server value before B settles.

Safe: effect-atom primitives
tsx
// packages/react/src/api/atoms.tsx
export const secretsOptimisticAtom = Atom.family((scopeId: ScopeId) =>
  Atom.optimistic(secretsAtom(scopeId)),
);

export const updateSecretOptimistic = Atom.family((scopeId: ScopeId) =>
  secretsOptimisticAtom(scopeId).pipe(
    Atom.optimisticFn({
      reducer: (current, arg: { path: { secretId: SecretId }; payload: { value: string } }) =>
        Result.map(current, (rows) =>
          rows.map((r) => (r.id === arg.path.secretId ? { ...r, value: arg.payload.value } : r)),
        ),
      fn: updateSecret,
    }),
  ),
);

// packages/react/src/pages/secrets.tsx
const secrets = useAtomValue(secretsOptimisticAtom(scopeId));
const doUpdate = useAtomSet(updateSecretOptimistic(scopeId), { mode: "promise" });

const handleEdit = (id: SecretId, value: string) =>
  doUpdate({ path: { scopeId, secretId: id }, payload: { value } });

No local state, no try/finally, no manual cleanup. Multiple edits stack: the runtime feeds each reducer call current reflecting prior in-flight transitions, so the second edit sees the optimistic value of the first.

Bad: extending the legacy layer
tsx
// packages/react/src/api/optimistic.tsx (hypothetical addition)
export const PendingResource = {
  sources: "sources",
  connectionRemovals: "connection-removals",
  secrets: "secrets", // <-- new
} as const;

export interface PendingSecret {
  readonly value: string;
}

export const useSecretsWithPending = (scopeId: ScopeId) => {
  /* ... */
};
export const usePendingSecrets = () => {
  /* ... */
};

Flag any new entry in PendingResource and any new use<X>WithPending / usePending<X> hook. The file is closed for new patterns.

Subtle: missing Atom.family wrapper
tsx
// Bad: builds a fresh optimistic atom every render. No transition state survives.
const optimistic = Atom.optimistic(secretsAtom(scopeId));
const value = useAtomValue(optimistic);
tsx
// Safe: Atom.family memoizes per scopeId so transitions persist.
export const secretsOptimisticAtom = Atom.family((scopeId: ScopeId) =>
  Atom.optimistic(secretsAtom(scopeId)),
);

const value = useAtomValue(secretsOptimisticAtom(scopeId));

Output Requirements

For each finding:

  • File and line of the offending code.
  • Severity from the ladder above.
  • What is wrong, in one sentence.
  • Trace: which mutation atom, which read atom, which symptom (race / stale flicker / unmemoized atom).
  • Fix: name the optimistic family that should exist, or the change that lifts the page's hand-rolled state into atoms.tsx. Point to packages/react/src/api/atoms.tsx (policiesOptimisticAtom) as the reference shape.

Group findings by severity. Lead with medium.

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

Files

Just SKILL.md in .agents/skills/wrdn-effect-atom-optimistic of UsefulSoftwareCo/executor.

Open the folder on GitHubat commit 27dccb8

Compare with similar skills

Wrdn Effect Atom Optimistic 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.

Wrdn Effect Atom Optimistic compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Wrdn Effect Atom Optimistic this skillUsefulSoftwareCo/executor4.1k—~2.9kAutomated safety check: NotesMIT
Web Artifacts Builderanthropics/skills180k40 repos~769Automated safety check: PassApache-2.0
React Composition Patternsvercel-labs/openreview1.7k58 repos~721Automated safety check: PassMIT
React Router Developmentremix-run/react-router57k1 repos~1.5kAutomated safety check: PassMIT
React UI State PatternsChrisWiles/claude-code-showcase6.1k7 repos~1.6kAutomated safety check: PassNone
Chakra UI v3 Builderchakra-ui/chakra-ui41k—~3.1kAutomated safety check: PassMIT

Similar skills

  • 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

  • React Composition Patterns

    vercel-labs/openreview

    Official

    Rules for structuring React components with composition instead of boolean props, covering compound components, lifted state, variants and React 19 changes.

    1.7k GitHub starsUsed in 58 repos~721 tokens
    Frontend & DesignAuto-check passed

  • React Router Development

    remix-run/react-router

    Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.

    57k GitHub starsUsed in 1 repo~1.5k tokens
    Frontend & DesignAuto-check passed

  • React UI State Patterns

    ChrisWiles/claude-code-showcase

    Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.

    6.1k GitHub starsUsed in 7 repos~1.6k tokens
    Frontend & DesignAuto-check passed

  • Chakra UI v3 Builder

    chakra-ui/chakra-ui

    Builds responsive, accessible Chakra UI v3 components and layouts, sets up Chakra in new or existing projects, and designs themes with tokens, semantic tokens and recipes.

    41k GitHub stars~3.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • React Component Performance

    Dimillian/Skills

    Analyze and optimize React component performance issues (slow renders, re-render thrash, laggy lists, expensive computations).

    4k GitHub starsUsed in 5 repos~1.2k tokens
    Frontend & DesignAuto-check passed

More from UsefulSoftwareCo/executor

All 21 skills in this repo

  • Effect Client Wrapper

    UsefulSoftwareCo/executor

    Pattern for wrapping third-party SDK clients (Stripe, Resend, AWS, etc.) with Effect.

    4.1k GitHub starsUsed in 1 repo~1.4k tokens
    Auto-check passed

  • CLI Release

    UsefulSoftwareCo/executor

    Runbook for releasing the executor CLI package (stable and beta).

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

  • Effect Atom Optimistic Updates

    UsefulSoftwareCo/executor

    Pattern for implementing optimistic UI updates with effect-atom in this codebase.

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

  • Effect HTTP Testing

    UsefulSoftwareCo/executor

    Testing Effect HttpApi services end-to-end. An agent skill from UsefulSoftwareCo/executor.

    4.1k GitHub stars~1.6k tokensUpdated today
    Auto-check passed

  • Emulate

    UsefulSoftwareCo/executor

    Use the @executor-js/emulate service emulators (GitHub, Google, Stripe, Resend, WorkOS, …) to test integrations for real — full OpenAPI specs, working OAuth flows, mintable credentials, and a…

    4.1k GitHub stars~2.2k tokensUpdated today
    Auto-check: notes

  • Prod Telemetry

    UsefulSoftwareCo/executor

    Query Executor's production telemetry — Axiom traces (executor-cloud dataset), prod Postgres via PlanetScale, PostHog product analytics — through the Executor MCP.

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

Works with

Categories

Questions about Wrdn Effect Atom Optimistic

What does Wrdn Effect Atom Optimistic do?

Detects hand-rolled optimistic-update plumbing in React code that should be using effect-atom's Atom.optimistic and Atom.optimisticFn instead. Wrdn Effect Atom Optimistic is an agent skill from UsefulSoftwareCo/executor.optimisticFn instead.

When should I use Wrdn Effect Atom Optimistic?

Wrdn Effect Atom Optimistic fits situations like: tasks that involve React components.

How do I install Wrdn Effect Atom Optimistic in Claude Code?

Run `npx skills add UsefulSoftwareCo/executor --skill wrdn-effect-atom-optimistic -a claude-code`. Or copy the skill folder (.agents/skills/wrdn-effect-atom-optimistic in UsefulSoftwareCo/executor) into .claude/skills/wrdn-effect-atom-optimistic in your project. Claude Code loads it when a task matches its description.

How do I install Wrdn Effect Atom Optimistic in Codex?

Run `npx skills add UsefulSoftwareCo/executor --skill wrdn-effect-atom-optimistic -a codex`. Or copy the skill folder (.agents/skills/wrdn-effect-atom-optimistic in UsefulSoftwareCo/executor) into .agents/skills/wrdn-effect-atom-optimistic in your project. Codex loads it when a task matches its description.

Can I use Wrdn Effect Atom Optimistic 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 UsefulSoftwareCo/executor --skill wrdn-effect-atom-optimistic -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/wrdn-effect-atom-optimistic, .gemini/skills/wrdn-effect-atom-optimistic, .github/skills/wrdn-effect-atom-optimistic and .opencode/skills/wrdn-effect-atom-optimistic in your project.

What does Wrdn Effect Atom Optimistic need to run?

SKILL.md names no scripts, command-line tools or credentials: Wrdn Effect Atom Optimistic is instructions for the agent only. Its frontmatter pre-approves these tools: Read, Grep, Glob, Bash.

Does Wrdn Effect Atom Optimistic access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Wrdn Effect Atom Optimistic safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Wrdn Effect Atom Optimistic use?

Wrdn Effect Atom Optimistic 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 Wrdn Effect Atom Optimistic use?

About 2.9k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Wrdn Effect Atom Optimistic?

Skills that share tags, products or a category with Wrdn Effect Atom Optimistic: Web Artifacts Builder (anthropics/skills, 180k stars), React Composition Patterns (vercel-labs/openreview, 1.7k stars), React Router Development (remix-run/react-router, 57k stars) and React UI State Patterns (ChrisWiles/claude-code-showcase, 6.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Wrdn Effect Atom Optimistic?

UsefulSoftwareCo (a GitHub organization) maintains it in UsefulSoftwareCo/executor, which has 4,085 GitHub stars. The repository holds 21 skills in this directory. The repository was last updated on October 7, 2026.

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