record-browser-gif

A skill for recording short browser or web-interface demonstrations as optimized GIF files.

In plain words
What is it for?
It helps capture browser interactions, encode them consistently, and publish the GIF to a dedicated assets branch when attaching it to a pull request.
Why use it?
It creates a truthful, repeatable visual record of user-visible interface changes and connects the recording to the exact code version that produced it.

Skill for Claude CodeCodex

Install

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.

agentmods
npx agentmods add skills/whitelonng/dshcode/record-browser-gif
Any agent
npx skills add whitelonng/dshcode --skill record-browser-gif
Clone the repo
git clone --depth 1 https://github.com/whitelonng/dshcode

Made for: Claude Code, Codex.

Per session 99 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,534 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin 100% copy Near-identical to another mod in the catalogue.
Token cost

What 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.

ModelPer sessionOnce invoked
Fable 5 $0.00099 $0.02534
Opus 5 $0.00049 $0.01267
Sonnet 5 $0.00020 $0.00507
Haiku 4.5 $0.00010 $0.00253

Measured yesterday against content hash d0fd6fca1ef8, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

record-browser-gif 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.

The scan reads SKILL.md. This mod also ships 1 executable file (scripts/encode_gif.py), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

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.

Origin

This is a copy

100% identical to record-browser-gif — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

.agents/skills/record-browser-gif/SKILL.md · 111 lines

How it starts

The opening of the file, as written. The whole thing — 111 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Record Browser GIF

Produce a short, truthful UI demonstration as a local GIF, and — only when the task includes attaching it to a pull request — publish it through the assets-branch workflow at the end of this skill. Use the browser-control skill for interaction and the bundled encoder for repeatable timing, dimensions, and size.

The evidence-chain decision owns why one storyboard comes from one isolated run and why publication revalidates both the artifact and the demonstrated pull-request head.

Every GUI pull request includes a GIF

A pull request that changes product-user-visible GUI behavior MUST include a demonstration GIF recorded with this skill and embedded in the pull request body via the assets-branch workflow.

The recording itself is part of the evidence: use a real server booted from that pull request's branch tree, a real API key, and real model rounds. Never substitute fixture queries, mock transports, synthetic event injection, or test-only hooks unless the user explicitly asked for a fixture recording. Next to the embed, state the exact demonstrated commit SHA, the tree and origin that served it, any mode flags or browser-state exceptions, and whether a real model round ran, so reviewers know exactly what the recording proves.

Keep recording separate from publication

  • Recording produces frame images and one local .gif artifact only; it never mutates remote state.
  • Publication — pushing the GIF to an assets branch and embedding it in a pull request body — is the separate final step, performed only when the task includes attaching the GIF to a pull request. It never touches the pull request's own branch.
  • Preserve the requested recording conditions. A real-server or real-API demo must not use fixture queries, mock transports, synthetic event injection, or test-only hooks. If credentials or the server are unavailable, report that limitation instead of substituting a fixture.
  • Never read or expose credential values. Use the application's normal configuration path and a benign demonstration prompt.

Read the full file on GitHub · 111 lines

Files

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.

Changes

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.

  1. yesterday First seen · 111 lines · 99 tokens per session scan A d0fd6fca1ef8

Subscribe to this mod's changes

record-browser-gif is a skill published in the GitHub repository whitelonng/dshcode (553 stars, last pushed 2d ago), licensed MIT. It adds 99 tokens to every session and 2,534 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to record-browser-gif, differing in 0 lines, and is treated as a copy.

Related

Other skills, from other repositories

visionary-cli

Analyze images with DeepSeek's vision model via the visionary-server CLI. Use this whenever the user provides an image, photo, screenshot, or document with images - run vision to look at it rather than guessing.

xlight/deepseek-visionary · 46 tokens

deepseek-harness

Use when building AI agent applications with a plugin-based architecture — Web UI, CLI, Python SDK, Cordis plugin system, multi-model orchestration. DeepSeek Harness (dsh): open-source agent harness by DeepSeek AI where everything is a plugin, powered by Cordis for spatiotemporal composability.

znlgis/opengis-skills · 68 tokens

deepseek-harness

Use this skill whenever the user wants to call DeepSeek V4-Pro / V4-Flash (or its legacy aliases deepseek-chat / deepseek-reasoner), or you see code that imports from openai import OpenAI with baseurl="https://api.deepseek.com". This skill teaches you the 10 protocol contract rules required to avoid the 16 documented…

HenryZ838978/deepseek-harness · 144 tokens

web-ui-motion

Build polished front-end UI together with a signature motion effect in a single self-contained HTML file, combining SVG.js / SVG filters and the Canvas 2D API. Use when the user asks to build a web page, landing page, dashboard, or component that has a special visual effect, animation, particle system, fluid/water…

creativedswork/dscode · 152 tokens

openspec-propose

Create a complete OpenSpec proposal with design, specs, prototype, and tasks. Use when the user wants a change ready for implementation.

creativedswork/dscode · 32 tokens

prototype-workflow

Generate and lifecycle-manage HTML prototypes for UI exploration and OpenSpec changes. Use when creating, validating, completing, or archiving a UI prototype.

creativedswork/dscode · 34 tokens