skills.rest
openchamber
openchamberOFFICIAL
Explore all skills by this author →
GitHub

ui-api-decoupling

Enforces runtime-agnostic API access boundaries between shared UI code and OpenCode SDK or OpenChamber routes.

9.5k|1.0k|Updated Sep 11, 2025
Search Tags:#electron#Authentication#typeScript#VSCode extension#opencode sdk#api decoupling#runtime abstraction
One-click install
npx skills add https://github.com/openchamber/openchamber --skill ui-api-decoupling
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-api-decoupling
Source: https://github.com/openchamber/openchamber/tree/main/.agents/skills/ui-api-decoupling
Command: npx skills add https://github.com/openchamber/openchamber --skill ui-api-decoupling

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Shared UI code in OpenChamber runs across web, Electron, VS Code, hosted-mobile, and Capacitor runtimes, and hardcoding URLs, credentials, or one runtime's transport assumptions breaks portability and security. This Skill provides the decision rules and reference maps needed to route every API call through the correct abstraction.

Core Features & Use Cases

  • Call Classification: Routes official OpenCode endpoints through the @opencode-ai/sdk/v2 client, OpenChamber HTTP routes through runtimeFetch, and runtime-owned capabilities through the RuntimeAPIs contract.
  • Runtime Parity Guidance: Defines explicit behavior for web, Electron, VS Code, hosted-mobile, and Capacitor, including stable unsupported responses instead of silent fallbacks.
  • Auth and URL Safety: Enforces scoped short-lived URL tokens for browser-owned assets and forbids long-lived credentials in URLs.
  • Use Case: When adding a new shared UI feature that fetches data, use this Skill to decide whether the call belongs in the SDK client, runtimeFetch, or a new RuntimeAPIs capability, then implement it consistently across all runtimes.

Quick Start

Ask the agent to add a new OpenChamber API route and wire it into the shared UI following the ui-api-decoupling rules.

Frequently Asked Questions about ui-api-decoupling

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I call an OpenCode API from shared UI code?▼

Use the opencodeClient wrapper around the @opencode-ai/sdk/v2 client, preserving the SDK-generated method, body, headers, query, auth, and abort signal. Never bypass the SDK with a raw fetch to official OpenCode endpoints.

When should I use runtimeFetch versus the URL resolver?▼

Use runtimeFetch with route paths like '/api/config/settings' for ordinary HTTP calls. Use getRuntimeUrlResolver() only when the browser or a realtime transport itself consumes the URL, such as iframes, SSE, WebSockets, or authenticated image sources.

How do I add a new runtime capability for VS Code and web?▼

Extend the RuntimeAPIs interface in packages/ui/src/lib/api/types.ts, implement web behavior under packages/web/src/api, implement VS Code webview behavior with extension-host bridge handlers, and consume it via useRuntimeAPIs hooks.

Can I put an auth token in a browser asset URL?▼

No. Long-lived client bearer tokens must never appear in URLs. Browser-owned URLs use short-lived scoped oc_url_token values minted through runtime auth helpers, with routes added to a narrow allowlist.

What happens when a runtime does not support a feature?▼

Return a stable explicit unsupported response, normally a 501 JSON result, rather than a silent empty fallback. Every shared capability must define deliberate behavior for web, Electron, VS Code, hosted-mobile, and Capacitor.

Why must caches be keyed by runtime identity?▼

Session IDs, paths, and URLs can collide between local and remote runtimes after a runtime switch. Keying caches by runtime identity prevents stale endpoint, auth, or entity data from leaking across runtimes.

Related Skills

Explore More Software Engineering Skills→
nakano1122nakano1122
2

pnpm-monorepo

Set up and manage pnpm workspaces monorepos with Turborepo.

Community
Intermediate
BlocUnited-LLCBlocUnited-LLC
14

runtime-change

Review or implement Mozaiks OSS runtime and platform host changes.

Official
Advanced
corvo007corvo007
793

electron-dev

Define secure Electron IPC handlers and preload bridges for main and renderer processes.

Community
Advanced
EsdevenimentsEsdeveniments
2

api-layer-patterns

Implement a three-layer API pattern for Next.js apps with HMAC signing.

Official
Advanced