Visual Annotator

A GitHub-hosted hands-on workshop repository for wiring AI-powered UI verification workflows. It covers a podcast landing-page challenge with easy and medium paths, using a Chrome extension for deterministic visual annotation, a coding agent, and the Nova Act SDK to find and fix rendered UI discrepancies and verify design expectations and user flows. The annotation workflow lets participants select elements, draw on a page, or drop pins and export structured feedback; the verification workflow crawls a site, checks the resulting interface, and generates a report. The repository includes workshop instructions, setup prerequisites, integration code, and a Bee Wearable reverse proxy that surfaces completed-conversation feedback as sidebar cards with Apply and Dismiss actions.

Anatomy is an open-source agent skill for Claude Code, Antigravity, OpenCode, and Codex that explains technical ideas by constructing interactive isometric illustrations of physical machines, instruments, tools, or other mechanisms. It uses a workflow that collects the relevant numbers, invents a physical object for the concept, creates a parts list and geometry, renders parts back to front, adds interaction, and verifies the result with geometry and browser checks. The skill can produce standalone HTML pages, embedded SVG files, or React/Next.js components. Its SVG kit provides isometric solids, round parts, pipes, cables, four-tone shading, animation, cards, and live readouts; optional WebGL layers add effects such as fire, exhaust, water, caustics, light, and glow, while a beta 3D mode re-projects and re-shades moving parts each frame. The repository includes Node build scripts, complete examples, React components, reference guides, and headless Chrome tools for screenshots, scripted interaction, line-end checks, and geometry audits. It uses Node.js built-in modules without npm dependencies for the kit and examples, with React 18+ required for React output and Chrome or Chromium required for browser checks. The project is distributed under the MIT license. Its stated limits include not being a chart library, not targeting people or exact maps, and requiring WebGL for shader effects.

Excalidraw is an open-source virtual whiteboard for creating hand-drawn-style diagrams, wireframes, and other canvas-based drawings. It provides tools for shapes, arrows, lines, freehand drawing, image insertion, labeled and bound arrows, zooming, panning, undo and redo, dark mode, shape libraries, localization, and export to PNG, SVG, clipboard, or its open JSON format. The editor is available as an npm package for integration into applications. The hosted Excalidraw.com app adds real-time collaboration, end-to-end encryption, browser autosave with local-first behavior, offline PWA support, and shareable read-only links. The videos describe using Excalidraw to visualize Mermaid-generated diagrams and to manually map multi-step AI workflows with jobs, arrows, parallel lanes, checks, and human approvals.

Human Review is a local visual review tool and agent skill for editing HTML and Markdown files, reviewing localhost pages, and sending feedback to an AI coding agent. It opens a file or URL in a browser, where users can edit text and basic formatting, rearrange or remove page elements, resize or paste images, and attach comments to exact phrases, images, charts, or sections. Direct HTML edits and image changes save automatically; Markdown and localhost reviews are sent to the agent, which applies the changes to the source and refreshes the page. The tool includes CLI commands for review sessions, polling, status, and setup, plus a local server, editing and feedback SDK, browser client, Markdown renderer, and instructions for agent harnesses such as Claude Code and Codex. It runs on the user's computer without an account, cloud service, database, or API key.