Agent skill

Record E2E Gif

Record Playwright e2e tests as one GIF per test case (video → ffmpeg palette GIF) and return a markdown table for a PR description.

LGPL-3.0Auto-check: notesTesting & QA

Install Record E2E Gif

skills CLI

$ npx skills add lablup/backend.ai-webui --skill record-e2e-gif -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install lablup/backend.ai-webui record-e2e-gif --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/lablup/backend.ai-webui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/record-e2e-gif .claude/skills/record-e2e-gif && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "record-e2e-gif" agent skill from https://github.com/lablup/backend.ai-webui/tree/main/.claude/skills/record-e2e-gif into .claude/skills/record-e2e-gif/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "record-e2e-gif", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/lablup/backend.ai-webui/tree/main/.claude/skills/record-e2e-gif

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add lablup/backend.ai-webui --skill record-e2e-gif -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install lablup/backend.ai-webui record-e2e-gif --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/lablup/backend.ai-webui.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/record-e2e-gif .agents/skills/record-e2e-gif && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "record-e2e-gif" agent skill from https://github.com/lablup/backend.ai-webui/tree/main/.claude/skills/record-e2e-gif into .agents/skills/record-e2e-gif/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "record-e2e-gif", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add lablup/backend.ai-webui --skill record-e2e-gif -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install lablup/backend.ai-webui record-e2e-gif --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/lablup/backend.ai-webui.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/record-e2e-gif .cursor/skills/record-e2e-gif && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "record-e2e-gif" agent skill from https://github.com/lablup/backend.ai-webui/tree/main/.claude/skills/record-e2e-gif into .cursor/skills/record-e2e-gif/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "record-e2e-gif", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/lablup/backend.ai-webui.git --path .claude/skills/record-e2e-gif

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add lablup/backend.ai-webui --skill record-e2e-gif -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install lablup/backend.ai-webui record-e2e-gif --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/lablup/backend.ai-webui.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/record-e2e-gif .gemini/skills/record-e2e-gif && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "record-e2e-gif" agent skill from https://github.com/lablup/backend.ai-webui/tree/main/.claude/skills/record-e2e-gif into .gemini/skills/record-e2e-gif/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "record-e2e-gif", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install lablup/backend.ai-webui record-e2e-gif

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add lablup/backend.ai-webui --skill record-e2e-gif -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/lablup/backend.ai-webui.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/record-e2e-gif .github/skills/record-e2e-gif && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "record-e2e-gif" agent skill from https://github.com/lablup/backend.ai-webui/tree/main/.claude/skills/record-e2e-gif into .github/skills/record-e2e-gif/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "record-e2e-gif", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add lablup/backend.ai-webui --skill record-e2e-gif -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install lablup/backend.ai-webui record-e2e-gif --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/lablup/backend.ai-webui.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/record-e2e-gif .opencode/skills/record-e2e-gif && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "record-e2e-gif" agent skill from https://github.com/lablup/backend.ai-webui/tree/main/.claude/skills/record-e2e-gif into .opencode/skills/record-e2e-gif/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "record-e2e-gif", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: record-e2e-gif
GitHub stars: 133
Token cost: ~907 tokens
SKILL.md length: 385 words
Files: 1
Skills in repo: 13
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: LGPL-3.0

At a glance

Record Playwright e2e tests as one GIF per test case (video → ffmpeg palette GIF) and return a markdown table for a PR description.

Works in 4 steps: Run specified Playwright tests with… → For each .webm file, convert to .gif… → Save GIFs to e2e/recordings/{spec-name}/… → …
The user wants e2e runs recorded as GIFs
SKILL.md covers Prerequisites, How It Works, Usage and Recording Command, plus 4 more sections
Calls pnpm and ffmpeg; reaches github.com

What it does

Record E2E Gif is an agent skill from lablup/backend.ai-webui. Record Playwright e2e tests as one GIF per test case (video → ffmpeg palette GIF) and return a markdown table for a PR description. Use when the user wants e2e runs recorded as GIFs or attached to a PR.

