Webページの移動やフォーム入力、クリックをエージェントに任せ、情報抽出や画面保存、操作前後の比較まで行います。ブラウザ作業の自動化やWebアプリの確認に使えるスキル。
- フォーム入力やクリックを自動化したいとき
- Webページのテキスト抽出
- ページのスクリーンショット・PDF保存
Yjsの共同編集データをHTTPで同期する実装を支援し、更新履歴の永続化や参加状況の共有、接続管理と終了時の後片付けまで、設定方法と注意点を案内するスキル。
Yjs CRDT sync over durable streams with @durable-streams/y-durable-streams. DurableStreamsProvider setup, document stream and awareness stream config, transport modes (SSE vs long-poll), provider lifecycle (connect, disconnect, destroy), synced/status/error events, lib0 VarUint8Array framing, awareness heartbeat. Requires yjs, y-protocols, lib0 peer dependencies. Load when integrating Yjs collaborative editing with durable streams.
実行スコア 未検証
インストール方法を見るYjsを使った共同編集に、HTTP経由のデータ同期を組み込む実装を支援します。DurableStreamsProviderで文書更新用のストリームを設定し、必要に応じて参加者の状態を共有するawareness用のストリームも追加します。更新履歴による永続化、同期・接続状態のイベント、動的な認証ヘッダー、接続の開始と終了を扱います。
Yjsの文書をdurable streamsで同期したい開発者向けです。通信にはSSEまたはlong-pollを使うため、WebSocket基盤を用意せずに構成できます。文書だけを同期する場合にも、参加状況を併せて共有する場合にも使えます。
対象は@durable-streams/y-durable-streams v0.2.1です。yjs、y-protocols、lib0も必要です。文書はバイナリ形式のため、Content-Typeは既定のapplication/octet-streamを使います。終了時はdestroy()でリスナーやタイマーも解放します。
この紹介文は、公開されている SKILL.md をもとに AI(OpenAI Codex)が作成しました。正確な仕様は下の原文を確認してください。
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Sync Yjs documents over HTTP durable streams. No WebSocket infrastructure needed — uses standard HTTP with SSE or long-poll transport. Built-in persistence through stream history, presence support via awareness streams.
import { DurableStreamsProvider } from "@durable-streams/y-durable-streams"
import * as Y from "yjs"
import { Awareness } from "y-protocols/awareness"
const doc = new Y.Doc()
const awareness = new Awareness(doc)
const provider = new DurableStreamsProvider({
doc,
documentStream: {
url: "https://your-server.com/v1/stream/doc-updates",
transport: "sse",
},
awarenessStream: {
url: "https://your-server.com/v1/stream/doc-awareness",
protocol: awareness,
transport: "sse",
},
})
provider.on("synced", (synced) => {
console.log("Synced:", synced)
})
provider.on("status", (status) => {
console.log("Status:", status) // "disconnected" | "connecting" | "connected"
})
import { DurableStreamsProvider } from "@durable-streams/y-durable-streams"
import * as Y from "yjs"
const doc = new Y.Doc()
const provider = new DurableStreamsProvider({
doc,
documentStream: {
url: "https://your-server.com/v1/stream/my-doc",
transport: "sse",
},
})
const provider = new DurableStreamsProvider({
doc,
documentStream: { url, transport: "sse" },
connect: false, // Don't auto-connect
})
// Connect when ready
provider.connect()
// Temporarily disconnect (can reconnect later)
provider.disconnect()
// Permanently destroy (cleanup all listeners and timers)
provider.destroy()
const provider = new DurableStreamsProvider({
doc,
documentStream: {
url: "https://your-server.com/v1/stream/my-doc",
transport: "sse",
headers: {
Authorization: () => `Bearer ${getAccessToken()}`,
},
},
})
Wrong:
npm install @durable-streams/y-durable-streams
Correct:
npm install @durable-streams/y-durable-streams yjs y-protocols lib0
yjs, y-protocols, and lib0 are peer dependencies. Missing them causes import errors at runtime.
Source: packages/y-durable-streams/package.json peerDependencies
Wrong:
documentStream: {
url: "https://server.com/v1/stream/doc-1",
transport: "sse",
contentType: "application/json",
}
Correct:
documentStream: {
url: "https://server.com/v1/stream/doc-1",
transport: "sse",
// Content type defaults to application/octet-stream (binary)
}
Yjs documents use binary encoding (lib0 VarUint8Array). The stream must use application/octet-stream, not application/json. The provider handles this automatically — don't override the content type.
Source: packages/y-durable-streams/src/y-durable-streams.ts BINARY_CONTENT_TYPE
Wrong:
useEffect(() => {
const provider = new DurableStreamsProvider({ doc, documentStream: config })
return () => provider.disconnect() // Only disconnects, doesn't clean up!
}, [])
Correct:
useEffect(() => {
const provider = new DurableStreamsProvider({ doc, documentStream: config })
return () => provider.destroy() // Full cleanup
}, [])
disconnect() only closes the connection — destroy() also removes doc/awareness listeners and clears the 15-second awareness heartbeat interval.
Source: packages/y-durable-streams/README.md API methods
Targets @durable-streams/y-durable-streams v0.2.1.
まだレビューはありません。使ってみた感想をお寄せください。
ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。
まだコメントはありません。最初のコメントを書いてみませんか。
Webページの移動やフォーム入力、クリックをエージェントに任せ、情報抽出や画面保存、操作前後の比較まで行います。ブラウザ作業の自動化やWebアプリの確認に使えるスキル。
曖昧で読みにくい英文を、語の意味をそろえた短い能動態の文へ書き直すスキル。指示文やツール説明を見直し、修正理由と変更前後を表で確認できます。
GitHubのPRの状態、レビューの会話、CI失敗のログを専用スクリプトで収集し、変更の確認状況や未解決の指摘、失敗したジョブとステップを調べるスキル。
リリース時に対象パッケージの基準バージョンを更新し、関連ファイルの同期と生成結果を検証して、コミットからPRブランチへのプッシュまで進めるスキル。
Git のコミット間や作業中のコードで、関数の呼び出し構造の違いを確認します。呼び出しツリーの表示や、指定した関数へ至る経路の調査にも使えます。
ターミナルからブラウザのクリックや入力、ページ移動を自動化し、通信やエラー、表示速度も調べられる、Chrome DevToolsのCLI操作を支援するスキル。