메뉴
Use the Lens built-in browser to inspect a running web application. Trigger when the request involves previewing a page, taking screenshots, reading DOM, checking console errors, picking elements to locate source code, or comparing rendered output to a design spec.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Ship the full current in-progress work as a PR in one pass. If already running inside a workspace-linked `git worktree` (for example under `.stave/workspaces/*`), reuse that same worktree in place. Otherwise move the dirty state into a dedicated temporary worktree, commit with a Conventional Commit message, push, open a GitHub pull request, and clean up the temporary worktree unless the user asks to keep it. Use for prompts like "worktree 만들어서 PR", "현재 작업 PR로 올려줘", or "spin this dirty tree into a PR branch".
Explore an unfamiliar area of the Stave codebase quickly. Use when the request asks for workspace structure, architecture overview, relevant files, entrypoints, "where should I look first", "관련 코드 확인", "구조 파악", or broad code search before implementation.
Audit Stave multi-file contracts before or during changes. Use when a task touches provider runtime options, IPC payloads, window.api, schemas, NormalizedProviderEvent, replay payloads, or asks for a contract or sync checklist. Trigger on phrases like "ipc", "schema", "runtimeOptions", "window.api", "provider event", "계약", "스키마", "동기화 체크".
Keep Stave's Claude and Codex provider runtimes in sync when editing one of them. Use when a change touches `electron/providers/claude-sdk-runtime.ts`, `electron/providers/codex-app-server-runtime.ts`, executable lookup, env construction, CLI session launch env, tooling status probes, or any provider-agnostic behavior. Trigger on phrases like "provider runtime", "claude adapter", "codex adapter", "sibling adapter", "PATH env", "CLAUDE_CONFIG_DIR", "CODEX_HOME", "tooling status", "어댑터 대칭", "양쪽 프로바이더 확인".
Trace a behavior, event, or request path through the Stave codebase. Use when the request asks "where does this happen", "execution path", "call flow", "흐름 추적", "어디서 처리돼", or needs the exact producer -> bridge -> consumer chain.
| name | lens-inspect |
| description | Use the Lens built-in browser to inspect a running web application. Trigger when the request involves previewing a page, taking screenshots, reading DOM, checking console errors, picking elements to locate source code, or comparing rendered output to a design spec. |
| compatible-tools | ["claude","codex"] |
| category | inspection |
Inspect and interact with a live web application through Stave's built-in browser panel.
Lens is a per-workspace embedded browser in the right rail panel. It renders pages via Electron's WebContentsView and exposes 10 MCP tools so AI agents can navigate, screenshot, read DOM, evaluate JavaScript, and interact with page elements programmatically.
All tools require a workspaceId parameter.
| Tool | Purpose |
|---|---|
stave_lens_navigate | Load a URL in the browser |
stave_lens_screenshot | Capture viewport or full-page PNG |
stave_lens_get_html | Get outerHTML of page or a selector |
stave_lens_get_text | Get textContent of a selector |
stave_lens_evaluate | Run JavaScript in page context |
stave_lens_get_console | Read buffered console messages (up to 200) |
stave_lens_get_network | Read buffered network requests (up to 200) |
stave_lens_click | Click an element by CSS selector |
stave_lens_type | Type text into a focused or specified element |
stave_lens_snapshot | Get accessibility tree snapshot |
stave_lens_inspect | Get an element's box model (content size, padding, border, margin per side) |
stave_lens_measure | Measure the pixel gap between two elements (Figma-style spacing) |
The crosshair button in the address bar activates the element picker.
Captured data is inserted into the active task's prompt draft:
_debugSource file:line (when enabled in Settings)Configure in Settings > Lens > Source Code Mapping.
The AI uses distinctive class names, text content, IDs, and component-style class patterns from the picked element to search your codebase with grep or file-search tools. Works with any framework.
When your application runs in React dev mode with @babel/plugin-transform-react-jsx-source (enabled by default in Vite React plugin, CRA, and Next.js dev), the picker extracts the exact fileName:lineNumber from React fiber internals. This gives 100% accurate source location when available, with automatic fallback to heuristic search.
Combine Lens with a Figma MCP server for design-to-code verification:
1. figma-mcp: read design spec (colors, spacing, layout)
2. stave_lens_navigate("http://localhost:3000/page")
3. stave_lens_screenshot()
4. Compare rendered output to Figma spec
5. Modify code to fix discrepancies
6. Repeat from step 2
Page.getLayoutMetrics to capture beyond the viewport.stave_lens_snapshot) give a compact page structure summary — useful when full HTML is too verbose.file:// or chrome:// protocols — they are blocked for security._debugSource in production builds — it's only available in dev mode.about:blank yields an empty image.