live-pair

Iterates on VS Code extension UI changes through a live feedback loop with screenshots.

9.9k|1.8k|Updated Aug 8, 2016
One-click install
npx skills add https://github.com/gitkraken/vscode-gitlens --skill live-pair
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: live-pair
Source: https://github.com/gitkraken/vscode-gitlens/tree/main/.claude/skills/live-pair
Command: npx skills add https://github.com/gitkraken/vscode-gitlens --skill live-pair

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Iterating on UI-heavy features in a VS Code extension normally requires slow manual cycles of editing, rebuilding, relaunching, and visually checking results. This Skill runs a tight pair-programming loop where the user watches a live extension instance and the agent applies each requested change, rebuilds, refreshes, and returns a screenshot.

Core Features & Use Cases

  • Interactive iteration loop: Launch VS Code, open the target view, apply one batch of edits per user message, rebuild, refresh the webview, and return a screenshot every round.
  • Rebuild-scope auto-detection: Infers whether a change needs a webview-only rebuild or a full extension-host reload based on which files were edited.
  • Structural-bug flagging: Distinguishes visual tweaks from correctness issues and offers to delegate structural problems to a systematic audit skill instead of silently patching them.
  • Use Case: Redesigning a panel in the GitLens home view — the user says "move the Share button and tighten the empty-state copy," and the agent edits the code, rebuilds the webview, refreshes, and shows the result for the next round of feedback.

Quick Start

Ask the agent to start a live-pair session on a specific view, for example: run /live-pair on the commit details panel so we can iterate on its layout together.

Frequently Asked Questions about live-pair

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I iterate on a VS Code extension UI with live feedback?

Launch the extension through the vscode-inspector MCP, open the target view, then apply each user-requested change, rebuild, refresh the webview, and capture a screenshot. Repeat this loop until the user confirms the work is done.

What is the difference between live-pair and live-exercise?

live-pair is user-driven: one message in produces one change and one screenshot, with no findings document. live-exercise is agent-driven, running systematic sweeps with parallel dispatch and producing findings or decisions as output.

When should I rebuild the extension host versus just the webview?

Use a webview-only rebuild and the view's refresh command when only webview files changed, since it is much faster. Changes to contributions.json, commands, keybindings, or package.json require a full build and extension-host reload.

What happens if the build fails during a pairing session?

Iteration stops immediately. The agent reads the build error, shows a one-line diagnosis and a proposed fix direction, then waits for user guidance before editing further. The loop resumes only after the build passes again.

When should I not use an interactive pairing workflow?

Avoid it for systematic feature audits, performance measurement, or code-only reviews with no running extension. Those scenarios fit audit, perf, or static review skills that use batch dispatch instead of a conversational loop.