Skip to content
OpenSmartRoute
Skillv1.0.0

airship

Drive Airship (`@airshiplabs/cli`), a CLI that puts a visual, pannable design canvas in front of a running dev server so an engineer can click an element, describe a change, and have Claude Code, Code

by akillness(0) 0 installs
Free
Sign in to install

Free account. Installing gives you the manifest plus copy-paste snippets.

See reviews

About

Imported from akillness/jeo-skills (.agent-skills/airship/SKILL.md). Install upstream with npx skills add akillness/jeo-skills --skill airship. Copyright stays with the author.

Airship

Airship is a CLI-only visual editor that runs as a reverse proxy in front of an already-running dev server (Vite, Next, Remix, Rails, or anything serving HTML). It renders live device frames on an infinite canvas; selecting an element and describing a change hands the file/line plus the prompt to Claude Code, Codex, or OpenCode, which edits the real source file. Nothing is added to the project's dependencies, config, or bundle, and every edit is undoable.

When to use this skill

  • Launching the visual editor against a local dev server (npx @airshiplabs/cli --target <port> or the installed airship binary)
  • Choosing or comparing coding agents (Claude Code, Codex, OpenCode) for interactive, click-to-edit UI changes
  • Sandboxing agent edits with --safe, or picking --agent codex --safe for a real OS-level sandbox
  • Scaffolding a persistent airship.config.json (airship init) so flags stop needing to be repeated
  • Diagnosing a broken install/auth/dev-server setup with airship doctor
  • Deciding between canvas (multi-device frames) and inline (overlay on one page) editor modes

When not to use this skill

  • The user wants a standalone design tool disconnected from real source (Figma-style mockups) — Airship always writes to the actual codebase, not a separate design file
  • A headless/CI code edit with no visual-selection step → drive the agent (Claude Code/Codex/OpenCode) directly instead of routing through Airship
  • Browser automation or end-to-end testing → use a browser/testing skill; Airship is an editing tool, not a test runner

Instructions

Step 1: Start the dev server, then point Airship at it

pnpm dev                       # e.g. http://localhost:3000
npx @airshiplabs/cli --target 3000

No plugin or config changes required. Or install once and reuse the binary:

npm i -g @airshiplabs/cli
airship --target 3000

Step 2: Or let Airship start (and stop) the dev server itself

airship --exec "pnpm dev"      # reads the port from package.json when --target is omitted

Bare airship with no flags asks for the port, agent, and mode interactively — it needs a terminal.

Step 3: Pick a coding agent and, if it matters, a sandbox

airship --target 3000 --agent codex --safe
  • claude (default), codex, opencode differ on cost display, --effort/--max-turns support, and undo (codex/opencode need the project to be a git repo for undo).
  • --safe is not equally strong on all three: only codex gets a real OS sandbox; claude/opencode get a pre-flight command/edit check, not a hard wall. See references/commands.md.

Step 4: Check the environment before troubleshooting further

airship doctor --agent claude

Reports ok/warn/fail for node, airship, config, git repo, overlay bundle, each agent, and the dev server; exits 1 on failure so airship doctor && airship is a safe pre-flight.

Step 5: Persist settings instead of repeating flags

airship init            # writes airship.config.json (or an "airship" key in package.json)

Resolution order: CLI flags → AIRSHIP_* env vars → airship.config.json → defaults. Every flag has an AIRSHIP_<FLAG_NAME> env var (e.g. AIRSHIP_TARGET, AIRSHIP_AGENT, AIRSHIP_SAFE).

Step 6: Choose canvas vs inline mode

airship --target 3000 --mode inline

canvas (default) shows one live frame per device size on a pannable canvas; inline overlays the editor on the running page itself. Switchable at runtime from the bottom bar, or per-URL with ?__airship=inline / ?__airship=shell.

Best practices

  1. --safe is only a real sandbox with --agent codex — treat claude/opencode --safe as a checked guardrail, not an isolation boundary; only the OS-level codex sandbox blocks writes outside the project and cuts network access.
  2. Run airship doctor before escalating to --debug — most launch failures are covered by its ordered checks (node → airship → config → git → overlay → agent → dev server).
  3. Require Git before trusting undo on codex/opencode — their undo reads the previous file version from Git; claude's undo does not need a repo.
  4. Set --cwd explicitly in monorepos — it must match the folder the dev server treats as its root (e.g. --cwd apps/web), or file paths reported by the dev server won't resolve to real files.
  5. Quote non-boolean --codex-config values — bare true/false or numeric-looking values are sent as TOML booleans/numbers; quote (k='"true"') to keep a string a string.
  6. Prefer --json for scripted/automation contexts — it disables colour and the launch banner and keeps stdout machine-readable, while banners/warnings/errors still go to stderr.

