webview-trpc-messaging Skill
Implements tRPC-based communication between VS Code extension host and React webviews. Use when creating new webview procedures (queries, mutations, subscriptions), adding a new webview router, wiring up a webview controller, using the tRPC client from React components, applying telemetry middleware (trpcToTelemetry), Published by microsoft in vscode-documentdb.
What is webview-trpc-messaging Skill?
Implements tRPC-based communication between VS Code extension host and React webviews. Use when creating new webview procedures (queries, mutations, subscriptions), adding a new webview router, wiring up a webview controller, using the tRPC client from React components, applying telemetry middleware (trpcToTelemetry), Published by microsoft in vscode-documentdb. This profile combines repository metadata with install, compatibility, and usage signals so developers can quickly decide whether it fits their agent workflow before opening the source repository.
Automated repository signals based on public metadata such as recency, license, installation evidence, and adoption. These are not a security audit or endorsement.
Key capabilities
- Includes SKILL.md support
- Reusable instructions support
- Developers using vscode-documentdb
Technical details
- Install or run with Copy skill directory
When to use webview-trpc-messaging Skill
- Use it for developers using vscode-documentdb.
Built with
Editorial notes
Source
- Creator: microsoft
- Repository: microsoft/vscode-documentdb
- Skill file: .github/skills/webview-trpc-messaging/SKILL.md
What it does
Implements tRPC-based communication between VS Code extension host and React webviews. Use when creating new webview procedures (queries, mutations, subscriptions), adding a new webview router, wiring up a webview controller, using the tRPC client from React components, applying telemetry middleware (trpcToTelemetry),
Skill instructions
Webview tRPC Messaging Type-safe RPC communication between the VS Code extension host (server) and React webviews (client) using tRPC. Architecture Overview React Webview (client) Extension Host (server) ───────────────────── ────────────────────── useTrpcClient() hook WebviewController └─ createTRPCClient └─ setupTrpc() └─ vscodeLink ──── postMessage ────► ├─ callerFactory(appRouter) (send/onReceive) ◄─────┤ └─ procedure(input) └─ abort/subscription.stop Key files (read as needed for implementation details): | File | Purpose | | ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | @microsoft/vscode-ext-webview (shared) | tRPC init via initWebviewTrpc, publicProcedure, router, BaseRouterContext | | @microsoft/vscode-ext-webview/host (telemetry) | telemetryMiddlewareBody, ProcedureLogger, TelemetryRunner (consumer builds publicProcedureWithTelemetry) |
Explore related resources
Frequently asked questions
What is webview-trpc-messaging?
webview-trpc-messaging is a open-source AI agent skill with Copy skill directory. Implements tRPC-based communication between VS Code extension host and React webviews.
Who is webview-trpc-messaging best for?
webview-trpc-messaging is best for reusing agent instructions, scripts, and references.
How do I install webview-trpc-messaging?
Install or run webview-trpc-messaging using Copy skill directory. Check webview-trpc-messaging for the latest setup command.
Is webview-trpc-messaging actively maintained?
webview-trpc-messaging may need a closer maintenance check before production use.
Auto-fetched from GitHub.
