calendar
Calendar canvas for displaying events and picking meeting times. Use when showing calendar views or when users need to select…
Flight canvas for comparing flights and selecting seats. Use when users need to browse flight options and book seats.
$ npx -y skills add dvdsgl/claude-canvas --skill flight --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/flightContext preview
The summary Claude sees to decide when to auto-load this skill.
Flight canvas for comparing flights and selecting seats. Use when users need to browse flight options and book seats.
name: flight description: | Flight canvas for comparing flights and selecting seats. Use when users need to browse flight options and book seats.
Cyberpunk-themed flight comparison and seat selection interface.
Try asking Claude:
Interactive flight comparison and seat selection.
bun run src/cli.ts spawn flight --scenario booking --config '{
"title": "// FLIGHT_BOOKING_TERMINAL //",
"flights": [
{
"id": "ua123",
"airline": "United Airlines",
"flightNumber": "UA 123",
"origin": {
"code": "SFO",
"name": "San Francisco International",
"city": "San Francisco",
"timezone": "PST"
},
"destination": {
"code": "DEN",
"name": "Denver International",
"city": "Denver",
"timezone": "MST"
},
"departureTime": "2026-01-08T12:55:00-08:00",
"arrivalTime": "2026-01-08T16:37:00-07:00",
"duration": 162,
"price": 34500,
"currency": "USD",
"cabinClass": "economy",
"aircraft": "Boeing 737-800",
"stops": 0,
"seatmap": {
"rows": 30,
"seatsPerRow": ["A", "B", "C", "D", "E", "F"],
"aisleAfter": ["C"],
"unavailable": ["1A", "1B", "1C", "1D", "1E", "1F"],
"premium": ["2A", "2B", "2C", "2D", "2E", "2F"],
"occupied": ["3A", "3C", "4B", "5D"]
}
}
]
}'interface FlightConfig {
flights: Flight[];
title?: string; // Header title
showSeatmap?: boolean; // Enable seat selection
selectedFlightId?: string; // Pre-select a flight
}
interface Flight {
id: string;
airline: string; // e.g., "United Airlines"
flightNumber: string; // e.g., "UA 123"
origin: Airport;
destination: Airport;
departureTime: string; // ISO datetime
arrivalTime: string; // ISO datetime
duration: number; // Minutes
price: number; // Cents
currency: string; // e.g., "USD"
cabinClass: "economy" | "premium" | "business" | "first";
aircraft?: string; // e.g., "Boeing 737-800"
stops: number; // 0 = nonstop
seatmap?: Seatmap; // Optional seat selection
}
interface Airport {
code: string; // 3-letter code
name: string; // Full airport name
city: string;
timezone: string;
}
interface Seatmap {
rows: number;
seatsPerRow: string[]; // e.g., ["A", "B", "C", "D", "E", "F"]
aisleAfter: string[]; // e.g., ["C"] = aisle after seat C
unavailable: string[]; // Blocked seats
premium: string[]; // Extra legroom/exit row
occupied: string[]; // Already booked
}interface FlightResult {
selectedFlight: Flight;
selectedSeat?: string; // e.g., "12A"
}import { bookFlight } from "${CLAUDE_PLUGIN_ROOT}/src/api";
const result = await bookFlight({
flights: [
{
id: "ua123",
airline: "United Airlines",
flightNumber: "UA 123",
origin: { code: "SFO", name: "San Francisco", city: "SF", timezone: "PST" },
destination: { code: "DEN", name: "Denver", city: "Denver", timezone: "MST" },
departureTime: "2026-01-08T12:55:00-08:00",
arrivalTime: "2026-01-08T16:37:00-07:00",
duration: 162,
price: 34500,
currency: "USD",
cabinClass: "economy",
stops: 0,
seatmap: { ... }
}
]
});
if (result.success && result.data) {
console.log(`Booked: ${result.data.selectedFlight.flightNumber}`);
console.log(`Seat: ${result.data.selectedSeat}`);
}A TUI toolkit that gives Claude Code its own display. Spawn interactive terminal interfaces for emails, calendars, flight bookings, and more. Note: This is a proof of concept and is unsupported.
Calendar canvas for displaying events and picking meeting times. Use when showing calendar views or when users need to select…
**The primary skill for terminal TUI components.** Covers spawning, controlling, and interacting with terminal canvases. Use when…