Browserwing
browserwing/browserwing
Browser automation platform with 78 built-in scripts and full CLI.
Inspect live Vue 3 component state via agent-browser eval - no Devtools extension, no console.log.
Install Vue Inspect
$ npx skills add scott-fryxell/brayness --skill vue-inspect -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install scott-fryxell/brayness vue-inspect --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/scott-fryxell/brayness.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/vue-inspect .claude/skills/vue-inspect && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "vue-inspect" agent skill from https://github.com/scott-fryxell/brayness/tree/main/skills/vue-inspect into .claude/skills/vue-inspect/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vue-inspect", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/scott-fryxell/brayness/tree/main/skills/vue-inspectType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add scott-fryxell/brayness --skill vue-inspect -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install scott-fryxell/brayness vue-inspect --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/scott-fryxell/brayness.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/vue-inspect .agents/skills/vue-inspect && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "vue-inspect" agent skill from https://github.com/scott-fryxell/brayness/tree/main/skills/vue-inspect into .agents/skills/vue-inspect/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vue-inspect", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add scott-fryxell/brayness --skill vue-inspect -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install scott-fryxell/brayness vue-inspect --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/scott-fryxell/brayness.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/vue-inspect .cursor/skills/vue-inspect && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "vue-inspect" agent skill from https://github.com/scott-fryxell/brayness/tree/main/skills/vue-inspect into .cursor/skills/vue-inspect/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vue-inspect", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/scott-fryxell/brayness.git --path skills/vue-inspect--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add scott-fryxell/brayness --skill vue-inspect -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install scott-fryxell/brayness vue-inspect --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/scott-fryxell/brayness.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/vue-inspect .gemini/skills/vue-inspect && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "vue-inspect" agent skill from https://github.com/scott-fryxell/brayness/tree/main/skills/vue-inspect into .gemini/skills/vue-inspect/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vue-inspect", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install scott-fryxell/brayness vue-inspectInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add scott-fryxell/brayness --skill vue-inspect -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/scott-fryxell/brayness.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/vue-inspect .github/skills/vue-inspect && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "vue-inspect" agent skill from https://github.com/scott-fryxell/brayness/tree/main/skills/vue-inspect into .github/skills/vue-inspect/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vue-inspect", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add scott-fryxell/brayness --skill vue-inspect -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install scott-fryxell/brayness vue-inspect --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/scott-fryxell/brayness.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/vue-inspect .opencode/skills/vue-inspect && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "vue-inspect" agent skill from https://github.com/scott-fryxell/brayness/tree/main/skills/vue-inspect into .opencode/skills/vue-inspect/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vue-inspect", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
vue-inspect- GitHub stars
- 125
- Token cost
- ~779 tokens
- SKILL.md length
- 313 words
- Files
- 5 (incl. references)
- Skills in repo
- 27
- Repo updated
- First seen
- Licence
- MIT
At a glance
Inspect live Vue 3 component state via agent-browser eval - no Devtools extension, no console.log.
- - inspect this Vue component
- SKILL.md covers When to use, Quick start, The one gotcha that will cost… and Files, plus 1 more section
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
- Whats the current value of this ref
What it does
Vue Inspect is an agent skill from scott-fryxell/brayness. Inspect live Vue 3 component state via agent-browser eval - no Devtools extension, no console.log. Triggers - "inspect this Vue component", "what's the current value of this ref", "read setupState", "walk the Vue tree", "Vue devtools alternative". Vue 3 Composition API only.
Its SKILL.md is about 780 tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including reference files (for example `SOURCES.md`, `references/api-surface.md` and `references/common-use-cases.md`).
It sits in Productivity & Automation, covering Browser automation. It works with Vue.js and React. The repository describes itself as: A harness for the anxious digital mind. A safe place for creatives to keep their creative soul while exploring digital skills. The licence is MIT.
When your agent uses it
- - inspect this Vue component
- Whats the current value of this ref
- Read setupState
- Walk the Vue tree
Example prompts
- “inspect this Vue component”
- “s the current value of this ref”
- “read setupState”
- “/vue-inspect”
What it can do on your machine
Read from SKILL.md and the folder at commit 71f10e2. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are bash).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Vue Inspect loads about 779 tokens when it runs, and up to ~5.1k if it reads all its reference files. Until then it costs about 72 tokens; SKILL.md has 313 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from scott-fryxell/brayness at commit 71f10e2, republished under its MIT licence (© scott-fryxell). 313 words, ~779 tokens.
Download SKILL.mdSave it as
.claude/skills/vue-inspect/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.- name
- vue-inspect
- description
- Inspect live Vue 3 component state via agent-browser eval - no Devtools extension, no console.log. Triggers - "inspect this Vue component", "what's the current value of this ref", "read setupState", "walk the Vue tree", "Vue devtools alternative". Vue 3 Composition API only.
vue-inspect
Vue 3 exposes its whole runtime state on plain DOM nodes and component instances - no
extension required. This skill is a set of copy-pasteable eval snippets (run via
agent-browser eval "(() => { ... })()") that walk that internal state to answer
"what does this component actually think its data is right now."
It exists because agent-browser has native React Devtools integration
(--enable react-devtools + react tree/react inspect/react renders) but nothing
built in for Vue. These snippets close that gap using Vue 3's own internals directly.
When to use
- Runtime-dependent state: what a ref/prop/computed actually is right now (mid-animation, post-interaction), what's actually mounted, whether a component exists in the rendered tree at all.
- Not for static reads - prop definitions and template markup live in the source file; go read it instead.
Quick start
Confirm the page is a Vue 3 app and get the version:
agent-browser eval "document.querySelector('#app').__vue_app__.version"If #app isn't the mount point, find it: Vue attaches __vue_app__ to whatever
element was passed to app.mount(...). document.querySelector('[data-v-app]') or
inspecting the root of the visible DOM tree usually finds it if the id differs.
Full reference snippets (tree walker, name-finder, state reader) live in
references/api-surface.md - copy them directly into an
eval call.
The one gotcha that will cost you time
setupState auto-unwraps top-level refs. setup.some_ref is the raw value
(0, false, {...}), not a ref object - setup.some_ref?.value silently returns
undefined. Check typeof setup.some_ref before assuming you need .value. Full
explanation in references/troubleshooting-workarounds.md.
Files
- references/api-surface.md - the internal properties
(
__vue_app__,subTree,setupState,type.name) and the three core snippets (tree walker, name-finder, state reader). - references/common-use-cases.md - worked examples:
reading a ref, finding a
v-forinstance, checking props, confirming mount/unmount, reading provide/inject, catching a mid-animation state. - references/troubleshooting-workarounds.md - known failure modes (ref unwrapping, functional components, Teleport/Suspense/KeepAlive, multiple apps, Vue 2 differences, prod build name-mangling) with fixes.
Pairs with
- agent-browser - runs the eval snippets; also has native React Devtools support
for the equivalent React workflow (
react tree,react inspect <id>).
© scott-fryxell, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 4 other files (references) in skills/vue-inspect of scott-fryxell/brayness.
- SKILL.md
- SOURCES.md
- references/api-surface.md
- references/common-use-cases.md
- references/troubleshooting-workarounds.md
Open the folder on GitHubat commit 71f10e2
Compare with similar skills
Vue Inspect next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Vue Inspect this skillscott-fryxell/brayness | 125 | — | ~779 | Automated safety check: Pass | MIT | |
| Browserwingbrowserwing/browserwing | 1.4k | — | ~1.8k | Automated safety check: Pass | MIT | |
| Web Searchfreestylefly/wesight | 946 | 1 repos | ~4k | Automated safety check: Notes | MIT | |
| Browser UseSirAllap/agentglass | 332 | — | ~7.8k | Automated safety check: Pass | MIT | |
| Bosszpguyi-a/pi-ling | 106 | — | ~2.4k | Automated safety check: Pass | MIT | |
| Knowledge Interaction Surfaces Web ClientechoVic/blade-code | 181 | — | ~2k | Automated safety check: Pass | MIT |
Similar skills
Web Search
freestylefly/wesight
Real-time web search using Playwright-controlled browser. An agent skill from freestylefly/wesight.
Browser Use
SirAllap/agentglass
Drive agentglass's built-in browser — the one already signed in to the sites this project uses.
Bosszp
guyi-a/pi-ling
Boss 直聘岗位搜索的完整操作手册。触发场景：用户说"找工作"/"看岗位"/"搜招聘"/"投简历"/"跳槽"/"Boss 直聘"/"看看有什么工作"/"帮我看下 XX 岗位"等。前提：必须走 browserbridge（Boss 需要用户 Chrome 登录态；browseruse 独立环境登不上）。包含 URL 模板、城市编码表、Vue data 抽取…
Knowledge Interaction Surfaces Web Client
echoVic/blade-code
覆盖 Blade React Web 的启动恢复、Session/任务 Zustand 投影、SSE 重连、聊天输入、 多项目导航、布局、预览、Browser 面板与终端。进入时机：修改 Web 消息流、Session 切换、草稿、错误恢复、Sidebar/Kanban、全屏预览、文件/Browser 活动或前端 API。
UI Control
SirAllap/agentglass
Open a panel in agentglass's own window, read what is open, or read and change one of its settings.
More from scott-fryxell/brayness
All 27 skills in this repoLogo Finder
scott-fryxell/brayness
Find and install brand SVG logos via SVGL (https://svgl.app/) and Wikimedia Commons fallbacks into any project's static asset folder.
Test Coverage
scott-fryxell/brayness
Write Vitest specs for Vue 3 JavaScript (Vite Plus, happy-dom, @vue/test-utils) and analyze V8 coverage + Fallow health to prioritize test-first refactors.
Flexible Visual System
scott-fryxell/brayness
Derive a project's visual rules from its existing tokens, palette, type scale, logo, and icons (Intake), then generate raw SVG vector graphics from those rules as a small composable set (module…
Hyperframes
scott-fryxell/brayness
Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML.
Motion Systems
scott-fryxell/brayness
A skill your agent uses when designing or implementing motion for web interfaces, including CSS transitions and keyframes, linear() easing design, transform strategy (translate/rotate vs…
Vuetify To Semantic
scott-fryxell/brayness
Refactor a Vue page or component from Vuetify to semantic HTML5 + Schema.org microdata + Stylus element selectors.
Related
Categories
Questions about Vue Inspect
What does Vue Inspect do?
Inspect live Vue 3 component state via agent-browser eval - no Devtools extension, no console.log. Vue Inspect is an agent skill from scott-fryxell/brayness.log.
When should I use Vue Inspect?
Vue Inspect fits situations like: - inspect this Vue component; whats the current value of this ref; read setupState; walk the Vue tree.
How do I install Vue Inspect in Claude Code?
Run `npx skills add scott-fryxell/brayness --skill vue-inspect -a claude-code`. Or copy the skill folder (skills/vue-inspect in scott-fryxell/brayness) into .claude/skills/vue-inspect in your project. Claude Code loads it when a task matches its description.
How do I install Vue Inspect in Codex?
Run `npx skills add scott-fryxell/brayness --skill vue-inspect -a codex`. Or copy the skill folder (skills/vue-inspect in scott-fryxell/brayness) into .agents/skills/vue-inspect in your project. Codex loads it when a task matches its description.
Can I use Vue Inspect in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add scott-fryxell/brayness --skill vue-inspect -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vue-inspect, .gemini/skills/vue-inspect, .github/skills/vue-inspect and .opencode/skills/vue-inspect in your project.
What does Vue Inspect need to run?
SKILL.md names no scripts, command-line tools or credentials: Vue Inspect is instructions for the agent only.
Does Vue Inspect access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Vue Inspect safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Vue Inspect use?
Vue Inspect is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Vue Inspect use?
About 779 tokens (SKILL.md is roughly 3.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 4.3k tokens, read only when the agent opens those files.
What are the alternatives to Vue Inspect?
Skills that share tags, products or a category with Vue Inspect: Browserwing (browserwing/browserwing, 1.4k stars), Web Search (freestylefly/wesight, 946 stars), Browser Use (SirAllap/agentglass, 332 stars) and Bosszp (guyi-a/pi-ling, 106 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Vue Inspect?
scott-fryxell (a GitHub user) maintains it in scott-fryxell/brayness, which has 125 GitHub stars. The repository holds 27 skills in this directory. The repository was last updated on September 28, 2026.
Source: scott-fryxell/brayness on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.