New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Localframe

by koolamusic in koolamusic/claudefiles

Record silent product demos on this machine: a paced Playwright browser walkthrough of a web app or docs site, or a scripted asciinema terminal session against an API, rendered to mp4 with numbered…

MITAuto-check passedTesting & QA

Install Localframe

skills CLI
$ npx skills add koolamusic/claudefiles --skill localframe -a claude-code

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

GitHub CLI
$ gh skill install koolamusic/claudefiles localframe --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/koolamusic/claudefiles.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/localframe .claude/skills/localframe && 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/

Facts

Skill name
localframe
GitHub stars
130
Token cost
~2.1k tokens
SKILL.md length
1,020 words
Files
5 (incl. scripts)
Skills in repo
15
Repo updated
First seen
Licence
MIT

At a glance

Record silent product demos on this machine: a paced Playwright browser walkthrough of a web app or docs site, or a scripted asciinema terminal session against an API, rendered to mp4 with numbered…

  • Works in 5 steps: Run… → Create a demo key for this take. Never… → Dry-run every command. For a terminal… → …
  • The user says record a demo of X
  • SKILL.md covers Take layout, Pre-flight, Browser take and Terminal take, plus 4 more sections
  • Runs Shell and JavaScript scripts from its folder; calls npm, npx and node; needs DEMO_KEY

What it does

Localframe is an agent skill from koolamusic/claudefiles. Record silent product demos on this machine: a paced Playwright browser walkthrough of a web app or docs site, or a scripted asciinema terminal session against an API, rendered to mp4 with numbered stills, a listing paragraph, and the shot list committed beside it. Gated so nothing is published until the demo key is revoked and the artefacts grep clean. Use when the user says 'record a demo of X', 'make a walkthrough video', 'screen-record the app', 'record a terminal demo of the API', 'shoot a take', or asks to…

Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including scripts (for example `scripts/doctor.sh`, `scripts/postflight.sh` and `templates/demo.sh`).

It sits in Testing & QA, covering Static sites and blogs and Browser testing. It works with Playwright. The repository describes itself as: A minimal catalog of my favourite skills for working with claude. The licence is MIT.

When your agent uses it

  • The user says record a demo of X
  • Make a walkthrough video
  • Screen-record the app
  • Record a terminal demo of the API

Example prompts

  • “record a demo of X”
  • “make a walkthrough video”
  • “screen-record the app”
  • “/localframe”

Requirements

  • Node.js
  • A Bash shell
  • A credential in DEMO_KEY

Workflow steps

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

  1. Run ~/.claude/skills/localframe/scripts/doctor.sh browser or terminal from the take directory. Install what it reports missing. Its hints…
  2. Create a demo key for this take. Never load a production key or a shared key into a recorded session. Give anything the walkthrough…
  3. Dry-run every command. For a terminal take, run bash demo.sh until every curl | jq line works against a real response. A jq filter written…
  4. Count the requests the shot list makes and keep them under the API's per-minute quota, so a retake doesn't hit a 429 mid-scene.
  5. Create the scratch directory with mkdir -m 700 .take (the browser template also creates it), and add .take/ to the repository's .gitignore…

What it can do on your machine

Read from SKILL.md and the folder at commit 8a20283. 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

    Ships 2 files in scripts/ (Shell and JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • npm
    • npx
    • node
    • ffmpeg
    • bash
    • curl
    • jq

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, npx and curl, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • DEMO_KEY

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Localframe loads about 2.1k tokens when it runs. Until then it costs about 138 tokens; SKILL.md has 1,020 words of instructions outside code blocks.

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

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 passed

The automated check found no risky patterns in SKILL.md.

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); the scripts in this folder are not scanned.

SKILL.md

The full file from koolamusic/claudefiles at commit 8a20283, republished under its MIT licence (© koolamusic). 1,020 words, ~2,055 tokens.

Download SKILL.mdSave it as .claude/skills/localframe/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
localframe
description
Record silent product demos on this machine: a paced Playwright browser walkthrough of a web app or docs site, or a scripted asciinema terminal session against an API, rendered to mp4 with numbered stills, a listing paragraph, and the shot list committed beside it. Gated so nothing is published until the demo key is revoked and the artefacts grep clean. Use when the user says 'record a demo of X', 'make a walkthrough video', 'screen-record the app', 'record a terminal demo of the API', 'shoot a take', or asks to retake or publish one.

Localframe

