metabench/docs/agi/skills/browser-verification
docs/agi/skills/browser-verification/SKILL.md
# Skill: browser-verification ## Scope Use browser subagents to verify UI rendering, capture evidence, and document visual results. **Does:** - Launch demo servers and verify they're running - Navigate browser to check rendered output - Capture screenshots and recordings for documentation - Inspect DOM structure and CSS computed styles - Verify console for errors **Does Not:** - Replace unit tests (use both) - Handle complex user interaction flows (see e2e testing) ## Why Browser Verificatio
development
Updated Jun 4, 2026
$ install --global
skillsauthnpx skillsauth add metabench/jsgui3-html docs/agi/skills/browser-verificationInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jun 4, 2026, 8:52 AM228.1s1 file scanned
SKILL.md
Skill: browser-verification
Scope
Use browser subagents to verify UI rendering, capture evidence, and document visual results.
Does:
- Launch demo servers and verify they're running
- Navigate browser to check rendered output
- Capture screenshots and recordings for documentation
- Inspect DOM structure and CSS computed styles
- Verify console for errors
Does Not:
- Replace unit tests (use both)
- Handle complex user interaction flows (see e2e testing)
Why Browser Verification?
Server-side rendering (SSR) in jsgui3 produces HTML that may look correct as strings but render incorrectly in browsers due to:
- Missing CSS
- Incorrect attribute values (NaN, undefined)
- Style attribute format issues
- Layout problems
Browser verification catches issues that unit tests miss.
For detailed operational procedures, see Browser Automation Workflow.
Common Pitfalls (Activation)
Server-side rendered HTML may appear correct but be inert (non-interactive) if the client-side JavaScript is not properly bundled and served. Always verify interactivity (clicking, typing) not just visual presence.
Procedure
1. Create a Demo Server
Create a simple HTTP server that renders the component:
// lab/<component>_demo_server.js
const http = require('http');
const jsgui = require('../html-core/html-core');
const { MyComponent } = require('../controls/<component>');
const PORT = 3456;
function create_demo_html() {
const context = new jsgui.Page_Context();
const component = new MyComponent({ context, ...options });
return `<!DOCTYPE html>
<html>
<head><style>${MyComponent.css || ''}</style></head>
<body>${component.all_html_render()}</body>
</html>`;
}
http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(create_demo_html());
}).listen(PORT, () => console.log(`Running at http://localhost:${PORT}`));
2. Start the Server
node lab/<component>_demo_server.js
Verify the server starts without errors.
3. Use Browser Subagent
Call the browser subagent with a clear task:
Navigate to http://localhost:<port> and verify:
1. Page loads without errors
2. Component renders visibly (not empty/blank)
3. Expected elements present (bars, paths, etc.)
4. No console errors
5. Take screenshot for documentation
4. Interpret Results
The subagent will report:
- Connection success/failure
- DOM inspection results
- Console log contents
- Screenshot paths
5. Debug Common Issues
Server Connection Refused:
- Check server crashed (view command status)
- Fix code errors and restart
Elements Missing or Wrong:
- Check HTML output with Node.js first
- Verify attributes are present and valid (not NaN)
Styles Not Applying:
- Check CSS is included in page
- Verify style attribute format (string vs object)
6. Capture Evidence
Save screenshots and recordings to artifacts directory:
<component>_demo_1234567890.png<component>_recording_1234567890.webp
Embed in walkthrough:
Real Example: Chart Legend Fix
Problem: Legend swatches (colored squares) were invisible.
Debug Process:
- Started chart_demo_server.js
- Browser subagent navigated to localhost:3456
- Subagent inspected
.legend-swatchelements - Found
background-color: rgba(0,0,0,0)- transparent! - Root cause:
style = { object }instead ofstyle = "string"
Fix: Changed to template literal:
swatch.dom.attributes.style = `background-color: ${color}`;
Verification: Browser subagent confirmed colored swatches visible.
Validation Checklist
- [ ] Demo server starts without errors
- [ ] Browser can connect to server
- [ ] Component renders visibly
- [ ] No console errors
- [ ] Screenshot captured for documentation
- [ ] Known issues identified and logged
References
- lab/chart_demo_server.js - Example demo server
- lab/function_graph_demo_server.js - Presentation-quality demo
Related Skills
metabench/docs/agi/skills/ui-pick-prompting
tools
VerifiedTrustedCommunity
# Skill: ui-pick-prompting ## Scope Use the ui-pick tool to present structured choices to the user. **Does:** - Show GUI picker with options. - Wait for user selection. - Return structured result (selection, cancelled, etc.). **Does Not:** - Handle complex multi-step wizards. - Manage state between prompts. ## Inputs - Options array (strings or objects with label/value/description). - Theme (optional): `wlilo` (dark) or `bright` (light). ## Procedure ### Via HTTP (Current Session) ```power
SKILL.mdUpdated Jun 4, 2026
metabench/docs/agi/skills/typescript-types
development
VerifiedTrustedCommunity
# Skill: typescript-types ## Scope Create and maintain TypeScript declaration files (.d.ts) for jsgui3-html components. **Does:** - Generate .d.ts files for controls and modules - Define interfaces for specs, params, and return types - Update package.json exports for TypeScript consumers - Maintain backward compatibility with JavaScript users **Does Not:** - Convert source files to TypeScript - Add runtime type checking - Handle complex generic patterns ## Inputs - File or module to type (e.
SKILL.mdUpdated Jun 4, 2026
metabench/docs/agi/skills/theme-system-integration
development
VerifiedTrustedCommunity
# Skill: theme-system-integration ## Scope Add theme support to existing controls or integrate theming into new features. **Does:** - Define params schemas for controls - Register variants in the variant registry - Integrate `resolve_params` for merge priority - Add CSS variable hooks and data attributes - Test theme inheritance and override behavior **Does Not:** - Create controls from scratch (see jsgui3-control-creation skill) - Handle runtime theme switching animations ## Inputs - Contro
SKILL.mdUpdated Jun 4, 2026
metabench/docs/agi/skills/session-discipline
testing
VerifiedTrustedCommunity
# Skill: session-discipline ## Scope Maintain structured notes across agent sessions to ensure continuity and knowledge transfer. **Does:** - Initialize session folders with standard structure. - Track active work, findings, and follow-ups. - Enable future agents to resume work seamlessly. **Does Not:** - Persist state between AI context windows (that's the purpose of the docs). - Replace version control (still commit changes). ## Session Structure Each session lives in `docs/sessions/<date
SKILL.mdUpdated Jun 4, 2026