Its SKILL.md is about 910 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Testing & QA, covering End-to-end testing, Browser testing and Video production. It works with Playwright, FFmpeg, GitHub and Model Context Protocol. The repository describes itself as: Backend.AI Web UI for web / desktop app (Windows/Linux/macOS). Backend.AI Web UI provides a convenient environment for users, while allowing various commands to be executed… The licence is LGPL-3.0.

When your agent uses it

The user wants e2e runs recorded as GIFs
Attached to a PR

Example prompts

“/record-e2e-gif”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

Run specified Playwright tests with --video=on (Playwright saves .webm per test in test-results/)
For each .webm file, convert to .gif using ffmpeg with palette optimization
Save GIFs to e2e/recordings/{spec-name}/ directory
Return a map of test name → GIF file path

What it can do on your machine

Read from SKILL.md and the folder at commit 10554dc. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- pnpm
- ffmpeg
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- github.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Record E2E Gif loads about 907 tokens when it runs. Until then it costs about 54 tokens; SKILL.md has 385 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~54
When it runs · the whole SKILL.md, loaded when a task matches: ~907

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

NoteMentions a .env fileSKILL.md:16

ing. The endpoint is read from `e2e/envs/.env.playwright` (`E2E_WEBUI_ENDPOINT`). Do NOT hardcode the port — it varies p

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from lablup/backend.ai-webui at commit 10554dc, republished under its LGPL-3.0 licence (© lablup). 385 words, ~907 tokens.

