菜单
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 职业分类
Apply Stave's desktop-first design system when a task changes UI, layout, theme, dialogs, sidebars, empty states, settings, prompt input, or other visual UX in this repo. Use for prompts like "디자인", "UI", "redesign", "polish", "sidebar", "dialog", "settings", or whenever a new interface pattern is introduced. Always use existing shadcn components and the radix-vega preset first — never hand-roll a control that shadcn already provides.
Release workflow for the Stave repository that confirms whether the next release is patch or minor before bumping the version, reviews the actual PR changes and PR description `Changes` sections in the release scope instead of relying on commit titles alone, generates release notes with `conventional-changelog`, and opens a pull request against `main` from a dedicated temporary release worktree so the user's original checkout stays on its original branch. Use when the user asks to cut the next release, ship the current changes as a versioned release, or prepare a release PR. After the PR merges, the repository's GitHub Actions workflow builds and publishes the release artifacts automatically.
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.
Run a high-signal review of the current workspace diff or PR in Stave. Use when the user asks for "code review", "PR review", "review this diff", "high-signal review", "strict review", "inline comments only for real issues", or wants only objective bugs and applicable policy violations with validation before commenting.
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", "계약", "스키마", "동기화 체크".
| 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 |
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.