Spatial Context & Inspection Engine

See it.Mark it. Ship it.

Skopeo lets you visually annotate your real browser preview, captures the DOM and CSS context behind each mark, then hands structured UI instructions to your AI coding agent.

Download stable VSIX Try 0.1.24 beta Star on GitHub Latest release notes VS Code Marketplace
Latest packaged VSIX · direct download
selector + computed CSS
annotation → AI context

IDE & stack support

Built for the tools you already use.

Visual Studio Code

Desktop VS Code 1.90+ with native Chat / Agent handoff when the built-in chat command is available.

Direct AI handoff

Antigravity

Native agent-panel handoff through Antigravity's supported command, using the same local Skopeo context.

Direct AI handoff

Kiro

User-tested with Skopeo's VSIX, Activity Bar panel, localhost browser workflow, annotations, and generated AI context.

User-tested compatible

Tested browser / framework coverage

React + Vite
Astro + Vite
Next.js dev
Vite HMR
HTML / HTTP

Skopeo operates against a running local HTTP page. These stacks are covered by the current automated compatibility suite; other VS Code-based IDEs and local web stacks may work when they expose compatible extension APIs and normal HTTP browser output.

Manual VSIX setup

Download it once. Set it up in minutes.

1. Install the VSIX

No Marketplace account or GitHub Release is required.

  1. Download Skopeo using the direct VSIX button above.
  2. In Visual Studio Code: open Extensions, select the … menu, choose Install from VSIX…, then select skopeo-ui-latest.vsix.
  3. In Antigravity, Kiro, or another compatible VS Code-based IDE: use its VSIX / extension install action and choose the same downloaded file.
  4. Reload the IDE if prompted. Skopeo will appear in the Activity Bar. code --install-extension skopeo-ui-latest.vsix
The command-line example is for desktop VS Code. Other VS Code-based IDEs may use a different executable or install menu. Manual VSIX installs also get Skopeo's once-per-day update check. Stable is the default; set visualAIBridge.updateChannel to beta to receive beta VSIX updates. Run Skopeo: Check for Updates anytime to check immediately. Marketplace installs continue to use the IDE's native extension auto-update.

2. Start your first Skopeo session

Skopeo works against your running local development site.

  1. Open and trust your web project folder in the IDE.
  2. Start your normal dev server — for example Vite, Astro, Next.js, or another HTTP server on localhost.
  3. Open the Skopeo Activity Bar view or run Skopeo: Start from the Command Palette.
  4. Enter your local URL such as localhost:5173 and select Open in Browser.
  5. Select Annotate, click an element, write the requested change, and use Notes → Draw to draw, paste visual references, or place UI components directly on the captured screenshot.
  6. Select Send to AI. Skopeo generates .ai-context/ locally and hands the short instruction to a supported IDE agent; if direct handoff is unavailable, the context remains valid and the prompt can be copied.

How it works

Point at the interface. Skopeo handles the context.

01 / INSPECT

Open your real preview

Open your running localhost app with Skopeo and inspect the interface in the browser you already use.

02 / ANNOTATE

Mark what should change

Click the exact element, write the change you want, then draw, paste a reference screenshot, or place draggable UI components over the captured viewport.

03 / HANDOFF

Send structured context

Skopeo packages selectors, HTML, CSS, screenshots, and your instructions into local AI-ready context.

Built for visual iteration

Less explaining. More precise UI changes.

Browser-first annotation

Annotate the actual running UI with floating browser controls instead of describing positions from memory.

DOM + CSS context

Each annotation carries a stable selector, sanitized HTML context, visible text, computed CSS, and viewport geometry.

Visual evidence

Viewport screenshots, numbered pins, notes, pasted references, drawing markup, and placed components give the coding agent spatial context alongside code context.

Build visual specifications

Draw with pen, arrows, shapes, text, and eraser tools; paste reference screenshots with crop, opacity, rotation, and layer controls; or browse Provider → Category → Component → Preset in a side panel beside the screenshot. Skopeo includes shadcn/ui with 61 component families and 365 presets plus Mantine with 20 families and 61 presets. Preview libraries can be installed, updated, repaired, or removed from Skopeo without adding preview packages to your project. Placed components can also be adjusted with appearance and contrast controls before saving the visual specification.

Agent handoff

Send the generated context to supported IDE agents, copy the handoff prompt, generate only, or trigger your own terminal command.

Floating Notes + Draw workflow

Manage active annotations directly in the browser, edit notes, open screenshot thumbnails, draw markup, and save visual intent without switching back to the IDE panel.

Route-aware sessions

Skopeo follows navigation inside modern single-page applications so annotations and generated context stay associated with the route you are actually viewing.

Managed component libraries

Browse components separately from library management. Skopeo can install, update, repair, or remove its preview libraries without adding those packages to the application you are inspecting.

Release + diagnostics tooling

Built-in update checks, direct VSIX downloads, structured bug reporting, and graceful fallbacks keep the workflow usable when an optional feature or direct agent handoff is unavailable.

Appearance without accidental AI intent

Preview Contrast can add Auto, light, dark, or outline visibility aids while editing without changing what the AI is asked to implement. Explicit Background, Text, Border, and Auto Contrast choices are real appearance overrides and are preserved in generated context.

Reliable real-component previews

Renderer 0.1.2 keeps real shadcn presets centered inside their preview canvas and uses a preview-safe Sidebar composition, preventing narrow Draw frames from collapsing Sidebar into a blank white/off-canvas view.

Live component interaction

Skopeo 0.1.24-beta.4 includes live preset previews plus Edit / Interact mode for shadcn/ui and Mantine components. Hover, click, type, switch tabs, open accordions and menus, use keyboard controls, and scroll inside the sandbox; press Esc to return to transforms. Temporary interaction state is reset before Save Drawing captures AI context.

Validated 0.1.24 beta

The current source line is validated by 267 / 267 automated tests across 60 test files, together with static checks and a production build.

Local-first by design

Your UI context stays on your machine.

Skopeo keeps the normal annotation workflow local, writes generated context inside your project, and does not require a hosted Skopeo backend, account, analytics service, or paid API. Component-library and release downloads do not include your annotations, screenshots, DOM/CSS context, or workspace source.

$ tree .ai-context .ai-context/ ├── PROMPT.md ├── context.json ├── annotation-001.html ├── annotation-001.png ├── annotation-001-markup.png └── annotation-001-reference-01.png
# generated locally inside your workspace

Try Skopeo

Give your coding agent the part screenshots usually miss.

Install the latest build, open your local project, annotate the running interface, and hand the exact visual context to your AI workflow.

Download stable VSIX Try beta Latest release notes View project on GitHub