References

Examples

Example 1: Point Airship at a running Next.js dev server with Claude Code

pnpm dev                                   # http://localhost:3000
npx @airshiplabs/cli --target 3000

Example 2: Use Codex with a real sandbox and auto-commit each accepted edit

airship --exec "pnpm dev" --agent codex --safe --commit

Example 3: Pre-flight check before onboarding a new machine

airship doctor --agent opencode

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml
targets:
  - https://api.opensmartroute.ai/api/v1/registry/akillness-jeo-skills-airship/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

akillness-jeo-skills-airship.ocm.jsonjson
{
  "ocm": "1",
  "id": "akillness-jeo-skills-airship",
  "kind": "skill",
  "name": "airship",
  "description": "Drive Airship (`@airshiplabs/cli`), a CLI that puts a visual, pannable design canvas in front of a running dev server so an engineer can click an element, describe a change, and have Claude Code, Codex, or OpenCode edit the underlying source file directly — no plugin, no build config, nothing added to the project. Use when the user wants to launch a visual editor over a local dev server (`npx @airshiplabs/cli --target <port>`), pick or compare coding agents (`--agent claude|codex|opencode`) for live UI edits, sandbox agent edits with `--safe`, scaffold an `airship.config.json` (`airship init`), or diagnose a broken setup (`airship doctor`). Triggers on: \"airship\", \"@airshiplabs/cli\", \"visual editor for my codebase\", \"click to edit UI\", \"design canvas over dev server\", \"airship doctor\", \"airship init\", \"pair Claude Code with a visual editor on localhost\".",
  "publisher": "akillness",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "coding"
    ],
    "tags": [
      "skill-md",
      "airship",
      "visual-editor",
      "design-canvas",
      "dev-server",
      "claude-code",
      "codex",
      "opencode",
      "cli",
      "frontend-tooling"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Drive Airship (`@airshiplabs/cli`), a CLI that puts a visual, pannable design canvas in front of a running dev server so an engineer can click an element, describe a change, and have Claude Code, Codex, or OpenCode edit the underlying source file directly — no plugin, no build config, nothing added to the project. Use when the user wants to launch a visual editor over a local dev server (`npx @airshiplabs/cli --target <port>`), pick or compare coding agents (`--agent claude|codex|opencode`) for live UI edits, sandbox agent edits with `--safe`, scaffold an `airship.config.json` (`airship init`), or diagnose a broken setup (`airship doctor`). Triggers on: \"airship\", \"@airshiplabs/cli\", \"visual editor for my codebase\", \"click to edit UI\", \"design canvas over dev server\", \"airship doctor\", \"airship init\", \"pair Claude Code with a visual editor on localhost\"."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/akillness/jeo-skills",
      "path": ".agent-skills/airship/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/akillness/jeo-skills/blob/HEAD/.agent-skills/airship/SKILL.md",
      "key": "akillness/jeo-skills/.agent-skills/airship/SKILL.md"
    },
    "compatibility": "Node.js >=22.13.0. `npx @airshiplabs/cli` for a one-off run, or `npm i -g @airshiplabs/cli` for the persistent `airship` binary. Reuses existing auth for Claude Code, Codex, or OpenCode (installed sep",
    "allowed_tools": [
      "Bash",
      "Read",
      "Write",
      "Edit",
      "Glob",
      "Grep"
    ]
  },
  "instructions": "# Airship\n\nAirship is a CLI-only visual editor that runs as a reverse proxy in front of\nan already-running dev server (Vite, Next, Remix, Rails, or anything serving\nHTML). It renders live device frames on an infinite canvas; selecting an\nelement and describing a change hands the file/line plus the prompt to\nClaude Code, Codex, or OpenCode, which edits the real source file. Nothing\nis added to the project's dependencies, config, or bundle, and every edit is\nundoable.\n\n## When to use this skill\n\n- Launching the visual editor against a local dev server (`npx\n  @airshiplabs/cli --target <port>` or",
  "cost": {
    "context_tokens": 1412
  }
}

Fetch it by URL: GET /api/v1/registry/akillness-jeo-skills-airship/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.