Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/kirodotdev/kirocrew/browser-recordingnpx skills add kirodotdev/KiroCrew --skill browser-recordinggit clone --depth 1 https://github.com/kirodotdev/KiroCrewWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00085 | $0.02196 |
| Opus 5 | $0.00043 | $0.01098 |
| Sonnet 5 | $0.00017 | $0.00439 |
| Haiku 4.5 | $0.00009 | $0.00220 |
Grade A, and why
browser-recording scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 182 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Browser Recording — video/GIF evidence for UI flows
A still frame cannot prove motion or sequence correctness. When a UI change
involves animation, transitions, or a multi-step flow (wizard steps, a
modal opening, drag interactions), record it. This skill is the how for the
evidence rule in the frontend-design-workflow skill's Phase 3.
Recording evidence for GUI PRs (provenance)
frontend-design-workflow Phase 3 owns which evidence a GUI change needs: a
still screenshot for a static layout or styling change, a recording for
motion, a transition, or a multi-step flow a still frame cannot prove. This
section does not widen that rule — do not record a change a screenshot already
covers — it adds the one thing Phase 3 leaves open: how to make a recording
reproducible and honest about how it was produced.
When a change does need a recording, it must come from the real server and model flow: the actual dev/preview server running the branch, driven through a real interaction, never a fixture, a mock, or a hand-faked event stream. A recording of a stubbed surface proves nothing about the code under review.
Embed the recording with a provenance line beside it disclosing how it was produced:
recorded from <full-SHA> · <tree/origin> · mode: <flags> · real server + model, no fixtures
State the commit SHA, the tree or origin it came from, any mode flags that change behaviour, and an explicit real-vs-fixture disclosure. The line is written by the same agent that made the recording, so it discloses provenance rather than proving it — the real check is the SHA-pinned embed a reviewer can open and a re-record from that SHA. A recording with no provenance line leaves how it was produced unstated.
What it does
scripts/record_browser.py drives a headless Chromium through the target
project's own Playwright install, records the session as webm, and — when
ffmpeg is available — converts it to mp4 and a palette-optimized GIF.
python3 <skill-dir>/scripts/record_browser.py \
--url http://127.0.0.1:5173/settings \
--scenario /tmp/demo-scenario.mjs \
--project /path/to/frontend \
--size 1280x800 --name settings-flow --out /tmp/rec
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- yesterday First seen · 182 lines · 85 tokens per session scan A 1fe4c270b2f3
browser-recording is a skill published in the GitHub repository kirodotdev/KiroCrew (3,413 stars, last pushed yesterday), licensed Apache-2.0. It adds 85 tokens to every session and 2,196 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
canvas-procedural-animation
Use p5.js/canvas for local procedural character effects: particles, weather, squash/stretch, walk cycles, and environmental motion.
rn-device-control
This skill should be used when the user asks to "control the simulator", "take a screenshot", "boot the emulator", "install the app", "read UI hierarchy", "manage device state", "open a deep link", "grant permissions", "stream native logs", "disable animations", "change device locale", or needs guidance on xcrun…
rn-best-practices
This skill should be used when writing or reviewing React Native / Expo code — before writing list rendering, animations, data fetching, component APIs, navigation, or image/media UI — and when asked to "review best practices", "check performance", "optimize renders", "review list rendering", "check animation…
xterm-js
Expert guidance for building, configuring, and integrating xterm.js terminal emulators in web and Electron applications. Use this skill whenever the user mentions xterm, xterm.js, @xterm/xterm, terminal emulator in the browser, web terminal, WebSSH, in-browser shell, or asks about addons like FitAddon, WebglAddon…
html-effectiveness
Generate self-contained, interactive HTML documents instead of markdown walls of text. When output is complex (comparisons, timelines, multi-option decisions, data tables, code reviews, diagrams), produce a single .html file that renders spatially and interactively in the browser. Zero dependencies, zero build steps.…
excalidraw-visual-designer
Create and revise editable visual drawings directly in the Excalidraw website through the in-app browser. Use when the user asks Codex to draw in Excalidraw or update an Excalidraw canvas, including diagrams, flowcharts, architecture sketches, process maps, infographics, teaching visuals, product explanation graphics…