メニュー
Wire @internal/web to durable-objects workers—workspace dep, alchemy.run.ts ReactRouter bindings, and env patterns. Use when adding `workspace:*` for a worker, editing apps/web/alchemy.run.ts, or debugging missing worker types after a new package.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Add or change a Durable Object worker package under durable-objects/ (Alchemy, env.d.ts, Hono on the DO). Use when scaffolding with turbo gen durable-object, editing durable-objects/*/alchemy.run.ts, workers/app.ts, or env.d.ts for a DO. Not for web app bindings or cross-worker rpc—see cf-web-alchemy-bindings and cf-worker-rpc-turbo.
Socka + Durable Object WebSockets—defineSocka, SockaWebSocketDO, useSockaSession, SSR-safe ws URLs, web worker forwarding, live-draft vs commit, canvas/whiteboard acceptance, and pre-merge checks. Use for realtime features, /api/ws, or @firtoz/socka.
workers/rpc.ts for WorkerRef or DO RPC types, package exports, cross-worker type imports without Turbo cycles, and root dev/destroy wiring. Use when adding WorkerRef, WorkerStub, workers/rpc.ts, turbo circular dependency warnings, or a new app missing from root bun run dev.
Alchemy + env files — repo-root `.env.local` (dev), `.env.staging` (staging / PR preview deploys), `.env.production` (prod / CI), optional per-package `.env.local`, and package-local Alchemy apps. Use when adding secrets or non-secret vars or debugging missing env in local dev. Never use a plain `.env` file. `.env.example` is human documentation only — no script reads it for all keys.
Component organization patterns for React applications. Use when creating components, organizing files, or structuring routes. ALWAYS keep 1 component per file and routes simple.
Guide for creating new Agent Skills when patterns emerge or improvements are needed. Use when encountering repeated patterns, making the same mistakes, discovering better approaches, or receiving user corrections. Covers keeping each skill small (one topic), when to split SKILL.md or add references/, and line-count heuristics.
| name | cf-web-alchemy-bindings |
| description | Wire @internal/web to durable-objects workers—workspace dep, alchemy.run.ts ReactRouter bindings, and env patterns. Use when adding `workspace:*` for a worker, editing apps/web/alchemy.run.ts, or debugging missing worker types after a new package. |
durable-objects/<pkg> worker or DO to the web app’s ReactRouter bindings.workspace:* worker dependency, fixing how env in workers/app.ts lines up with imports in alchemy.run.ts.Dependency — apps/web/package.json: "<package-name>": "workspace:*". bun install from repo root.
Import — apps/web/alchemy.run.ts: import { … } from "<package-name>/alchemy".
Bindings — Pass each binding into ReactRouter("…", { bindings: { …, MyDo: myWorker.bindings.MyDo, … } }) using the names your workers/app.ts reads from this.env (e.g. this.env.PingDo). D1: import mainDb from @internal/db/alchemy and set DB: mainDb (D1 is defined in packages/db/alchemy.run.ts, not inlined in web).
In route code — Prefer import { env } from "cloudflare:workers" for bindings, not React Router context (multiworker-gotchas, cf-workers-patterns.mdc).
If you are tempted to add include lines in tsconfig.cloudflare.json that point at another package’s workers/app.ts, don’t—multiple declare global { type Env } sources break the web Env. Types follow your normal imports; no need to list durable-objects/… in include.
Verify — bun run typegen and bun run typecheck from root.
workers/rpc.ts, Turbo dev / destroy, cross-worker types.