CtrlK
BlogDocsLog inGet started
Tessl Logo

screen-recorder

Records short videos of specific page sections using Playwright's `recordVideo` API, plays scripted interactions (hover, click, focus, scroll, keypress), crops the output to a target element via `ffmpeg`, and saves a `.webm` (or `.mp4` / `.gif`) artifact to `.agent/recordings/`. Use when a still screenshot cannot prove the change — verifying a View Transition, a Motion `layout` morph, a hover stagger, a scroll-driven timeline, an `@starting-style` entry, or any multi-frame interaction. Called by the `animations` skill to validate a generated animation, by the `ux` skill to capture an interaction the `pr-reviewer` cannot read from code, and by the `pr-reviewer` agent to produce a local clip it can inspect on motion-heavy diffs. Triggers on "record this interaction", "capture this animation", "video of this section", "validate the transition visually", "screen recording", "/screen-recorder".

72

Quality

91%

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

81%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.

A well-engineered, phase-gated workflow with explicit validation checkpoints, a mandatory preflight gate, and disciplined on-demand loading — the process design is about as clear as the rubric's top anchor. The deductions are localized: duplicated analyser-sizing rationale costs conciseness, the core script/crop commands live in delegated files that are absent from the provided bundle, and that same absence leaves the otherwise excellent reference structure unverifiable.

Suggestions

State the analyser-optimised sizing rationale (768 px, ~786 tokens/frame, 0.5 s GOP) once — either in the Phase 1 input table or the Phase 4 paragraph — and link to `rules/cropping.md#analyser-optimised-sizing` for the numbers instead of repeating them.

Inline a minimal runnable `record.mjs` skeleton (launch, context with recordVideo, one interaction, context.close, print VIDEO=path) and the exact ffmpeg crop command, so the core path is executable before loading the template and rules files.

The linked bundle files (`rules/*.md`, `templates/record.mjs.template`) are missing from the skill directory — ship them with the skill (or fix the paths) so the 'Required Reading by Phase' table's references resolve.

DimensionReasoningScore

Conciseness

The body is dense and assumes competence (tables, one-line anti-patterns, hard rules), but the video-analyser sizing rationale is stated twice — "768 px is the ... Pareto knee — UI text stays legible, image tokens stay cheap (~786 tokens/frame on Sonnet)" in the Phase 1 table and again the "Net effect: 768 px wide ... ~786 image tokens/frame ... short GOP" paragraph in Phase 4 — and the caller-override/GOP reasoning repeats detail already delegated to `rules/cropping.md`. This is anchor 4 ('efficient; minor instances of over-explanation that could be trimmed') rather than anchor 5, whose 'every token earns its place' is violated by the duplicated rationale.

4 / 5

Actionability

Mostly executable: the preflight checks, `node .agent/recordings/<slug>/record.mjs` run command, exact API constraints (`chromium.launch({ headless: true })`, `recordVideo: { dir, size: viewport }` on the context, `await context.close()` before reading the path), and the delivery-summary template are all concrete and runnable. However the two core generative artifacts — the recording script's contents (delegated to `templates/record.mjs.template`) and the ffmpeg crop command (delegated to `rules/cropping.md`) — are not present, so the common case cannot be executed from the body alone; this fits anchor 4's 'concrete code or commands with minor gaps' rather than anchor 5's copy-paste-ready coverage.

4 / 5

Workflow Clarity

The phase pipeline (0 preflight gate → 1 inputs → 2 script generation → 3 run → 4 crop → 5 deliver → 6 integration) is explicitly sequenced with validation throughout: a mandatory preflight decision table that halts on missing tools, "On non-zero exit, do not crop — surface the error and stop", resolving the output via the script's printed `VIDEO=<path>`, and a Definition of Done checklist verifying exit code, file size, bbox.json, and delivery. This matches anchor 5 (explicit validation steps, error-recovery direction, checklist) and exceeds anchor 4, which tolerates missing checkpoints — none are missing here, and the operation is neither destructive nor batch, so no cap applies.

5 / 5

Progressive Disclosure

Structure is textbook: the body declares itself a thin index, every detail file is one level deep with per-context links, and a 'Required Reading by Phase' table maps exactly which files to load per phase with 'load on demand — do not preload'. The gap is that the referenced bundle files (`rules/preflight.md`, `rules/cropping.md`, `templates/record.mjs.template`, etc.) are not present alongside SKILL.md in this bundle, so the links cannot be verified to resolve; anchor 4's 'references mostly clear; minor organization gaps' fits, while anchor 5 would require the split to be verifiably complete.

4 / 5

Total

17

/

20

Passed

Description

100%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.

An exemplary description: third-person, specific to the exact API and artifact, with an explicit 'Use when' clause and a list of natural trigger phrases that cleanly separate it from sibling screenshot/analysis skills. Its only cost is length, but every clause carries information — there is no fluff to trim.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions with comprehensive coverage: "Records short videos of specific page sections using Playwright's `recordVideo` API, plays scripted interactions (hover, click, focus, scroll, keypress), crops the output to a target element via `ffmpeg`, and saves a `.webm` (or `.mp4` / `.gif`) artifact to `.agent/recordings/`". This matches the anchor-5 example's breadth (multiple specific actions naming the exact API, the transformations, and the output formats) and is clearly above anchor 4, which expects only minor gaps in coverage — no capability listed here is generic or unstated.

5 / 5

Completeness

Both halves are explicit: the 'what' is the enumerated record/interact/crop/save pipeline, and the 'when' is a literal "Use when a still screenshot cannot prove the change — verifying a View Transition, a Motion `layout` morph, ... or any multi-frame interaction" clause followed by concrete trigger phrases. This is a direct match for the anchor-5 example (what + when + concrete triggers) and clearly above anchor 4, whose 'when' is less explicit.

5 / 5

Trigger Term Quality

It closes with an explicit, natural trigger list — "record this interaction", "capture this animation", "video of this section", "validate the transition visually", "screen recording", "/screen-recorder" — plus scenario keywords users would quote (View Transition, hover stagger, scroll-driven timeline, multi-frame interaction). These are phrases a user would naturally say, covering verb synonyms (record/capture/validate) and noun synonyms (video/animation/recording/section), meeting anchor 5's comprehensive-synonyms bar rather than anchor 4's 'a few natural terms missing'.

5 / 5

Distinctiveness Conflict Risk

The description carves out a clear niche — video evidence of page-section motion, positioned against still screenshots ("when a still screenshot cannot prove the change") — and names its distinct callers (`animations`, `ux`, `pr-reviewer`), so it is unlikely to fire for a screenshot, e2e-test, or trace-analysis skill. Triggers like "screen recording" and "video of this section" are specific to this niche, matching anchor 5's 'clear niche with distinct triggers; minimal conflict risk' rather than anchor 4's residual overlap with closely related skills.

5 / 5

Total

20

/

20

Passed

Validation

87%

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

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_field

'metadata' should map string keys to string values

Warning

relative_links

Relative link issues: 24 missing, 2 suspicious

Warning

Total

14

/

16

Passed

Repository
mthines/agent-skills
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.