// **The primary skill for terminal TUI components.** Covers spawning, controlling, and interacting with terminal canvases. Use when displaying calendars, documents, or flight bookings.
Calendar canvas for displaying events. Use when showing calendar views.
Document canvas for displaying and editing markdown content. Use when showing documents or when users need to edit text.
Flight canvas for comparing flights and selecting seats. Use when users need to browse flight options and book seats.
| 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. |
Start here when using terminal canvases. This skill covers the overall workflow, canvas types, and IPC communication.
Try asking Claude things like:
Calendar:
Document:
Flight:
Canvas provides interactive terminal displays (TUIs) that Claude can spawn and control. Each canvas type supports multiple scenarios for different interaction modes.
| Canvas | Purpose | Scenarios |
|---|---|---|
calendar | Display calendars, pick meeting times | display |
document | View/edit markdown documents | display, edit |
flight | Flight comparison and seat selection | booking |
cd ${CLAUDE_PLUGIN_ROOT}
# Run canvas in current terminal
bun run src/cli.ts show calendar
# Spawn canvas in new split pane
bun run src/cli.ts spawn calendar --config '{...}'
Always use spawn for interactive scenarios - this opens the canvas in a split pane while keeping the conversation terminal available.
bun run src/cli.ts spawn [kind] --scenario [name] --config '[json]'
Parameters:
kind: Canvas type (calendar, document, flight)--scenario: Interaction mode (e.g., display, edit)--config: JSON configuration for the canvas--id: Optional canvas instance ID for IPCInteractive canvases communicate via Named Pipes (Windows) or Unix Sockets (Unix).
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
For programmatic use, import the API module:
import { spawnCanvasWithIPC } from "${CLAUDE_PLUGIN_ROOT}/src/api";
const result = await spawnCanvasWithIPC("calendar", "display", {
events: [...]
});
if (result.success && result.data) {
console.log(`Selected: ${result.data.startTime}`);
}
| Skill | Purpose |
|---|---|
calendar | Calendar display details |
document | Document rendering details |
flight | Flight comparison details |