airship

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".
allowed-tools	Bash Read Write Edit Glob Grep
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 separately) — no Airship account, no telemetry. Works with Vite, Next, Remix, Rails, or any dev server that serves HTML over HTTP. MIT license.
metadata	{"tags":"airship, visual-editor, design-canvas, dev-server, claude-code, codex, opencode, cli, frontend-tooling, ui-editing","platforms":"Claude, ChatGPT, Gemini, Codex","version":"1.0","source":"https://github.com/0xnyn/airship"}

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.