AgentSkillsCN

canvas

**终端 TUI 组件的核心技能。** 覆盖终端画布的启动、控制与交互功能。 当您需要展示日历、文档或航班预订时,可使用此技能。

SKILL.md
--- frontmatter
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 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 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

Low-Level Tools (Full Control)

ToolPurpose
canvas_spawnSpawn a canvas in tmux split pane
canvas_envDetect terminal environment (tmux, mouse support)
canvas_updateSend configuration updates to active canvas
canvas_closeClose an active canvas
canvas_get_selectionGet text selection from document canvas
canvas_get_contentGet full content from document canvas

High-Level Tools (Convenience)

ToolPurpose
canvas_display_documentDisplay markdown document (read-only)
canvas_edit_documentOpen document for text selection
canvas_pick_meeting_timeCalendar picker for scheduling
canvas_display_calendarDisplay calendar events (read-only)

Quick Start

Check environment first:

code
Use canvas_env to verify tmux is available

Spawn a canvas:

code
Use canvas_spawn with kind="calendar", scenario="meeting-picker"

Or use high-level tools:

code
Use canvas_display_document with content="# Hello\n\nMarkdown here."

IPC Communication

Interactive canvases communicate via Unix domain sockets.

Canvas -> Controller:

typescript
{ 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:

typescript
{ 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

CLI Usage (Standalone)

The canvas CLI is also available for standalone use:

bash
# Run canvas in current terminal
bun run src/cli.ts show calendar

# Spawn canvas in new tmux split
bun run src/cli.ts spawn calendar --scenario meeting-picker --config '{...}'

Skills Reference

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