Spatial Context & Inspection Engine

See it.Mark it. Ship it.

Skopeo lets you visually annotate your real browser preview, resolves the source that owns supported rendered elements, and hands structured visual + source instructions to your AI coding agent.

Download stable VSIX Star on GitHub Latest release notes VS Code Marketplace Open VSX

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

First-class host adapter with live command discovery, update recovery, fast text submission, and verified image-capable handoff for Skopeo screenshots and Draw references.

Direct text + image handoff

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.

Registry or manual VSIX setup

Choose your install path. Set it up in minutes.

1. Install Skopeo

Use the registry your IDE supports, or install the same stable VSIX directly.

Visual Studio Code: install Skopeo from the VS Code Marketplace.
Open VSX-based IDEs: install Skopeo from Open VSX when that registry is available in your editor.
Manual install: download the stable VSIX above, then use Extensions → … → Install from VSIX… or the equivalent extension-install action in your VS Code-based IDE.
Reload the IDE if prompted. Skopeo will appear in the Activity Bar. code --install-extension skopeo-ui-latest.vsix

Registry installs use the IDE's normal extension update mechanism. Manual VSIX installs also get Skopeo's once-per-day stable update check; run Skopeo: Check for Updates anytime to check immediately. Registry availability can lag the direct GitHub stable VSIX. The command-line example above is for desktop VS Code; other compatible IDEs may use a different executable or install menu.

2. Start your first Skopeo session

Skopeo works against your running local development site.

Open and trust your web project folder in the IDE.
Start your normal dev server — for example Vite, Astro, Next.js, or another HTTP server on localhost.
Open the Skopeo Activity Bar view or run Skopeo: Start from the Command Palette.
Enter your local URL such as localhost:5173 and select Open in Browser.
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.
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.

Source-aware context

Each annotation can carry its selector, HTML/CSS evidence, exact or high-confidence source ownership, file/line location, component context, styles, state/hooks, related files, 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.

Contextual Notes + Source

Open an annotation beside its real target, edit long wrapping notes, jump into Draw or exact Source, and keep the draggable Source / Changes inspector nearby without covering the element you are reviewing.

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

Live preset previews support 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.

Source-aware visual context

Skopeo 0.1.33 keeps the native Chromium capture, isolated browser UI, and source-resolution hardening from 0.1.32 while adding optional privacy-safe product analytics. Analytics stay off until explicit user opt-in, respect the IDE-wide telemetry switch, collect only coarse product/reliability outcomes, retain events for 90 days, and never send source code, file paths, project names, page URLs, prompts, annotation text, screenshots, or captured page content.

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 or account. Optional anonymous product analytics stay disabled unless you explicitly opt in. Preview targets are limited to local HTTP loopback hosts; the runtime proxy rejects unexpected Host headers; browser runtime connections are session-authenticated; recognized token/secret-like URL parameters and DOM attributes are redacted from generated text context; and captured page content is marked as untrusted evidence for AI handoff. A user-level image-attachment opt-out is authoritative and cannot be re-enabled by workspace settings. Restricted Mode blocks workspace-controlled image attachment and terminal/custom command execution until the workspace is trusted. Source navigation rejects paths outside the selected project, while Code Intelligence cache/state stays outside the inspected repository. Component-library and release downloads do not intentionally upload your annotations, screenshots, DOM/CSS context, generated 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

Privacy

Analytics are opt-in. Your project is not the product.

Off until you choose

Skopeo analytics default to off. Enabling them requires an explicit user-level choice, and the IDE-wide telemetry setting must also allow telemetry. A checked-in workspace setting cannot opt you in.

Only coarse outcomes

When enabled, Skopeo counts events such as daily activation, preview start, annotation creation, source-resolution category, successful source navigation, confirmed AI handoff, screenshot capture mode and success, and opening the Changes review.

Content stays out

Analytics never include source code, file paths, project or repository names, preview/page URLs, prompts, annotation text, screenshots, image pixels, or captured page, DOM, HTML, CSS, or source content.

Bounded and deletable

A random installation ID is hashed by Skopeo's telemetry service with a server-only secret before database storage. Events are retained for 90 days. Run Skopeo: Delete Anonymous Usage Data to remove rows associated with the current anonymous installation and disable future Skopeo analytics. The shipped telemetry.json lists the complete event schema.

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 VS Code Marketplace Open VSX Latest release notes View project on GitHub