metabench/docs/agi/skills/autonomous-ui-inspection
docs/agi/skills/autonomous-ui-inspection/SKILL.md
# Skill: autonomous-ui-inspection ## Scope Use this skill for **reliable, agent-friendly UI inspection**: - Visual: Screenshots via browser tools. - Numeric: Bounding boxes, styles, overflow detection. **Does:** - Capture screenshots of rendered UI. - Extract layout metrics for validation. - Provide evidence for UI changes. **Does Not:** - Make styling changes (that's a separate task). - Run full E2E test suites. ## Inputs - URL or HTML file path. - "Ready" selector (e.g., `.control-loaded`)
tools
Updated Jun 4, 2026
$ install --global
skillsauthnpx skillsauth add metabench/jsgui3-html docs/agi/skills/autonomous-ui-inspectionInstall 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:50 AM113.4s1 file scanned
SKILL.md
Skill: autonomous-ui-inspection
Scope
Use this skill for reliable, agent-friendly UI inspection:
- Visual: Screenshots via browser tools.
- Numeric: Bounding boxes, styles, overflow detection.
Does:
- Capture screenshots of rendered UI.
- Extract layout metrics for validation.
- Provide evidence for UI changes.
Does Not:
- Make styling changes (that's a separate task).
- Run full E2E test suites.
Inputs
- URL or HTML file path.
- "Ready" selector (e.g.,
.control-loaded). - Viewport size (default: 1280x800).
Procedure
A) Visual Inspection (Browser Tool)
-
Start server (if needed):
npm run dev -
Navigate to URL using browser subagent.
-
Capture screenshot:
- Full page for baseline.
- Clipped to specific element if needed.
B) Numeric Inspection (Script)
Create/run a Puppeteer script:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('http://localhost:3000/control-demo');
// Wait for ready
await page.waitForSelector('.control-loaded');
// Get metrics
const metrics = await page.evaluate(() => {
const el = document.querySelector('.my-control');
const rect = el.getBoundingClientRect();
return {
width: rect.width,
height: rect.height,
isOverflowing: el.scrollWidth > el.clientWidth
};
});
console.log(JSON.stringify(metrics, null, 2));
await browser.close();
})();
C) Using ui-pick for Inspection Results
After inspection, present findings to user:
node tools/dev/ui-pick.js "Looks correct" "Needs adjustment" --theme=wlilo
Validation
- Screenshot captured and saved.
- Numeric metrics match expected values.
- No console errors during render.
References
- Browser Subagent
- lab-experimentation skill
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