Skip to content
CLI Tools
Skill

/flight

Flight canvas for comparing flights and selecting seats. Use when users need to browse flight options and book seats.

BOOST
From plugin
claude-canvas
1.5k4 skills1 command
Install
$ npx -y skills add dvdsgl/claude-canvas --skill flight --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/flight

Context 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.

SKILL.md

flight.SKILL.md
name: flight
description: |
  Flight canvas for comparing flights and selecting seats.
  Use when users need to browse flight options and book seats.

Flight Canvas

Cyberpunk-themed flight comparison and seat selection interface.

Example Prompts

Try asking Claude:

  • "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"

Scenarios

`booking` (default)

Interactive flight comparison and seat selection.

  • Shows flight options with airline, times, duration, and price
  • Interactive seat map for seat selection
  • Keyboard navigation between flights and seats
  • Returns selected flight and seat via IPC
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"]
      }
    }
  ]
}'

Configuration

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
}

Controls

  • `↑/↓`: Navigate between flights
  • `Tab`: Switch focus between flight list and seatmap
  • `←/→/↑/↓` (in seatmap): Move seat cursor
  • `Space`: Select/deselect seat
  • `Enter`: Confirm selection
  • `Shift+Enter`: Confirm immediately (skip countdown)
  • `q` or `Esc`: Cancel

Selection Result

interface FlightResult {
  selectedFlight: Flight;
  selectedSeat?: string;    // e.g., "12A"
}

Seat Legend

  • `[ ]` - Available seat
  • `[X]` - Occupied seat
  • `[/]` - Unavailable/blocked
  • `[+]` - Premium seat (extra legroom)
  • `[*]` - Currently selected

API Usage

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}`);
}
Read more
Ships withclaude-canvas

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.

Get the whole plugin
Stats
1,515
Stars
138
Forks
Quiet
Maintenance
TypeScript
Language
MIT
License
9mo ago
Last commit
9mo ago
Created
10d ago
Added

Repo: dvdsgl/claude-canvas

Other skills on claude-canvas.

canvas
Skill

canvas

**The primary skill for terminal TUI components.** Covers spawning, controlling, and interacting with terminal canvases. Use when…