Two kinds of take, one method:

  • Browser: Playwright drives headless Chromium at 1440×900 through a paced walkthrough and records it.
  • Terminal: a shell shot list types each command, runs it for real, and asciinema records the session.

The owner narrates over the result or uploads it as is. Takes are silent.

Templates and scripts live beside this file, deployed at ~/.claude/skills/localframe/. Call scripts by that full path and run them from the take directory:

FileUse
templates/walkthrough.mjsbrowser shot list with pause, shot, typeSlow, scrollSlow, waitFile
templates/demo.shterminal shot list with type_line, run, comment
~/.claude/skills/localframe/scripts/doctor.sh [browser|terminal]pre-flight tool check; installs nothing
~/.claude/skills/localframe/scripts/postflight.sh <take> ['<revoke check>']the publish gate; exits 1 on any failure

Copy a template into the take and edit it for the product. Don't build a shared library around it. Every product needs a different script.

Take layout

<take>/
  walkthrough.mjs | demo.sh     shot list, committed so the take can be reproduced
  walkthrough.mp4 | demo.mp4    the video
  raw/walkthrough.webm          browser original
  demo.cast, demo.gif           terminal originals
  01-sign-in.png 02-overview.png ...   one numbered still per screen; also the shot list
  listing.md                    one paragraph describing the recording
  .take/                        scratch, gitignored, mode 700: secrets.env, relay files

.take/secrets.env is the one place secrets live during a take. Set it to mode 0600. It holds BASE_URL, DEMO_KEY and anything else the shot list needs. The browser side writes a key it creates there. The terminal side sources it. Nothing secret goes in a command-line argument or in a committed script. Delete .take/ once postflight passes.

Pre-flight

  1. Run ~/.claude/skills/localframe/scripts/doctor.sh browser or terminal from the take directory. Install what it reports missing. Its hints are exact. Note that the agg crate on crates.io is unrelated; install agg from asciinema's repo.
  2. Create a demo key for this take. Never load a production key or a shared key into a recorded session. Give anything the walkthrough creates an obviously disposable name (demo-take-2026-10-10).
  3. Dry-run every command. For a terminal take, run bash demo.sh until every curl | jq line works against a real response. A jq filter written from memory is often wrong, and a mid-take failure costs a full re-shoot.
  4. Count the requests the shot list makes and keep them under the API's per-minute quota, so a retake doesn't hit a 429 mid-scene.
  5. Create the scratch directory with mkdir -m 700 .take (the browser template also creates it), and add .take/ to the repository's .gitignore if the take lives in a repo.

Browser take

Pacing is the point. Hold each screen 2 to 3 seconds with pause(), type with typeSlow(), scroll with scrollSlow(), and take a shot(page, 'name') per screen. The stills number themselves.

bash
npm i -D playwright && npx playwright install chromium
bash
BASE_URL=https://app.example.com node walkthrough.mjs

The script closes the context first, which is when Playwright finishes the webm. It then renames the webm to raw/walkthrough.webm and converts it to H.264 walkthrough.mp4. If the walkthrough throws, the webm is still written, under Playwright's random filename in raw/, and no mp4 is made. Fix it and retake.

If this host's hosts file points the product's hostname at loopback, set RESOLVE="app.example.com <real-ip>". That maps the name inside Chromium only. Don't edit the hosts file.

Passwordless sign-in

The recorder can't read an inbox, so a person relays the code:

  1. The script types the email, submits it, takes a still of the passcode step, and calls waitFile('code.txt', 'the emailed sign-in code'). It prints the exact path it's waiting on.
  2. Tell the user that path. They read the code from an inbox they control and write it within the code's validity window, for example ! echo 123456 > <take>/.take/code.txt.
  3. The script reads the file, deletes it, types the code and continues.

Use a real inbox. Sign-up forms and mail providers often reject throwaway domains, and the take then stalls with no code ever sent. Relay other sign-up inputs (an organisation name, a first key) the same way, one file each.

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

Terminal take

Edit the scenes in demo.sh. Use comment lines to narrate what comes next, and run for each real command, trimmed with jq to what the viewer needs. Write secrets as \$DEMO_KEY so the typed line shows the variable name and eval supplies the value.

bash
asciinema rec --headless --window-size 100x30 -q -c 'bash demo.sh' demo.cast
bash
agg --cols 100 --rows 30 demo.cast demo.gif
bash
ffmpeg -y -loglevel error -i demo.gif -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" -pix_fmt yuv420p -movflags +faststart demo.mp4

