원클릭으로
flight
Flight canvas for comparing flights and selecting seats. Use when users need to browse flight options and book seats.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
메뉴
Flight canvas for comparing flights and selecting seats. Use when users need to browse flight options and book seats.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Calendar canvas for displaying events and picking meeting times. Use when showing calendar views or when users need to select available time slots.
**The primary skill for terminal TUI components.** Covers spawning, controlling, and interacting with terminal canvases. Use when displaying calendars, documents, or flight bookings.
Document canvas for displaying and editing markdown content. Use when showing documents, emails, or when users need to select text for editing.
| 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:
Use canvas_spawn with:
kind: "flight"
scenario: "booking"
config: {
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"]
}
}
]
}
booking (default)Interactive flight comparison and seat selection.
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
}
Up/Down: Navigate between flightsTab: Switch focus between flight list and seatmapLeft/Right/Up/Down (in seatmap): Move seat cursorSpace: Select/deselect seatEnter: Confirm selectionShift+Enter: Confirm immediately (skip countdown)q or Esc: Cancelinterface FlightResult {
selectedFlight: Flight;
selectedSeat?: string; // e.g., "12A"
}
[ ] - Available seat[X] - Occupied seat[/] - Unavailable/blocked[+] - Premium seat (extra legroom)[*] - Currently selectedThe canvas returns:
{
success: true,
data: {
selectedFlight: { /* full flight object */ },
selectedSeat: "12A"
}
}
// or
{
success: true,
cancelled: true // User pressed Esc/q
}
// or
{
success: false,
error: "Canvas requires a tmux session"
}