Local browser verification for the lobe-ui component library and documentation site. Uses agent-browser against the React Router and Vite development server, including component pages, manifest-backed standalone demos, theme states, and responsive layouts. Trigger on local test, UI test, verify component, test in browser, visual check, or screenshot demo.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
Local browser verification for the lobe-ui component library and documentation site. Uses agent-browser against the React Router and Vite development server, including component pages, manifest-backed standalone demos, theme states, and responsive layouts. Trigger on local test, UI test, verify component, test in browser, visual check, or screenshot demo.
Local UI Automation Testing
Use agent-browser to verify the local documentation site visually and programmatically.
Layer
Command or tool
Authority
Development server
pnpm run docs:dev
React Router and Vite
Documentation routes
site/content/compatibility.json
Frozen path authority
Navigation and document registry
Compiled content manifest
Runtime result
Standalone demo routes
site/content/compatibility.json
Frozen compatibility inventory
Browser automation
agent-browser
Chromium through CDP
Do not assume a fixed port or derive standalone IDs from filenames. The server selects the first
available port, while the compatibility manifest is the route authority.
Start or reuse the development server
Prefer the server already associated with the current task. Otherwise start one in the background
and retain its log for port discovery and error inspection:
LOG=/tmp/lobe-ui-docs-dev.log
nohup pnpm run docs:dev > "$LOG" 2>&1 &
disown
Wait for the actual URL emitted by Vite. The log contains a value matching
http://localhost:[0-9]+; never substitute a hard-coded default.
LOG=/tmp/lobe-ui-docs-dev.log
for i in $(seq 1 60); do
URL=$(grep -Eo 'http://localhost:[0-9]+'"$LOG" | head -1)
[ -n "$URL" ] && curl -fsS -o /dev/null "$URL" && breaksleep 1
donetest -n "$URL"printf'%s\n'"$URL"
If no URL appears, inspect the complete log before retrying. Do not start multiple servers merely
because an expected port is occupied.
Select a route from repository manifests
Documentation pathnames are frozen in site/content/compatibility.json; this is the path authority.
The content manifest is the compiled runtime result. For a known document source, query its canonical
public path before opening it:
Open the returned route directly. This preserves legacy IDs such as /~demos/docs-demo-docs and
avoids reimplementing the canonical-ID algorithm in shell code.
agent-browser open "$URL/~demos/docs-demo-docs"
agent-browser wait --load networkidle
agent-browser snapshot -i
Use the full documentation page when verifying navigation, API tables, search, table of contents,
or the relationship between several demos. Use the standalone route for isolated component
interaction and rendering checks.
Stable selectors
Prefer accessible names and repository-owned state attributes over generated class names.
Surface
Stable selector
Active documentation link
[aria-current="page"]
Standalone demo root
[data-standalone-demo]
Demo appearance
[data-demo-appearance="light"] or [data-demo-appearance="dark"]
Demo editability
[data-demo-editable="true"] or [data-demo-editable="false"]
Demo layout
[data-demo-layout]
Live preview state
[data-live-state="active"]
Documentation navigation
[aria-label="Component documentation"]
Search dialog
[aria-label="Search documentation"]
Source editor
[aria-label="Demo source editor"]
Use role and accessible-name queries for desktop controls:
agent-browser click 'button[aria-label="Search documentation"]'
agent-browser fill 'input[aria-label="Search documentation"]''Button'
agent-browser click 'button[aria-label="Use dark demo theme"]'
agent-browser eval'document.querySelector("[aria-current=page]")?.textContent'
After switching to a mobile viewport, use button[aria-label="Open search"] from the header.
Re-run agent-browser snapshot -i after every navigation or hot update because element references
may have been invalidated.
Capture runtime failures
Install an interceptor before interaction when the scenario can trigger asynchronous rendering:
Treat hydration warnings, uncaught exceptions, unhandled rejections, and failed module loads as
test failures. A screenshot without these checks is insufficient.
Required verification flow
For a component change, exercise the smallest complete flow:
Open the canonical documentation path and confirm the expected title.
Confirm the current sidebar entry through [aria-current="page"].
Open the manifest-backed standalone route and confirm [data-standalone-demo] exists.
Exercise every changed interaction using accessible control names.
Verify relevant light and dark appearance states through [data-demo-appearance].
Verify desktop and mobile viewport behavior when layout is affected.
Capture a screenshot for visual evidence and inspect semantic state with eval.
Drain captured browser errors and inspect the development-server log.
