tui-canvas: Skill for OpenCode

Flight Canvas

Cyberpunk-themed flight comparison and seat selection interface.

Example Prompts

• "Find flights from San Francisco to Denver on January 15th"
• "Book me a window seat on the cheapest nonstop to NYC"
• "Compare morning flights from LAX to Seattle next Monday"
• "I need a business class seat to Chicago with extra legroom"
• "Show me United flights to Boston under $300"

Scenario

booking (default)

Interactive flight comparison and seat selection.

• Shows flight options with airline, times, duration, and price
• Interactive seat map for seat selection (when seatmap provided)
• Keyboard navigation between flights and seats
• Cyberpunk aesthetic with neon colors

Tool Usage

canvas_flight({
  config: JSON.stringify({
    title: "// SFO -> DEN //",
    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-15T08:00:00",
        arrivalTime: "2026-01-15T11:30:00",
        duration: 150,
        price: 29900,  // cents ($299.00)
        currency: "USD",
        cabinClass: "economy",
        aircraft: "Boeing 737-800",
        stops: 0
      }
    ]
  })
})

Configuration Types

interface FlightConfig {
  flights: Flight[];
  title?: string;           // Header title (cyberpunk style)
  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 (29900 = $299.00)
  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 (SFO, JFK, etc.)
  name: string;             // Full airport name
  city: string;
  timezone: string;         // PST, EST, etc.
}

interface Seatmap {
  rows: number;             // Total rows
  seatsPerRow: string[];    // e.g., ["A", "B", "C", "D", "E", "F"]
  aisleAfter: string[];     // e.g., ["C"] = aisle after seat C
  unavailable: string[];    // Blocked seats (e.g., ["1A", "1B"])
  premium: string[];        // Extra legroom/exit row seats
  occupied: string[];       // Already booked seats
}