CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

record-browser-gif

Record browser or Web UI interaction demos as optimized GIFs using the available built-in browser, state-based frame capture, and deterministic encoding, then publish to a dedicated assets branch when the task includes attaching the GIF to a pull request. Use when asked to make, record, or generate a GIF that demonstrates a browser workflow, and for every pull request that changes product-user-visible GUI behavior, which MUST include a GIF recorded from the pull request's real server and model flow.

Quality

94%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

96%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

An exceptionally well-written operational skill: every step is executable, validation checkpoints are explicit at every risky boundary (capture, encode, push, PR-body edit), and the prose carries hard-won gotchas with zero padding. The only structural weakness is the single out-of-bundle reference and the lack of a references/ split for the long publication workflow.

Suggestions

Copy or summarize the evidence-chain rationale into a references/ file inside the skill bundle instead of linking to ../../notes/..., so the reference resolves wherever the skill is installed.

Consider moving the assets-branch publication workflow (the two clone recipes plus verification steps) into a references/publishing.md, leaving SKILL.md a lean overview with a one-line pointer — it would shorten the always-loaded body while keeping the conditional step discoverable.

DimensionReasoningScore

Conciseness

The ~107-line body is dense with non-obvious operational gotchas Claude would not otherwise know — "an inline GIF_SKILL_DIR=... python3 assignment fails, because the argument expands before the assignment takes effect", "State polled across separate tool calls is lost, because the turn settles between calls", "a broad pkill -f pattern can match and kill the shell that launched it — including your own". There is no padding and no explanation of concepts Claude already knows; the few rationale clauses exist to justify rules the model might otherwise skip. This matches the 'lean and efficient; every token earns its place' anchor rather than the 4 anchor's 'minor instances of over-explanation'.

5 / 5

Actionability

Fully executable guidance throughout: `git rev-parse HEAD`, `pnpm run build && pnpm run build:web`, `mkdir -p .playwright-mcp/gif-frames-<label>`, a complete encoder invocation with all flags (verified against scripts/encode_gif.py, which accepts --durations/--fps/--max-width/--colors/--max-bytes/--force exactly as documented), the git clone/commit/push publication sequence, and the `?raw=true` embed template. Common cases are covered with copy-paste-ready commands, matching the top anchor.

5 / 5

Workflow Clarity

The five stages (Stage → Record → Encode → Verify → Publish) are clearly sequenced with exceptional validation checkpoints: read the encoder's JSON summary, visually inspect the encoded GIF (with an ffmpeg fallback if only the first frame renders), `git status --short` to confirm ignored paths, authenticated remote verification of checksum/200/image/gif, and re-reading the PR head before and after the body edit with an explicit stop-and-rerecord loop. Feedback loops for failure ("If capture automation fails, discard its frames and rerun from fresh roots") are present, matching the top anchor; the destructive-operation cap does not apply because validation is abundant.

5 / 5

Progressive Disclosure

Structure is good: clear section headers, the encoder script is a real bundle file invoked by absolute path, and the one external reference ("The [evidence-chain decision](../../notes/implemented/process/2026-08-08-browser-gif-evidence-chain.md) owns why...") is clearly signaled and one level deep. However, that reference points two directories above the skill and is not part of the bundle, so it may dangle if the skill is relocated, and the publication section (~30 lines of branching workflow) is substantial enough that it could live in a references/ file. This fits the 'good structure; minor organization gaps' anchor rather than the ideal split at 5.

4 / 5

Total

19

/

20

Passed

Description

92%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description: concrete capability list, explicit dual triggers (direct GIF requests and any GUI-behavior-changing pull request), third-person voice, and a distinct niche. The only gap is coverage of natural synonyms like "screencast" or "screen recording" that users might say instead of "GIF".

Suggestions

Add natural synonyms to the trigger clause, e.g. "Use when asked to make, record, generate, or screencast a GIF or screen recording that demonstrates a browser or Web UI workflow".

Consider mentioning the frame-capture vocabulary users may use ("capture UI states", "demo the flow") so the skill triggers on phrasings that never say "GIF".

DimensionReasoningScore

Specificity

"Record browser or Web UI interaction demos as optimized GIFs", "state-based frame capture, and deterministic encoding", and "publish to a dedicated assets branch" name multiple concrete, distinct actions covering the full record-to-publish pipeline. This matches the anchor for multiple specific concrete actions with comprehensive coverage; not score 4 because no meaningful capability of the skill is left unnamed.

5 / 5

Completeness

The 'what' is explicit (record demos as optimized GIFs, publish to an assets branch) and the 'when' is explicit with concrete trigger phrases ("Use when asked to make, record, or generate a GIF that demonstrates a browser workflow, and for every pull request that changes product-user-visible GUI behavior"). Both questions are answered clearly and with trigger phrases, matching the top anchor; the 4 anchor's 'when could be more explicit' does not apply.

5 / 5

Trigger Term Quality

"Use when asked to make, record, or generate a GIF that demonstrates a browser workflow" covers the natural verb and noun variants (make/record/generate, GIF, browser workflow). Common synonyms a user might naturally say — "screencast", "screen recording", "demo video", "capture a demo" — are missing, which fits the 'good keyword coverage; a few natural terms missing' anchor rather than the comprehensive-synonym anchor at 5.

4 / 5

Distinctiveness Conflict Risk

The niche is clear — recording browser-interaction demo GIFs and attaching them to pull requests — and triggers (GIF, browser workflow demo, GUI-behavior-changing PR) are distinct from generic browser-automation or screenshot skills. Minor adjacency to a browser-control skill exists but the GIF/demo framing is unambiguous, fitting the 'clear niche with distinct triggers' anchor.

5 / 5

Total

19

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 1 suspicious

Warning

Total

15

/

16

Passed

Repository

river666/deepseek-harness-enterprise

Path

.agents/skills/record-browser-gif/SKILL.md

Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.