writing-opencode-plugins

작성자: sveltejs

OpenCode 플러그인, @opencode-ai/plugin, @opencode-ai/plugin/tui, 플러그인 훅, 커스텀 도구, TUI 라우트, 슬롯, 키맵, 패키징. 생성 시 사용...

npx skills add https://github.com/sveltejs/ai-tools --skill writing-opencode-plugins

Writing OpenCode Plugins

Use this skill to implement production-quality OpenCode plugins. Treat the repository's exported types and runtime as authoritative because plugin APIs are evolving and public docs may lag.

Start Here

  1. Decide which runtime owns the feature.
  2. Read the relevant public type before writing code.
  3. Find one focused in-repository example using the same API.
  4. Implement the smallest target-specific module.
  5. Test loading, behavior, failure, and cleanup in the owning package.
NeedPlugin targetImportConfiguration
Hooks, tools, auth, providers, model parameters, shell environmentServer@opencode-ai/pluginopencode.json or auto-discovered .opencode/plugins/*.{ts,js}
Commands, keybindings, routes, dialogs, slots, themes, notificationsTUI@opencode-ai/plugin/tuiExplicit tui.json plugin entry
BothTwo target-only entrypointsBoth imports in separate filesPackage exports ./server and ./tui

Never export server and tui from the same module. Do not use server event hooks as a substitute for interactive TUI APIs.

Verify The Current Contract

Read these files before implementing unfamiliar behavior:

  • packages/plugin/src/index.ts: authoritative server plugin and hook types.
  • packages/plugin/src/tool.ts: custom tool schema, context, permission, metadata, attachments, and result types.
  • packages/plugin/src/tui.ts: authoritative TUI API and module types.
  • packages/opencode/specs/tui-plugins.md: TUI loading, packaging, lifecycle, and API semantics.
  • packages/opencode/src/plugin/shared.ts: target validation, IDs, and entrypoint resolution.
  • packages/opencode/src/plugin/loader.ts: install, compatibility, and import behavior.

If these disagree with examples or website docs, follow exported types and runtime behavior, then update stale documentation when appropriate.

Choose A Module Shape

Prefer the explicit module object for new server plugins:

import type { Plugin, PluginModule } from '@opencode-ai/plugin';

const server: Plugin = async ({ client, directory }, options) => ({
	dispose: async () => {},
});

export default {
	id: 'acme.example',
	server,
} satisfies PluginModule & { id: string };

Legacy server-only local plugins may export a plugin function directly. In a legacy module every distinct named export is interpreted as a plugin, so do not export unrelated constants. Prefer a default module object for new code.

TUI plugins always use a default module object:

/** @jsxImportSource @opentui/solid */
import type { TuiPlugin, TuiPluginModule } from '@opencode-ai/plugin/tui';

const tui: TuiPlugin = async (api) => {
	api.ui.toast({ message: 'Plugin loaded' });
};

export default {
	id: 'acme.example-tui',
	tui,
} satisfies TuiPluginModule & { id: string };

File plugins require a stable, non-empty id. npm plugins may derive the ID from the package name, but an explicit namespaced ID makes state, diagnostics, and collision handling clearer.

Engineering Rules

  • Use TypeScript and satisfies against the public plugin type.
  • Parse and validate options; they arrive as unvalidated Record<string, unknown>.
  • Namespace plugin IDs, command IDs, route names, modes, slot names, and shared KV keys.
  • Use the directory supplied by the plugin or tool context, not process.cwd().
  • Honor AbortSignal for long-running or cancellable work.
  • Use client.app.log() for structured server logging instead of console.log.
  • Request permission before sensitive or consequential custom-tool work.
  • Keep notifications privacy-safe; do not expose prompts, secrets, paths, commands, or raw errors.
  • Register only needed hooks and UI resources. Avoid broad event subscriptions when a specific hook exists.
  • Make cleanup bounded, idempotent, and safe after partial initialization.
  • Do not depend on undocumented load order to resolve ownership conflicts.

Testing Workflow

Server plugin tests belong under packages/opencode/test/plugin/ or the closest owning subsystem. TUI runtime tests belong under packages/opencode/test/cli/tui/; component-level TUI tests may belong in packages/tui.

Test at least:

  • valid loading and target/entrypoint selection;
  • configured options and malformed options;
  • the observable behavior, not a duplicate of implementation logic;
  • abort, failure, and partial-initialization behavior;
  • cleanup or disposal;
  • duplicate IDs or registrations when relevant;
  • local file and npm packaging behavior when publishing.

Run tests from the package directory, never the repository root. Use bun typecheck from the owning package for type checking.

Review Checklist

  • The feature is in the correct server or TUI runtime.
  • Module shape and import path match the target.
  • Server and TUI entrypoints are separate.
  • IDs and persistent keys are stable and namespaced.
  • Options and external data are validated.
  • Hook output mutation preserves other plugins' changes.
  • Tools use context directory, permission, metadata, and abort correctly.
  • TUI keybindings are mode-gated unless intentionally global.
  • TUI resources and custom side effects are disposed.
  • Package exports, engines.opencode, and config target are correct.
  • Tests cover behavior and lifecycle.

References

sveltejs의 다른 스킬

performance-investigation
sveltejs
성능 회귀를 조사하고 최적화 기회를 찾습니다.
official
svelte-code-writer
sveltejs
Svelte 5 문서 조회 및 코드 분석을 위한 CLI 도구로, 내장된 자동 수정 기능을 제공합니다. 세 가지 핵심 명령어로 구성됩니다: list-sections는 사용 가능한 문서를 탐색하고, get-documentation은 특정 주제의 전체 문서를 가져오며, svelte-autofixer는 코드를 분석하고 수정 제안을 합니다. Autofixer는 --svelte-version 플래그를 통해 Svelte 4 및 5를 대상으로 지정할 수 있고, --async 옵션으로 비동기 모드를 지원합니다. 인라인 코드(이스케이프된 $ 문자 포함)와 파일 경로를 모두 분석 대상으로 받아들입니다.
official
svelte-core-bestpractices
sveltejs
빠르고, 견고하며, 현대적인 Svelte 코드를 작성하기 위한 지침입니다. Svelte 프로젝트에서 Svelte 컴포넌트를 작성, 수정 또는 분석하라는 요청을 받을 때마다 이 스킬을 로드하세요.
official
svelte-code-writer
sveltejs
Svelte 5 문서 조회 및 코드 분석을 위한 CLI 도구. Svelte 컴포넌트(.svelte) 또는 Svelte…를 생성, 편집 또는 분석할 때 반드시 사용해야 합니다.
official
svelte-core-bestpractices
sveltejs
Guidance on writing fast, robust, modern Svelte code. Load this skill whenever in a Svelte project and asked to write/edit or analyze a Svelte component or…
official
scenario-writer
sveltejs
사용자의 설명을 바탕으로 생성할 새 시나리오를 선택하고, ai-scenario-writer 하위 에이전트에 작성을 위임한 후 정확성을 검증합니다.
official
performance-investigation
sveltejs
성능 회귀를 조사하고 최적화 기회를 찾습니다
official
scenario-writer
sveltejs
사용자의 설명을 바탕으로 새로운 시나리오를 선택하고, ai-scenario-writer 하위 에이전트에게 작성을 위임한 후 정확성을 검증합니다.
official