| 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
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"
Bare airship with no flags asks for the port, agent, and mode
interactively — it needs a terminal.
