The Canvas TUI Toolkit is a sophisticated Claude skill designed to bridge the gap between text-based AI interactions and interactive graphical interfaces within the terminal. It enables agents to spawn, control, and manage Terminal User Interface (TUI) components—such as calendars, document editors, and flight booking maps—using tmux and IPC communication. This toolkit is essential for developers building advanced agentic workflows that require structured user input and rich data visualization directly in a command-line environment.

When should I use canvas?

canvas is useful in the following scenarios: • Interactive Scheduling: Spawning a calendar TUI to help users visualize availability and pick meeting times through a graphical terminal interface. • Collaborative Document Editing: Providing a dedicated canvas for drafting, editing, and previewing markdown documents with support for user-driven text selection. • Travel and Booking Management: Displaying interactive flight comparisons and seat maps, allowing users to make selections within a structured terminal layout. • Terminal Workflow Orchestration: Utilizing tmux split-panes to maintain an active conversation while simultaneously interacting with a live data canvas via Unix domain sockets.

name	canvas
description	\|

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 Claude can spawn and control. Each canvas type supports multiple scenarios for different interaction modes.

Available Canvas Types

Canvas	Purpose	Scenarios
`calendar`	Display calendars, pick meeting times	`display`, `meeting-picker`
`document`	View/edit markdown documents	`display`, `edit`, `email-preview`
`flight`	Flight comparison and seat selection	`booking`

Quick Start

cd ${CLAUDE_PLUGIN_ROOT}

# 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 '{...}'

Spawning Canvases

Always use spawn for interactive scenarios - this opens the canvas in a tmux 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, meeting-picker, edit)
--config: JSON configuration for the canvas
--id: Optional canvas instance ID for IPC

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

High-Level API

For programmatic use, import the API module:

import { pickMeetingTime, editDocument, bookFlight } from "${CLAUDE_PLUGIN_ROOT}/src/api";

// Spawn meeting picker and wait for selection
const result = await pickMeetingTime({
  calendars: [...],
  slotGranularity: 30,
});

if (result.success && result.data) {
  console.log(`Selected: ${result.data.startTime}`);
}

Requirements

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

Skills Reference

Skill	Purpose
`calendar`	Calendar display and meeting picker details
`document`	Document rendering and text selection
`flight`	Flight comparison and seat map details

canvas

When & Why to Use This Skill

Use Cases