Keep --window-size and --cols/--rows the same so the render matches the recording. The scale filter is required: agg's gif dimensions are often odd, and yuv420p rejects odd sizes.

A rate limit can make a good scene. Loop a request printing the remaining-quota header, stop at the first 429, then show Retry-After and the error body. First confirm the limit applies only to the demo account, so the burst doesn't affect anyone else.

Post-flight — the publish gate

In order. Nothing leaves the host until step 3 prints PASS.

  1. Revoke the demo key. A recording that shows a key is only safe because that key no longer works.

  2. Revoke only what the take created. Delete the rows with the disposable names. Never touch a key or record that existed before the run.

  3. Run the gate, with a command that prints the HTTP status of a request made with the demo key:

    bash
    ~/.claude/skills/localframe/scripts/postflight.sh <take> 'curl -s -o /dev/null -w "%{http_code}" -H "Authorization: Bearer $DEMO_KEY" https://api.example.com/v1/me'

    It sources .take/secrets.env and requires 401 or 403. It greps every text artefact (casts, scripts, logs, listing, JSON) for key material, and only the revoked demo key is allowed through. It also checks that .take/ is gitignored. Add product-specific key formats to .take/patterns, one regex per line.

  4. Look at every still and the video. Grep can't see pixels. Any key on screen other than the revoked demo key fails the take.

  5. Delete .take/.

Recordings find defects

Walking the live product frame by frame shows exactly what a visitor sees. Past takes caught placeholder link text, a badge claiming something that wasn't true at that moment, and stale sample data. Treat every take as a review pass:

  • List what it surfaced in the reply, with the still that shows each one.
  • File the fixes and get them shipped before the video is published, then retake.

A demo of a defect that's still live isn't evidence the product works.

Listing paragraph

listing.md holds one short paragraph in product language: what the product does and what the recording shows. Don't name internal components, services or repos. Write it for someone deciding whether to watch.

What the reply states

  • The paths of the mp4, the originals, the stills, listing.md and the shot list
  • The postflight result, verbatim
  • The defects the take surfaced, or that it surfaced none
  • What was revoked, and confirmation that nothing pre-existing was touched

© koolamusic, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files (scripts) in skills/localframe of koolamusic/claudefiles.

  • SKILL.md
  • scripts/doctor.sh
  • scripts/postflight.sh
  • templates/demo.sh
  • templates/walkthrough.mjs

Open the folder on GitHubat commit 8a20283

Compare with similar skills

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

Localframe compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Localframe this skillkoolamusic/claudefiles130—~2.1kAutomated safety check: PassMIT
Learn Dogfooddebs-obrien/playwright-movies-app103—~1kAutomated safety check: NotesMIT
PR Screenshotsbradygaster/squad3.3k—~1.1kAutomated safety check: PassMIT
Web Application Testinganthropics/skills180k51 repos~966Automated safety check: PassApache-2.0
Playwright CLIsanity-io/sanity6.4k18 repos~1.9kAutomated safety check: PassMIT
Write and Verify Playwright Testsappsmithorg/appsmith41k—~2.9kAutomated safety check: NotesApache-2.0

Similar skills

  • Learn Dogfood

    debs-obrien/playwright-movies-app

    Dogfood the learn/ course like a new user: docs site walk, fresh clone setup, then Practice and shell steps from each module.

    103 GitHub stars~1k tokensUpdated 9 days ago
    Testing & QAAuto-check: notes

  • PR Screenshots

    bradygaster/squad

    Capture Playwright screenshots and embed them in GitHub PR descriptions

    3.3k GitHub stars~1.1k tokensUpdated today
    Testing & QAAuto-check passed

  • Web Application Testing

    anthropics/skills

    Official

    Tests local web applications with Python Playwright scripts, checking frontend behavior, capturing screenshots and reading browser console logs.

    180k GitHub starsUsed in 51 repos~966 tokens
    Testing & QAAuto-check passed

  • Playwright CLI

    sanity-io/sanity

    Official

    Automates browser interactions for web testing, form filling, screenshots, and data extraction.

    6.4k GitHub starsUsed in 18 repos~1.9k tokens
    Testing & QAAuto-check passed

  • Write and Verify Playwright Tests

    appsmithorg/appsmith

    Writes a Playwright end-to-end test from a prompt, runs it against a live Appsmith deployment and retries with fixes up to three times until it passes.

    41k GitHub stars~2.9k tokensUpdated today
    Testing & QAAuto-check: notes

  • playwright-cli Browser Automation

    github/gh-aw

    Official

    Drives a real browser from the command line with playwright-cli to open pages, interact, mock requests, save state and work with Playwright tests.

    5.4k GitHub starsUsed in 23 repos~2.8k tokens
    Testing & QAAuto-check passed