Download SKILL.mdSave it as .claude/skills/record-e2e-gif/SKILL.md (or your agent's skills folder).

name: record-e2e-gif
description: Record Playwright e2e tests as one GIF per test case (video → ffmpeg palette GIF) and return a markdown table for a PR description. Use when the user wants e2e runs recorded as GIFs or attached to a PR.

record-e2e-gif Skill

Record Playwright e2e tests as GIF animations, one GIF per test case.

Prerequisites

ffmpeg must be on PATH (command -v ffmpeg)
Playwright dev server must be running. The endpoint is read from e2e/envs/.env.playwright (E2E_WEBUI_ENDPOINT). Do NOT hardcode the port — it varies per environment.

How It Works

Run specified Playwright tests with --video=on (Playwright saves .webm per test in test-results/)
For each .webm file, convert to .gif using ffmpeg with palette optimization
Save GIFs to e2e/recordings/{spec-name}/ directory
Return a map of test name → GIF file path

Usage

When invoked, ask for or accept:

testFile: path to the spec file (e.g. e2e/environment/environment.spec.ts)
grep: optional test name pattern to filter (e.g. BAIPropertyFilter)
project: browser project, default chromium
outputDir: output directory for GIFs, default e2e/recordings

Recording Command

bash

pnpm exec playwright test {testFile} --grep "{grep}" --project={project} \
  --video=on --reporter=list 2>&1

Videos are saved to test-results/*/video.webm (one directory per test).

Conversion Command (per video)

bash

ffmpeg -y \
  -i "{input.webm}" \
  -vf "fps=8,scale=960:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=128[p];[s1][p]paletteuse=dither=bayer" \
  -loop 0 \
  "{output.gif}"

fps=8: 8 frames per second (smooth enough, small file size)
scale=960:-1: 960px wide, height auto
palettegen/paletteuse: two-pass palette for high quality GIF

Finding Test Name from Directory

Playwright names test result directories as: {spec-dir}-{describe-name}-{test-name}-{project}/

Parse the directory name to derive a slug for the GIF filename:

Strip the browser suffix (-chromium)
Replace spaces and special chars with -
Truncate to 60 chars

Show full SKILL.md (182 more words)Show less

Uploading GIFs to GitHub PR

GIFs stay out of git (e2e/recordings/ is in .gitignore). Upload them through the PR page's own attachment control via Chrome DevTools MCP — that is what yields github.com/user-attachments CDN URLs; gh and release assets do not. The GIF table goes in the PR body, not a comment.

The workflow:

Navigate to the PR page via mcp__chrome-devtools__navigate_page
Enter edit mode on the PR body (click "Show options" → "Edit comment")
Upload GIFs via the "Attach files" button (mcp__chrome-devtools__upload_file) to get CDN URLs
Extract CDN URLs (github.com/user-attachments/assets/...) from the textarea
If uploads went to the comment textarea, extract URLs and clear it
Set the PR body textarea content (preserve existing body + append GIF table) using nativeInputValueSetter
Submit via the "Update comment" button on the PR body form

This produces persistent GitHub CDN URLs that render correctly in markdown. The user must be logged into GitHub in Chrome for this to work.

See .claude/agents/playwright-e2e-pr-updater.md for the full step-by-step Chrome DevTools upload workflow.

Output Format

Return a markdown table suitable for embedding in a PR description:

markdown

| Test | Recording |
|------|-----------|
| Admin can see the BAIPropertyFilter | ![](https://github.com/user-attachments/assets/{uuid}) |
| Admin can filter by name | ![](https://github.com/user-attachments/assets/{uuid}) |

Files

Just SKILL.md in .claude/skills/record-e2e-gif of lablup/backend.ai-webui.

Open the folder on GitHubat commit 10554dc

Compare with similar skills

Record E2E Gif next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Record E2E Gif compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Record E2E Gif this skilllablup/backend.ai-webui	133	—	~907	Automated safety check: Notes	LGPL-3.0	today
Dev Issuehmislk/hmis	236	—	~5k	Automated safety check: Pass	GPL-3.0	today
Browser Video Recordingnirholas/three.ws	226	1 repos	~1.5k	Automated safety check: Pass	Apache-2.0	today
Specialist Integration Test GeneratorHoangNguyen0403/agent-skills-standard	570	—	~525	Automated safety check: Pass	MIT	yesterday
QA FrontendPostHog/posthog-foss	721	—	~5.9k	Automated safety check: Notes	MIT	today
Code Reviewnteract/semiotic	2.7k	—	~1.5k	Automated safety check: Pass	Apache-2.0	today

Similar skills

Dev Issue
hmislk/hmis
Run a GitHub issue through its full lifecycle end-to-end: investigate, discuss the approach, gather test context (department/data), implement, rebuild + local redeploy, verify with Playwright and…
236 GitHub stars~5k tokensUpdated today
Testing & QAAuto-check passed
Browser Video Recording
nirholas/three.ws
Create polished 60 fps 4:3 4K browser screen-recording style videos from Codex in-app browser captures, with browser-only crop, natural macOS cursor styling, deliberate click choreography…
226 GitHub starsUsed in 1 repo~1.5k tokens
Media & CreativeAuto-check passed
Specialist Integration Test Generator
HoangNguyen0403/agent-skills-standard
Generates one integration/E2E test from an approved test case spec using existing project patterns.
570 GitHub stars~525 tokensUpdated yesterday
Testing & QAAuto-check passed
QA Frontend
PostHog/posthog-foss
Official
Internal PostHog developer frontend/browser QA skill. An agent skill from PostHog/posthog-foss.
721 GitHub stars~5.9k tokensUpdated today
DevelopmentAuto-check: notes
Code Review
nteract/semiotic
Review Semiotic pull requests for behavioral bugs, regressions, contract drift, and missing evidence.
2.7k GitHub stars~1.5k tokensUpdated today
DevelopmentAuto-check passed
Demo Video
hmislk/hmis
A skill your agent uses when asked to make a demo, training, how-to or tutorial video with sound or voice-over showing an HMIS function or configuration (e.g.
236 GitHub stars~3.9k tokensUpdated today
Testing & QAAuto-check passed

More from lablup/backend.ai-webui

All 13 skills in this repo

Walkthrough
lablup/backend.ai-webui
Mint a walkthrough for the PR this session just implemented: a set of numbered stops a reviewer opens in the live dev server, each one marking an element on screen with what changed and what to check.
133 GitHub stars~4.9k tokensUpdated today
Auto-check: notes
Docs Lead
lablup/backend.ai-webui
A skill your agent uses whenever the user mentions docs, the manual, documentation, terminology, translations, or screenshots — including indirect mentions like "이 PR 문서 영향 봐줘", "문서 점검", "용어 통일"…
133 GitHub stars~2.9k tokensUpdated today
Auto-check passed
Backend AI Guide
lablup/backend.ai-webui
Expert guide for Backend.AI distributed computing platform. An agent skill from lablup/backend.ai-webui.
133 GitHub starsUsed in 1 repo~1.8k tokens
Auto-check passed
Dev Server
lablup/backend.ai-webui
Start the project's development server (pnpm dev for backend.ai-webui; discovered from README/package.json elsewhere), deriving the header color, app name, default backend endpoint and login…
133 GitHub stars~6.9k tokensUpdated today
Auto-check: notes
Relay Mutation Store Updates
lablup/backend.ai-webui
A skill your agent uses when writing if (success) updateFetchKey(), an onRequestClose handler, or any refetch after a mutation; when a setting modal handles both create and update behind one…
133 GitHub stars~2.8k tokensUpdated today
Auto-check passed
Release Train Prep
lablup/backend.ai-webui
Post a Korean release risk digest to a Microsoft Teams thread, grouped by risk category.
133 GitHub stars~5k tokensUpdated today
Auto-check passed

Works with

Questions about Record E2E Gif

What does Record E2E Gif do?

Record Playwright e2e tests as one GIF per test case (video → ffmpeg palette GIF) and return a markdown table for a PR description. ai-webui. Record Playwright e2e tests as one GIF per test case (video → ffmpeg palette GIF) and return a markdown table for a PR description.

When should I use Record E2E Gif?

Record E2E Gif fits situations like: the user wants e2e runs recorded as GIFs; attached to a PR.

How do I install Record E2E Gif in Claude Code?

Run `npx skills add lablup/backend.ai-webui --skill record-e2e-gif -a claude-code`. Or copy the skill folder (.claude/skills/record-e2e-gif in lablup/backend.ai-webui) into .claude/skills/record-e2e-gif in your project. Claude Code loads it when a task matches its description.

How do I install Record E2E Gif in Codex?

Run `npx skills add lablup/backend.ai-webui --skill record-e2e-gif -a codex`. Or copy the skill folder (.claude/skills/record-e2e-gif in lablup/backend.ai-webui) into .agents/skills/record-e2e-gif in your project. Codex loads it when a task matches its description.

Can I use Record E2E Gif in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add lablup/backend.ai-webui --skill record-e2e-gif -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/record-e2e-gif, .gemini/skills/record-e2e-gif, .github/skills/record-e2e-gif and .opencode/skills/record-e2e-gif in your project.

What does Record E2E Gif need to run?

Going by SKILL.md and its folder, Record E2E Gif needs the command-line tools its instructions call (pnpm and ffmpeg).

Does Record E2E Gif access the network?

SKILL.md names 1 domain. In commands or code: github.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Record E2E Gif safe to install?

Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Record E2E Gif use?

Record E2E Gif is published under the LGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Record E2E Gif use?

About 907 tokens (SKILL.md is roughly 3.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Record E2E Gif?

Skills that share tags, products or a category with Record E2E Gif: Dev Issue (hmislk/hmis, 236 stars), Browser Video Recording (nirholas/three.ws, 226 stars), Specialist Integration Test Generator (HoangNguyen0403/agent-skills-standard, 570 stars) and QA Frontend (PostHog/posthog-foss, 721 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Record E2E Gif?

lablup (a GitHub organization) maintains it in lablup/backend.ai-webui, which has 133 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on October 7, 2026.

Source: lablup/backend.ai-webui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Record E2E Gif

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

record-e2e-gif Skill

Prerequisites

How It Works

Usage

Recording Command

Conversion Command (per video)

Finding Test Name from Directory

Uploading GIFs to GitHub PR

Output Format

Files

Compare with similar skills

Similar skills

More from lablup/backend.ai-webui

Related

Questions about Record E2E Gif