スキル一覧に戻る
mailshieldai

canvas

by mailshieldai

Interactive terminal canvases for OpenCode - calendars, documents, flight booking

11🍴 1📅 2026年1月22日
GitHubで見るManusで実行

SKILL.md


name: canvas description: | The primary skill for terminal TUI components. Covers spawning, controlling, and interacting with terminal canvases. Use when displaying calendars, documents, or flight bookings.

Canvas TUI Toolkit

Start here when using terminal canvases. This skill covers the overall workflow, canvas types, and IPC communication.

Example Prompts

Try asking Claude things like:

Calendar:

  • "Schedule a meeting with the team next week"
  • "Find a time when Alice and Bob are both free"

Document:

  • "Draft an email to the sales team about the new feature"
  • "Help me edit this document - let me select what to change"

Flight:

  • "Find flights from SFO to Denver next Friday"
  • "Book me a window seat on the morning flight"

Overview

Canvas provides interactive terminal displays (TUIs) that can be spawned and controlled via the OpenCode tools. Each canvas type supports multiple scenarios for different interaction modes.

Available Canvas Types

CanvasPurposeScenarios
calendarDisplay calendars, pick meeting timesdisplay, meeting-picker
documentView/edit markdown documentsdisplay, edit, email-preview
flightFlight comparison and seat selectionbooking

OpenCode Tools

canvas_spawn

Spawn a canvas in a tmux split pane.

canvas_spawn({
  kind: "calendar",
  scenario: "meeting-picker",
  config: JSON.stringify({
    calendars: [
      { name: "Alice", color: "blue", events: [...] },
      { name: "Bob", color: "green", events: [...] }
    ],
    slotGranularity: 30
  })
})
// Returns: { success: true, id: "calendar-1234567890-abc123", ... }

canvas_update

Send updated config to a running canvas.

canvas_update({
  id: "calendar-1234567890-abc123",
  config: JSON.stringify({ events: [...] })
})

canvas_selection

Get text selection from a document canvas.

canvas_selection({ id: "document-1234567890-abc123" })
// Returns: { success: true, selection: { selectedText: "...", startOffset: 0, endOffset: 10 } }

canvas_content

Get full content from a document canvas.

canvas_content({ id: "document-1234567890-abc123" })
// Returns: { success: true, content: { content: "...", cursorPosition: 0 } }

canvas_close

Close a running canvas.

canvas_close({ id: "calendar-1234567890-abc123" })

IPC Communication

Interactive canvases communicate via Unix domain sockets.

Canvas -> Controller:

{ type: "ready", scenario }        // Canvas is ready
{ type: "selected", data }         // User made a selection
{ type: "cancelled", reason? }     // User cancelled
{ type: "error", message }         // Error occurred

Controller -> Canvas:

{ type: "update", config }  // Update canvas configuration
{ type: "close" }           // Request canvas to close
{ type: "ping" }            // Health check

Requirements

  • tmux: Canvas spawning requires a tmux session
  • Terminal with mouse support: For click-based interactions
  • Bun: Runtime for executing canvas commands

Skills Reference

SkillPurpose
calendarCalendar display and meeting picker details
documentDocument rendering and text selection
flightFlight comparison and seat map details

スコア

総合スコア

60/100

リポジトリの品質指標に基づく評価

SKILL.md

SKILL.mdファイルが含まれている

+20
LICENSE

ライセンスが設定されている

+10
説明文

100文字以上の説明がある

0/10
人気

GitHub Stars 100以上

0/15
最近の活動

3ヶ月以内に更新がある

0/10
フォーク

10回以上フォークされている

0/5
Issue管理

オープンIssueが50未満

+5
言語

プログラミング言語が設定されている

+5
タグ

1つ以上のタグが設定されている

0/5

レビュー

💬

レビュー機能は近日公開予定です