More from koolamusic/claudefiles

All 15 skills in this repo

  • Explainer Formats

    koolamusic/claudefiles

    A skill your agent uses when asked to explain a topic, codebase, process, or document in a specific output format — plain language or Simplified Technical English (STE, in the style of ASD-STE100…

    130 GitHub stars~2.2k tokensUpdated today
    Auto-check passed

  • Breadboarding

    koolamusic/claudefiles

    Transform a workflow description into affordance tables showing UI and Code affordances with their wiring.

    130 GitHub stars~1.3k tokensUpdated today
    Auto-check passed

  • Orchestrator

    koolamusic/claudefiles

    Turn the current session into a chief-of-staff thread that runs a war room of three role slots — surveyor, executor, auditor — and routes per-branch work to durable, reusable child agents.

    130 GitHub stars~1.7k tokensUpdated today
    Auto-check passed

  • Retro

    koolamusic/claudefiles

    A skill your agent uses when a user completes a phase, sprint, milestone, or meaningful unit of work and needs a retrospective.

    130 GitHub stars~2.8k tokensUpdated today
    Auto-check passed

  • Skill Creator

    koolamusic/claudefiles

    Guide for creating effective skills. An agent skill from koolamusic/claudefiles.

    130 GitHub stars~1.7k tokensUpdated today
    Auto-check passed

  • Wildcard Proxy

    koolamusic/claudefiles

    Set up Caddy on a server so any local port is reachable at https://<port.<domain/, and two-letter or named labels like https://ui.<domain/ map to ports too, with certificates issued on demand and…

    130 GitHub stars~2k tokensUpdated today
    Auto-check: notes

Works with

Categories

Questions about Localframe

What does Localframe do?

Record silent product demos on this machine: a paced Playwright browser walkthrough of a web app or docs site, or a scripted asciinema terminal session against an API, rendered to mp4 with numbered…. Localframe is an agent skill from koolamusic/claudefiles. Record silent product demos on this machine: a paced Playwright browser walkthrough of a web app or docs site, or a scripted asciinema terminal session against an API, rendered to mp4 with numbered stills, a listing paragraph, and the shot list committed beside it.

When should I use Localframe?

Localframe fits situations like: the user says record a demo of X; make a walkthrough video; screen-record the app; record a terminal demo of the API.

How do I install Localframe in Claude Code?

Run `npx skills add koolamusic/claudefiles --skill localframe -a claude-code`. Or copy the skill folder (skills/localframe in koolamusic/claudefiles) into .claude/skills/localframe in your project. Claude Code loads it when a task matches its description.

How do I install Localframe in Codex?

Run `npx skills add koolamusic/claudefiles --skill localframe -a codex`. Or copy the skill folder (skills/localframe in koolamusic/claudefiles) into .agents/skills/localframe in your project. Codex loads it when a task matches its description.

Can I use Localframe 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 koolamusic/claudefiles --skill localframe -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/localframe, .gemini/skills/localframe, .github/skills/localframe and .opencode/skills/localframe in your project.

What does Localframe need to run?

Going by SKILL.md and its folder, Localframe needs a shell and JavaScript for the scripts in its folder, the command-line tools its instructions call (npm, npx, node, ffmpeg, bash and curl) and credentials named DEMO_KEY. Our summary lists: Node.js; A Bash shell; A credential in DEMO_KEY.

Does Localframe access the network?

SKILL.md contains no URLs. Its commands use npm, npx and curl, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Localframe safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Localframe use?

Localframe is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Localframe use?

About 2.1k tokens (SKILL.md is roughly 8.2k 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 Localframe?

Skills that share tags, products or a category with Localframe: Learn Dogfood (debs-obrien/playwright-movies-app, 103 stars), PR Screenshots (bradygaster/squad, 3.3k stars), Web Application Testing (anthropics/skills, 180k stars) and Playwright CLI (sanity-io/sanity, 6.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Localframe?

koolamusic (a GitHub user) maintains it in koolamusic/claudefiles, which has 130 GitHub stars. The repository holds 15 skills in this directory. The repository was last updated on October 10, 2026.

Source: koolamusic/claudefiles on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.