Files
bot/ui/public/skills/peekaboo.html
zooqueenandHanzo Dev 2a2d582eac feat: add Skills Hub with 51 SEO-optimized detail pages + Web3 credits
- Build script (scripts/build-skills-catalog.ts) parses all SKILL.md
  files, outputs JSON catalog and individual detail HTML pages
- Skills Hub list page (/skills) with search, category filters, card grid
- Individual skill pages (/skills/github, etc.) with pre-rendered README,
  metadata sidebar, install commands, GitHub API integration
- Full SEO: unique title, meta description, Open Graph, Twitter Card,
  JSON-LD structured data on every page
- Web3 native messaging: DID identities, wallets, on-chain payments,
  prepaid credit balance model
- Fix stale chat widget system prompt pricing (Pro $5 → actual tiers)
- Add skills:catalog script to package.json

Co-authored-by: Hanzo Dev <[email protected]>
2026-02-13 17:26:25 -08:00

1061 lines
37 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>peekaboo — Hanzo Bot Skills</title>
<meta name="description" content="Capture and automate macOS UI with the Peekaboo CLI." />
<meta
name="keywords"
content="peekaboo, Hanzo Bot, AI skill, Content &amp; Media, autonomous agent"
/>
<link rel="canonical" href="https://hanzo.bot/skills/peekaboo" />
<!-- Open Graph -->
<meta property="og:title" content="peekaboo — Hanzo Bot Skills" />
<meta
property="og:description"
content="Capture and automate macOS UI with the Peekaboo CLI."
/>
<meta property="og:type" content="article" />
<meta property="og:url" content="https://hanzo.bot/skills/peekaboo" />
<meta property="og:site_name" content="Hanzo Bot" />
<meta property="og:image" content="https://hanzo.bot/og-skills.png" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@hanaborteam" />
<meta name="twitter:title" content="peekaboo — Hanzo Bot Skills" />
<meta
name="twitter:description"
content="Capture and automate macOS UI with the Peekaboo CLI."
/>
<!-- JSON-LD -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "peekaboo — Hanzo Bot Skill",
"description": "Capture and automate macOS UI with the Peekaboo CLI.",
"applicationCategory": "DeveloperApplication",
"operatingSystem": "Cross-platform",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"author": {
"@type": "Organization",
"name": "Hanzo AI",
"url": "https://hanzo.ai"
}
}
</script>
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🥷</text></svg>"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<style>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--brand: #fd4444;
--brand-secondary: #ff6b6b;
--bg: #000;
--bg-card: rgba(255, 255, 255, 0.04);
--bg-hover: #1a1a1a;
--border: rgba(255, 255, 255, 0.08);
--border-hover: rgba(255, 255, 255, 0.16);
--text: #fff;
--muted: #888;
--subtle: #555;
--max-w: 1200px;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--font:
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
sans-serif;
--font-mono: "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
position: relative;
}
body::before {
content: "";
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 64px 64px;
pointer-events: none;
z-index: 0;
}
body::after {
content: "";
position: fixed;
inset: 0;
opacity: 0.035;
pointer-events: none;
z-index: 0;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * {
position: relative;
z-index: 1;
}
a {
color: inherit;
text-decoration: none;
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
color: inherit;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.header-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 24px;
height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
}
.header-left {
display: flex;
align-items: center;
gap: 32px;
}
.logo {
display: flex;
align-items: center;
gap: 8px;
}
.logo-mark {
width: 24px;
height: 24px;
}
.logo-mark svg {
width: 100%;
height: 100%;
display: block;
}
.logo-text {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.03em;
}
.nav-links {
display: flex;
gap: 4px;
}
.nav-link {
position: relative;
padding: 8px 12px;
font-size: 13px;
font-weight: 500;
color: var(--muted);
border-radius: 6px;
transition:
color 0.15s,
background 0.15s;
}
.nav-link:hover {
color: var(--text);
background: var(--bg-hover);
}
.nav-link.active {
color: var(--brand);
}
.header-right {
display: flex;
align-items: center;
gap: 8px;
}
.btn-ghost {
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
color: var(--muted);
border-radius: 8px;
transition:
color 0.15s,
background 0.15s;
}
.btn-ghost:hover {
color: var(--text);
background: var(--bg-hover);
}
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 20px;
font-size: 13px;
font-weight: 600;
color: #fff;
background: var(--brand);
border-radius: 9999px;
transition:
opacity 0.15s,
box-shadow 0.15s;
}
.btn-primary:hover {
opacity: 0.9;
box-shadow: 0 0 24px rgba(253, 68, 68, 0.3);
}
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 20px;
font-size: 13px;
font-weight: 500;
color: var(--text);
border: 1px solid var(--border);
border-radius: 9999px;
transition:
border-color 0.15s,
background 0.15s,
box-shadow 0.15s;
}
.btn-outline:hover {
border-color: rgba(253, 68, 68, 0.3);
background: rgba(253, 68, 68, 0.06);
}
.btn-lg {
padding: 14px 32px;
font-size: 15px;
border-radius: 9999px;
}
.footer {
border-top: 1px solid var(--border);
padding: 64px 24px 32px;
}
.footer-inner {
max-width: var(--max-w);
margin: 0 auto;
}
.footer-grid {
display: grid;
grid-template-columns: 240px repeat(4, 1fr);
gap: 40px;
margin-bottom: 48px;
}
.footer-brand .footer-logo {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.footer-brand .footer-logo svg {
width: 20px;
height: 20px;
}
.footer-brand .footer-logo span {
font-size: 14px;
font-weight: 600;
}
.footer-brand p {
font-size: 13px;
color: var(--muted);
line-height: 1.6;
margin-bottom: 16px;
}
.footer-social {
display: flex;
gap: 12px;
}
.footer-social a {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--muted);
transition:
color 0.15s,
border-color 0.15s;
}
.footer-social a:hover {
color: var(--text);
border-color: var(--border-hover);
}
.footer-social svg {
width: 14px;
height: 14px;
}
.footer-col h4 {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--subtle);
margin-bottom: 16px;
}
.footer-col a {
display: block;
font-size: 13px;
color: var(--muted);
padding: 3px 0;
transition: color 0.15s;
}
.footer-col a:hover {
color: var(--text);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 24px;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--subtle);
}
@media (max-width: 1024px) {
.footer-grid {
grid-template-columns: repeat(3, 1fr);
}
.footer-brand {
grid-column: 1/-1;
}
.nav-links {
display: none;
}
}
@media (max-width: 768px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.footer-grid {
grid-template-columns: 1fr;
}
}
/* ── Detail layout ── */
.detail-wrap {
max-width: var(--max-w);
margin: 0 auto;
padding: 80px 24px 60px;
}
.back-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--muted);
margin-bottom: 24px;
transition: color 0.15s;
}
.back-link:hover {
color: var(--text);
}
.skill-hero {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 32px;
}
.skill-emoji {
font-size: 48px;
line-height: 1;
}
.skill-hero h1 {
font-size: clamp(28px, 4vw, 40px);
font-weight: 700;
letter-spacing: -0.03em;
}
.skill-desc {
font-size: 15px;
color: var(--muted);
line-height: 1.7;
margin-bottom: 40px;
max-width: 720px;
}
.detail-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 48px;
align-items: start;
}
.detail-main {
min-width: 0;
}
.detail-sidebar {
display: flex;
flex-direction: column;
gap: 16px;
position: sticky;
top: 80px;
}
.sidebar-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
backdrop-filter: blur(16px);
}
.sidebar-card h3 {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--subtle);
margin-bottom: 16px;
}
.info-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 0;
font-size: 13px;
border-bottom: 1px solid var(--border);
}
.info-row:last-child {
border-bottom: none;
}
.info-row .label {
color: var(--muted);
}
.info-row .value {
color: var(--text);
text-align: right;
}
.info-row .value code {
font-family: var(--font-mono);
font-size: 11px;
background: rgba(255, 255, 255, 0.06);
padding: 2px 6px;
border-radius: 4px;
}
.info-row .value a {
color: var(--brand);
transition: opacity 0.15s;
}
.info-row .value a:hover {
opacity: 0.8;
}
.install-row {
padding: 8px 0;
border-bottom: 1px solid var(--border);
}
.install-row:last-child {
border-bottom: none;
}
.install-label {
display: block;
font-size: 12px;
color: var(--muted);
margin-bottom: 4px;
}
.install-cmd {
display: block;
font-family: var(--font-mono);
font-size: 12px;
color: var(--brand-secondary);
background: rgba(255, 255, 255, 0.04);
padding: 6px 10px;
border-radius: 6px;
word-break: break-all;
}
.sidebar-actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.sidebar-actions a {
text-align: center;
}
.web3-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: rgba(99, 102, 241, 0.1);
border: 1px solid rgba(99, 102, 241, 0.2);
border-radius: 6px;
font-size: 11px;
font-weight: 500;
color: #818cf8;
margin-bottom: 4px;
}
.web3-features {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 12px;
}
.web3-feat {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--muted);
}
.web3-feat::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #818cf8;
flex-shrink: 0;
}
.category-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 100px;
font-size: 11px;
font-weight: 500;
background: rgba(253, 68, 68, 0.08);
color: var(--brand-secondary);
border: 1px solid rgba(253, 68, 68, 0.15);
}
/* ── README styles ── */
.skill-readme {
line-height: 1.7;
color: rgba(255, 255, 255, 0.85);
}
.skill-readme h1 {
font-size: 28px;
font-weight: 700;
margin: 32px 0 16px;
letter-spacing: -0.02em;
}
.skill-readme h2 {
font-size: 22px;
font-weight: 600;
margin: 28px 0 12px;
letter-spacing: -0.01em;
color: var(--text);
}
.skill-readme h3 {
font-size: 17px;
font-weight: 600;
margin: 24px 0 8px;
}
.skill-readme h4 {
font-size: 14px;
font-weight: 600;
margin: 20px 0 8px;
}
.skill-readme p {
margin: 0 0 16px;
}
.skill-readme ul,
.skill-readme ol {
margin: 0 0 16px;
padding-left: 24px;
}
.skill-readme li {
margin-bottom: 6px;
}
.skill-readme code {
font-family: var(--font-mono);
font-size: 0.88em;
background: rgba(255, 255, 255, 0.06);
padding: 2px 6px;
border-radius: 4px;
}
.skill-readme pre {
margin: 0 0 16px;
border-radius: 8px;
overflow-x: auto;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border);
}
.skill-readme pre code {
display: block;
padding: 16px;
background: none;
font-size: 13px;
line-height: 1.5;
}
.skill-readme table {
width: 100%;
border-collapse: collapse;
margin: 0 0 16px;
font-size: 13px;
}
.skill-readme th,
.skill-readme td {
padding: 8px 12px;
border: 1px solid var(--border);
text-align: left;
}
.skill-readme th {
background: rgba(255, 255, 255, 0.04);
font-weight: 600;
}
.skill-readme blockquote {
border-left: 3px solid var(--brand);
padding: 8px 16px;
margin: 0 0 16px;
color: var(--muted);
background: rgba(255, 255, 255, 0.02);
border-radius: 0 8px 8px 0;
}
.skill-readme a {
color: var(--brand-secondary);
text-decoration: underline;
text-underline-offset: 2px;
}
.skill-readme a:hover {
color: var(--brand);
}
.skill-readme hr {
border: none;
border-top: 1px solid var(--border);
margin: 24px 0;
}
.skill-readme strong {
color: var(--text);
}
@media (max-width: 1024px) {
.detail-layout {
grid-template-columns: 1fr;
}
.detail-sidebar {
position: static;
order: 2;
}
}
@media (max-width: 768px) {
.detail-wrap {
padding: 72px 16px 40px;
}
}
</style>
</head>
<body>
<header class="header">
<div class="header-inner">
<div class="header-left">
<a href="/" class="logo">
<div class="logo-mark">
<svg viewBox="0 0 67 67" xmlns="http://www.w3.org/2000/svg">
<path d="M22.21 67V44.6369H0V67H22.21Z" fill="#fff" />
<path d="M0 44.6369L22.21 46.8285V44.6369H0Z" fill="#fff" />
<path
d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z"
fill="#fff"
/>
<path d="M22.21 0H0V22.3184H22.21V0Z" fill="#fff" />
<path d="M66.7198 0H44.5098V22.3184H66.7198V0Z" fill="#fff" />
<path d="M66.6753 22.3185L44.5098 20.0822V22.3185H66.6753Z" fill="#fff" />
<path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" fill="#fff" />
</svg>
</div>
<span class="logo-text">Bot</span>
</a>
<nav class="nav-links">
<a href="https://hanzo.ai" class="nav-link">AI</a>
<a href="/" class="nav-link">Home</a>
<a href="/skills" class="nav-link active">Skills</a>
<a href="/book" class="nav-link">Book</a>
<a href="https://docs.hanzo.bot" class="nav-link">Docs</a>
<a href="https://github.com/hanzoai/bot" class="nav-link">GitHub</a>
</nav>
</div>
<div class="header-right">
<a href="https://hanzo.ai/contact" class="btn-ghost">Contact Sales</a>
<a href="/chat" class="btn-primary">Sign In</a>
</div>
</div>
</header>
<main class="detail-wrap">
<a href="/skills" class="back-link">&larr; Back to all skills</a>
<div class="skill-hero">
<span class="skill-emoji">👀</span>
<div>
<h1>peekaboo</h1>
</div>
</div>
<p class="skill-desc">Capture and automate macOS UI with the Peekaboo CLI.</p>
<div class="detail-layout">
<div class="detail-main">
<div class="skill-readme">
<h1>Peekaboo</h1>
<p>
Peekaboo is a full macOS UI automation CLI: capture/inspect screens, target UI
elements, drive input, and manage apps/windows/menus. Commands share a snapshot cache
and support <code>--json</code>/<code>-j</code> for scripting. Run
<code>peekaboo</code> or <code>peekaboo &lt;cmd&gt; --help</code> for flags;
<code>peekaboo --version</code> prints build metadata. Tip: run via
<code>polter peekaboo</code> to ensure fresh builds.
</p>
<h2>Features (all CLI capabilities, excluding agent/MCP)</h2>
<p>Core</p>
<ul>
<li><code>bridge</code>: inspect Peekaboo Bridge host connectivity</li>
<li><code>capture</code>: live capture or video ingest + frame extraction</li>
<li><code>clean</code>: prune snapshot cache and temp files</li>
<li><code>config</code>: init/show/edit/validate, providers, models, credentials</li>
<li><code>image</code>: capture screenshots (screen/window/menu bar regions)</li>
<li><code>learn</code>: print the full agent guide + tool catalog</li>
<li><code>list</code>: apps, windows, screens, menubar, permissions</li>
<li><code>permissions</code>: check Screen Recording/Accessibility status</li>
<li><code>run</code>: execute <code>.peekaboo.json</code> scripts</li>
<li><code>sleep</code>: pause execution for a duration</li>
<li><code>tools</code>: list available tools with filtering/display options</li>
</ul>
<p>Interaction</p>
<ul>
<li><code>click</code>: target by ID/query/coords with smart waits</li>
<li><code>drag</code>: drag &amp; drop across elements/coords/Dock</li>
<li><code>hotkey</code>: modifier combos like <code>cmd,shift,t</code></li>
<li><code>move</code>: cursor positioning with optional smoothing</li>
<li><code>paste</code>: set clipboard -&gt; paste -&gt; restore</li>
<li><code>press</code>: special-key sequences with repeats</li>
<li><code>scroll</code>: directional scrolling (targeted + smooth)</li>
<li><code>swipe</code>: gesture-style drags between targets</li>
<li><code>type</code>: text + control keys (<code>--clear</code>, delays)</li>
</ul>
<p>System</p>
<ul>
<li><code>app</code>: launch/quit/relaunch/hide/unhide/switch/list apps</li>
<li><code>clipboard</code>: read/write clipboard (text/images/files)</li>
<li><code>dialog</code>: click/input/file/dismiss/list system dialogs</li>
<li><code>dock</code>: launch/right-click/hide/show/list Dock items</li>
<li><code>menu</code>: click/list application menus + menu extras</li>
<li><code>menubar</code>: list/click status bar items</li>
<li>
<code>open</code>: enhanced <code>open</code> with app targeting + JSON payloads
</li>
<li><code>space</code>: list/switch/move-window (Spaces)</li>
<li><code>visualizer</code>: exercise Peekaboo visual feedback animations</li>
<li><code>window</code>: close/minimize/maximize/move/resize/focus/list</li>
</ul>
<p>Vision</p>
<ul>
<li><code>see</code>: annotated UI maps, snapshot IDs, optional analysis</li>
</ul>
<p>Global runtime flags</p>
<ul>
<li>
<code>--json</code>/<code>-j</code>, <code>--verbose</code>/<code>-v</code>,
<code>--log-level &lt;level&gt;</code>
</li>
<li><code>--no-remote</code>, <code>--bridge-socket &lt;path&gt;</code></li>
</ul>
<h2>Quickstart (happy path)</h2>
<pre><code class="language-bash">peekaboo permissions
peekaboo list apps --json
peekaboo see --annotate --path /tmp/peekaboo-see.png
peekaboo click --on B1
peekaboo type &quot;Hello&quot; --return
</code></pre>
<h2>Common targeting parameters (most interaction commands)</h2>
<ul>
<li>
App/window: <code>--app</code>, <code>--pid</code>, <code>--window-title</code>,
<code>--window-id</code>, <code>--window-index</code>
</li>
<li>
Snapshot targeting: <code>--snapshot</code> (ID from <code>see</code>; defaults to
latest)
</li>
<li>
Element/coords: <code>--on</code>/<code>--id</code> (element ID),
<code>--coords x,y</code>
</li>
<li>
Focus control: <code>--no-auto-focus</code>, <code>--space-switch</code>,
<code>--bring-to-current-space</code>, <code>--focus-timeout-seconds</code>,
<code>--focus-retry-count</code>
</li>
</ul>
<h2>Common capture parameters</h2>
<ul>
<li>
Output: <code>--path</code>, <code>--format png|jpg</code>, <code>--retina</code>
</li>
<li>
Targeting: <code>--mode screen|window|frontmost</code>, <code>--screen-index</code>,
<code>--window-title</code>, <code>--window-id</code>
</li>
<li>Analysis: <code>--analyze &quot;prompt&quot;</code>, <code>--annotate</code></li>
<li>Capture engine: <code>--capture-engine auto|classic|cg|modern|sckit</code></li>
</ul>
<h2>Common motion/typing parameters</h2>
<ul>
<li>
Timing: <code>--duration</code> (drag/swipe), <code>--steps</code>,
<code>--delay</code> (type/scroll/press)
</li>
<li>
Human-ish movement: <code>--profile human|linear</code>, <code>--wpm</code> (typing)
</li>
<li>
Scroll: <code>--direction up|down|left|right</code>,
<code>--amount &lt;ticks&gt;</code>, <code>--smooth</code>
</li>
</ul>
<h2>Examples</h2>
<h3>See -&gt; click -&gt; type (most reliable flow)</h3>
<pre><code class="language-bash">peekaboo see --app Safari --window-title &quot;Login&quot; --annotate --path /tmp/see.png
peekaboo click --on B3 --app Safari
peekaboo type &quot;[email protected]&quot; --app Safari
peekaboo press tab --count 1 --app Safari
peekaboo type &quot;supersecret&quot; --app Safari --return
</code></pre>
<h3>Target by window id</h3>
<pre><code class="language-bash">peekaboo list windows --app &quot;Visual Studio Code&quot; --json
peekaboo click --window-id 12345 --coords 120,160
peekaboo type &quot;Hello from Peekaboo&quot; --window-id 12345
</code></pre>
<h3>Capture screenshots + analyze</h3>
<pre><code class="language-bash">peekaboo image --mode screen --screen-index 0 --retina --path /tmp/screen.png
peekaboo image --app Safari --window-title &quot;Dashboard&quot; --analyze &quot;Summarize KPIs&quot;
peekaboo see --mode screen --screen-index 0 --analyze &quot;Summarize the dashboard&quot;
</code></pre>
<h3>Live capture (motion-aware)</h3>
<pre><code class="language-bash">peekaboo capture live --mode region --region 100,100,800,600 --duration 30 \
--active-fps 8 --idle-fps 2 --highlight-changes --path /tmp/capture
</code></pre>
<h3>App + window management</h3>
<pre><code class="language-bash">peekaboo app launch &quot;Safari&quot; --open https://example.com
peekaboo window focus --app Safari --window-title &quot;Example&quot;
peekaboo window set-bounds --app Safari --x 50 --y 50 --width 1200 --height 800
peekaboo app quit --app Safari
</code></pre>
<h3>Menus, menubar, dock</h3>
<pre><code class="language-bash">peekaboo menu click --app Safari --item &quot;New Window&quot;
peekaboo menu click --app TextEdit --path &quot;Format &gt; Font &gt; Show Fonts&quot;
peekaboo menu click-extra --title &quot;WiFi&quot;
peekaboo dock launch Safari
peekaboo menubar list --json
</code></pre>
<h3>Mouse + gesture input</h3>
<pre><code class="language-bash">peekaboo move 500,300 --smooth
peekaboo drag --from B1 --to T2
peekaboo swipe --from-coords 100,500 --to-coords 100,200 --duration 800
peekaboo scroll --direction down --amount 6 --smooth
</code></pre>
<h3>Keyboard input</h3>
<pre><code class="language-bash">peekaboo hotkey --keys &quot;cmd,shift,t&quot;
peekaboo press escape
peekaboo type &quot;Line 1\nLine 2&quot; --delay 10
</code></pre>
<p>Notes</p>
<ul>
<li>Requires Screen Recording + Accessibility permissions.</li>
<li>Use <code>peekaboo see --annotate</code> to identify targets before clicking.</li>
</ul>
</div>
</div>
<aside class="detail-sidebar">
<div class="sidebar-card">
<h3>Info</h3>
<div class="info-row">
<span class="label">Category</span
><span class="value"><span class="category-badge">Content &amp; Media</span></span>
</div>
<div class="info-row">
<span class="label">Requires</span><span class="value"><code>peekaboo</code></span>
</div>
<div class="info-row">
<span class="label">Size</span><span class="value">5.8 KB</span>
</div>
<div class="info-row">
<span class="label">Homepage</span
><span class="value"
><a href="https://peekaboo.boo" target="_blank" rel="noopener"
>peekaboo.boo</a
></span
>
</div>
<div class="info-row">
<span class="label">Source</span
><span class="value"
><a
href="https://github.com/hanzoai/bot/blob/main/skills/peekaboo/SKILL.md"
target="_blank"
rel="noopener"
>GitHub</a
></span
>
</div>
<div class="info-row" id="lastUpdated">
<span class="label">Updated</span><span class="value">—</span>
</div>
</div>
<div class="sidebar-card">
<h3>Install</h3>
<div class="install-row">
<span class="install-label">Install Peekaboo (brew)</span
><code class="install-cmd">brew install steipete/tap/peekaboo</code>
</div>
</div>
<div class="sidebar-card sidebar-actions">
<a
href="https://github.com/hanzoai/bot/blob/main/skills/peekaboo/SKILL.md"
class="btn-outline"
target="_blank"
rel="noopener"
>View on GitHub</a
>
<a href="/chat" class="btn-primary">Open in Hanzo Bot</a>
</div>
<div class="sidebar-card">
<h3>Web3 Native</h3>
<div class="web3-badge">&#9670; On-Chain Ready</div>
<div class="web3-features">
<div class="web3-feat">DID identity for every bot</div>
<div class="web3-feat">Integrated wallet &amp; payments</div>
<div class="web3-feat">Prefund balance, draw on credits</div>
<div class="web3-feat">On-chain &amp; fiat payment rails</div>
<div class="web3-feat">Send funds to bots directly</div>
</div>
</div>
</aside>
</div>
</main>
<footer class="footer">
<div class="footer-inner">
<div class="footer-grid">
<div class="footer-brand">
<div class="footer-logo">
<svg viewBox="0 0 67 67" xmlns="http://www.w3.org/2000/svg">
<path d="M22.21 67V44.6369H0V67H22.21Z" fill="#fff" />
<path d="M0 44.6369L22.21 46.8285V44.6369H0Z" fill="#fff" />
<path
d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z"
fill="#fff"
/>
<path d="M22.21 0H0V22.3184H22.21V0Z" fill="#fff" />
<path d="M66.7198 0H44.5098V22.3184H66.7198V0Z" fill="#fff" />
<path d="M66.6753 22.3185L44.5098 20.0822V22.3185H66.6753Z" fill="#fff" />
<path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" fill="#fff" /></svg
><span>Hanzo</span>
</div>
<p>Build, deploy, and manage autonomous AI agents across every platform.</p>
<div class="footer-social">
<a href="https://x.com/hanaborteam" aria-label="X"
><svg viewBox="0 0 24 24" fill="currentColor">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
/></svg
></a>
<a href="https://linkedin.com/company/hanzo-ai" aria-label="LinkedIn"
><svg viewBox="0 0 24 24" fill="currentColor">
<path
d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
/></svg
></a>
<a href="https://discord.gg/XthHQQj" aria-label="Discord"
><svg viewBox="0 0 24 24" fill="currentColor">
<path
d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03z"
/></svg
></a>
</div>
</div>
<div class="footer-col">
<h4>Products</h4>
<a href="https://hanzo.ai">Hanzo AI</a><a href="https://hanzo.app">Hanzo App</a
><a href="https://hanzo.bot">Hanzo Bot</a><a href="https://hanzo.ai/dev">Hanzo Dev</a
><a href="https://hanzo.ai/cloud">Hanzo Cloud</a
><a href="https://hanzo.app/download">Desktop App</a><a href="/book">The Hanzo Book</a>
</div>
<div class="footer-col">
<h4>Developers</h4>
<a href="https://docs.hanzo.bot">Documentation</a
><a href="https://github.com/hanzoai/bot">GitHub</a
><a href="https://docs.hanzo.bot/api">API Reference</a><a href="/skills">Skills Hub</a
><a href="https://docs.hanzo.bot/cli">CLI Reference</a>
</div>
<div class="footer-col">
<h4>Solutions</h4>
<a href="#">Customer Support</a><a href="#">Developer Operations</a
><a href="#">Marketing</a><a href="#">Finance</a><a href="#">Security</a
><a href="#">Enterprise</a>
</div>
<div class="footer-col">
<h4>Company</h4>
<a href="https://hanzo.ai/about">About</a><a href="https://hanzo.ai/blog">Blog</a
><a href="https://hanzo.ai/careers">Careers</a
><a href="https://hanzo.ai/contact">Contact</a
><a href="https://hanzo.ai/privacy">Privacy</a><a href="https://hanzo.ai/terms">Terms</a
><a href="https://status.hanzo.ai">Status</a>
</div>
</div>
<div class="footer-bottom">
<span>&copy; 2016–2026 Hanzo Industries. All rights reserved.</span>
<span>hanzo.ai</span>
</div>
</div>
</footer>
<script>
(function () {
var slug = "peekaboo";
var el = document.getElementById("lastUpdated");
if (!el) return;
var key = "gh-commits-" + slug;
var cached = sessionStorage.getItem(key);
function show(data) {
if (!Array.isArray(data) || !data[0] || !data[0].commit) return;
var d = new Date(data[0].commit.author.date);
var days = Math.floor((Date.now() - d.getTime()) / 86400000);
var txt = days === 0 ? "today" : days === 1 ? "yesterday" : days + " days ago";
el.querySelector(".value").textContent = txt;
}
if (cached) {
try {
show(JSON.parse(cached));
} catch (e) {}
} else {
fetch(
"https://api.github.com/repos/hanzoai/bot/commits?path=skills/" +
slug +
"/SKILL.md&per_page=1",
)
.then(function (r) {
return r.json();
})
.then(function (d) {
try {
sessionStorage.setItem(key, JSON.stringify(d));
} catch (e) {}
show(d);
})
.catch(function () {});
}
})();
</script>
</body>
</html>