Not in the top 1,000 by GitHub stars

gokayfem/video-to-css

Turn any reference video into an editable strict HTML/CSS animation: semantic parts, CSS keyframes matched to the clip's real timestamps, runtime controls, and a browser harness that reports appearance, timing, structure and editability separately.

Claude Code Codex Gemini CLI Testing

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

`skills/video-to-css/SKILL.md`

Week of Nov 2, 2026 · +0 / −0 lines

Before Network or broad shell → After Network or broad shell

1150ccd3440b → 1150ccd3440b

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → 1150ccd3440b

No earlier version was observed for comparison.

Compare on GitHub

View on GitHub Add to my skills

Verified commit 1150ccd3440b9a1cc8cda8b70d72c952641546eb

Version-pinned installation · Claude Code

git clone --filter=blob:none --no-checkout https://github.com/gokayfem/video-to-css.git .hotskills/gokayfem-video-to-css && git -C .hotskills/gokayfem-video-to-css checkout --detach 1150ccd3440b9a1cc8cda8b70d72c952641546eb
# Copy each selected skill directory from .hotskills/gokayfem-video-to-css into .claude/skills/<skill-name>/

Version-pinned installation · Codex

git clone --filter=blob:none --no-checkout https://github.com/gokayfem/video-to-css.git .hotskills/gokayfem-video-to-css && git -C .hotskills/gokayfem-video-to-css checkout --detach 1150ccd3440b9a1cc8cda8b70d72c952641546eb
# Copy each selected skill directory from .hotskills/gokayfem-video-to-css into .agents/skills/<skill-name>/

Version-pinned installation · Gemini CLI

git clone --filter=blob:none --no-checkout https://github.com/gokayfem/video-to-css.git .hotskills/gokayfem-video-to-css && git -C .hotskills/gokayfem-video-to-css checkout --detach 1150ccd3440b9a1cc8cda8b70d72c952641546eb
# Copy each selected skill directory from .hotskills/gokayfem-video-to-css into .gemini/skills/<skill-name>/

11GitHub stars

3stars in 7 days

1skill in this repository

4commits in 30 days

Heat

3.9

Star growth, last 7 daysNot available
Star growth, last 24 hoursNot available
Rank movement, last 7 daysNot available
Commits, last 30 daysNot available
Accounts asking about it through MCP, last 7 daysNot available
Hot votes this weekNot available

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

30-day change not yet available: not enough history.

Individual skills in this repository

video-to-css skills/video-to-css

How it works

video-to-css

When your agent uses it

Rebuild a reference video (any container ffmpeg reads: mp4, mov, webm, gif; any size, aspect, rotation or frame rate; a loop or a one-shot, or a window of a longer clip) as an editable strict HTML/CSS animation: semantic DOM parts, CSS keyframes matched to the clip's real timestamps, runtime custom-property controls, and browser evidence (matched-time side-by-sides, separate appearance/temporal reports, negative controls, strict audit). Use when asked to turn a video/GIF/screen recording into CSS animation, to match an animation's timing in CSS, or to verify a CSS animation against a reference clip. Not for: canvas/WebGL/SVG/Lottie output, JS animation libraries, embedding the video or its frames, or naturalistic footage (faces, fluids, crowds) where strict CSS is a poor fit — say so.

What it loads into context

Frontmatter

209 tokens

Always available to the agent

SKILL.md

1,180 tokens

When the skill is activated

Reference documents

4,825 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Setup (once)
Workflow
Hard rules (strict profile)

Scripts executed separately

scripts/lib/audit.mjs
scripts/lib/capture.mjs
scripts/lib/checkall.mjs
scripts/lib/compare.mjs
scripts/lib/diagnose.mjs
scripts/lib/init.mjs
scripts/lib/metrics.mjs
scripts/lib/perf.mjs
scripts/lib/pipeline.mjs
scripts/lib/png.mjs
scripts/lib/review.mjs
scripts/lib/sbs.mjs
scripts/lib/server.mjs
scripts/lib/sheet.mjs
scripts/lib/util.mjs
scripts/lib/variants.mjs
scripts/lib/video.mjs
scripts/package.json
scripts/v2css.mjs

Files

../../.claude-plugin/marketplace.jsonasset601 bytes
../../.claude-plugin/plugin.jsonasset743 bytes
SKILL.mdcore4,837 bytes
SKILL.mdcore4,837 bytes
SKILL.mdcore4,837 bytes
SKILL.mdcore4,837 bytes
references/css-primitives.mddoc3,177 bytes
references/harness.mddoc4,140 bytes
references/lessons.mddoc6,058 bytes
references/measuring.mddoc2,193 bytes
references/review.mddoc2,644 bytes
references/scene-contract.mddoc1,440 bytes
scripts/lib/audit.mjsruns11,391 bytes
scripts/lib/capture.mjsruns7,275 bytes
scripts/lib/checkall.mjsruns4,651 bytes
scripts/lib/compare.mjsruns15,386 bytes
scripts/lib/diagnose.mjsruns17,585 bytes
scripts/lib/init.mjsruns9,856 bytes
scripts/lib/metrics.mjsruns10,033 bytes
scripts/lib/perf.mjsruns1,962 bytes
scripts/lib/pipeline.mjsruns14,387 bytes
scripts/lib/png.mjsruns971 bytes
scripts/lib/review.mjsruns8,112 bytes
scripts/lib/sbs.mjsruns2,301 bytes
scripts/lib/server.mjsruns1,462 bytes
scripts/lib/sheet.mjsruns4,366 bytes
scripts/lib/util.mjsruns2,633 bytes
scripts/lib/variants.mjsruns8,597 bytes
scripts/lib/video.mjsruns7,116 bytes
scripts/package.jsonruns331 bytes
scripts/v2css.mjsruns14,044 bytes
templates/scene.jsonasset746 bytes
templates/scene/index.htmlasset386 bytes
templates/scene/scene.cssasset970 bytes

Read SKILL.md


# video-to-css

Turn a reference clip into a **strict HTML/CSS** scene whose motion is declared in CSS and whose
playback needs no JavaScript, then prove — with the toolkit in `scripts/` — what matches and what
does not. The deliverable is a construction system with controls, not a pixel replay.

## Setup (once)

```bash
cd <this skill>/scripts && npm install      # playwright@1.64.1 + pngjs@7.0.0, pinned
npx playwright install chromium             # webkit optional for smoke coverage
# needs ffmpeg + ffprobe on PATH and Node >= 20
node v2css.mjs help
```

View the complete source on GitHub

Skills included

video-to-css

Repository facts

License: MIT
Created: Oct 28, 2026
Last pushed: Oct 28, 2026
Forks: 0
Open issues: 0
Project activity: Active

Before you install

Network or broad shell

Automated signals, not a guarantee

Checked Nov 6, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 3 notes

skills/video-to-css/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/video-to-css/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/video-to-css/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed

No broad tool permissions
No dangerous shell commands
32 network referencesin 7 files: video-to-css/scripts/lib/pipeline.mjs:110 .claude-plugin/plugin.json:6 video-to-css/scripts/lib/server.mjs:11 and 4 more
No hidden or obfuscated text
No instruction overrides
19 executable scriptsin 19 files: video-to-css/scripts/lib/audit.mjs:1 video-to-css/scripts/lib/capture.mjs:1 video-to-css/scripts/lib/checkall.mjs:1 and 16 more
No access to secrets
No requests to vote in Hot

Show all 51 signals by file

`.claude-plugin/marketplace.json`

Network accessline 4

"owner": {     "name": "gokayfem",     "url": "https://github.com/gokayfem"

Network accessline 5

"name": "gokayfem",     "url": "https://github.com/gokayfem"   },

Network accessline 6
```
"url": "https://github.com/gokayfem"
```

`.claude-plugin/plugin.json`

Network accessline 6

"author": {     "name": "gokayfem",     "url": "https://github.com/gokayfem"

Network accessline 7

"name": "gokayfem",     "url": "https://github.com/gokayfem"   },

Network accessline 8
```
"url": "https://github.com/gokayfem"
```

Network accessline 9

},   "homepage": "https://github.com/gokayfem/video-to-css",   "repository": "https://github.com/gokayfem/video-to-css",

Network accessline 10

"homepage": "https://github.com/gokayfem/video-to-css",

Network accessline 11

"repository": "https://github.com/gokayfem/video-to-css",

`skills/video-to-css/scripts/lib/audit.mjs`

Executable scriptline 1
```
Executable file
```

Network accessline 98

const braces = braceBalance(readFileSync(scene.cssPath, 'utf8'));   const local = (u) => u.startsWith(session.server.base + '/');   const outside = log.requests.filter((u) => !local(u) || !session.server.pathOf(u).startsWith(sceneDir + '/')

Network accessline 99

const local = (u) => u.startsWith(session.server.base + '/');   const outside = log.requests.filter((u) => !local(u) || !session.server.pathOf(u).startsWith(sceneDir + '/'));   const nonCss = log.requests.filter((u) => local(u) && !/\.(css|

Network accessline 100

const outside = log.requests.filter((u) => !local(u) || !session.server.pathOf(u).startsWith(sceneDir + '/'));

Network accessline 101

const nonCss = log.requests.filter((u) => local(u) && !/\.(css|html)$/.test(new URL(u).pathname));

`skills/video-to-css/scripts/lib/capture.mjs`

Executable scriptline 1
```
Executable file
```

Network accessline 73

page.on('console', (m) => { if (['error', 'warning'].includes(m.type())) log.console.push({ type: m.type(), text: m.text() }); });   page.on('pageerror', (e) => log.pageErrors.push(String(e)));   page.on('request', (r) => log.requests.push(

Network accessline 74

page.on('pageerror', (e) => log.pageErrors.push(String(e)));   page.on('request', (r) => log.requests.push(r.url()));   page.on('requestfailed', (r) => log.failedRequests.push({ url: r.url(), error: r.failure()?.errorText }));

Network accessline 75

page.on('request', (r) => log.requests.push(r.url()));

`skills/video-to-css/scripts/lib/checkall.mjs`

Executable scriptline 1
```
Executable file
```

`skills/video-to-css/scripts/lib/compare.mjs`

Executable scriptline 1
```
Executable file
```

`skills/video-to-css/scripts/lib/diagnose.mjs`

Executable scriptline 1
```
Executable file
```

`skills/video-to-css/scripts/lib/init.mjs`

Executable scriptline 1
```
Executable file
```

`skills/video-to-css/scripts/lib/metrics.mjs`

Executable scriptline 1
```
Executable file
```

`skills/video-to-css/scripts/lib/perf.mjs`

Executable scriptline 1
```
Executable file
```

`skills/video-to-css/scripts/lib/pipeline.mjs`

Executable scriptline 1
```
Executable file
```

Network accessline 110

report.negativeControl = { kind, note, expectFailIn: ['temporal.'], caught: report.outcomes.temporal === 'fail', failedChecks: failed };   } else if (kind !== 'good') {     const nc = NEGATIVE_CONTROLS[kind];

Network accessline 111

} else if (kind !== 'good') {     const nc = NEGATIVE_CONTROLS[kind];     const expect = nc.expect.map((e) => e.replace('{part}', scene.tracks[0].part));

Network accessline 112
```
const nc = NEGATIVE_CONTROLS[kind];
```

Network accessline 123

writeFileSync(join(cmpDir, 'report.md'), reportMarkdown(scene, report, ref));   if (sheet) await evidenceSheets(scene, ref, manifest, report, cmpDir, session);   const nc = report.negativeControl;

Network accessline 124

if (sheet) await evidenceSheets(scene, ref, manifest, report, cmpDir, session);   const nc = report.negativeControl;   log(`  ${label}: appearance ${report.outcomes.appearance}, temporal ${report.outcomes.temporal}${nc ? `, control ${(nc.st

Network accessline 125
```
const nc = report.negativeControl;
```

Network accessline 126

log(`  ${label}: appearance ${report.outcomes.appearance}, temporal ${report.outcomes.temporal}${nc ? `, control ${(nc.status ?? (nc.caught ? 'caught' : 'missed')).toUpperCase()}${nc.plantedP90Px != null ? ` (planted p90 ${nc.plantedP90Px}

`skills/video-to-css/scripts/lib/png.mjs`

Executable scriptline 1
```
Executable file
```

`skills/video-to-css/scripts/lib/review.mjs`

Executable scriptline 1
```
Executable file
```

`skills/video-to-css/scripts/lib/sbs.mjs`

Executable scriptline 1
```
Executable file
```

`skills/video-to-css/scripts/lib/server.mjs`

Executable scriptline 1
```
Executable file
```

Network accessline 11

const server = createServer(async (req, res) => {     try {       const p = resolve(root, '.' + decodeURIComponent(new URL(req.url, 'http://x').pathname));

Network accessline 12

try {       const p = resolve(root, '.' + decodeURIComponent(new URL(req.url, 'http://x').pathname));       if (p !== root && !p.startsWith(root + sep)) { res.writeHead(403).end(); return; }

Network accessline 13

const p = resolve(root, '.' + decodeURIComponent(new URL(req.url, 'http://x').pathname));

Network accessline 20

});   await new Promise((r) => server.listen(0, '127.0.0.1', r));   const base = `http://127.0.0.1:${server.address().port}`;

Network accessline 21

await new Promise((r) => server.listen(0, '127.0.0.1', r));   const base = `http://127.0.0.1:${server.address().port}`;   return {

Network accessline 22

const base = `http://127.0.0.1:${server.address().port}`;

`skills/video-to-css/scripts/lib/sheet.mjs`

Executable scriptline 1
```
Executable file
```

`skills/video-to-css/scripts/lib/util.mjs`

Executable scriptline 1
```
Executable file
```

`skills/video-to-css/scripts/lib/variants.mjs`

Executable scriptline 1
```
Executable file
```

`skills/video-to-css/scripts/lib/video.mjs`

Executable scriptline 1
```
Executable file
```

Network accessline 104

const col = colorAssumption(src);   const wanted = new Map();   const entries = requests.map((r, k) => {

Network accessline 105

const wanted = new Map();   const entries = requests.map((r, k) => {     const f = frameAt(src, r.t);

Network accessline 106

const entries = requests.map((r, k) => {

`skills/video-to-css/scripts/package.json`

Executable scriptline 1
```
Executable file
```

`skills/video-to-css/scripts/v2css.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Signal confidence: 42 facts

Executable script in a comment of a file that runsvideo-to-css/scripts/lib/audit.mjs:1Low confidence
Network access in code of a file that runsvideo-to-css/scripts/lib/audit.mjs:98High confidence
Network access in code of a file that runsvideo-to-css/scripts/lib/audit.mjs:99High confidence
Network access in code of a file that runsvideo-to-css/scripts/lib/audit.mjs:100High confidence
Network access in code of a file that runsvideo-to-css/scripts/lib/audit.mjs:101High confidence
Executable script in a comment of a file that runsvideo-to-css/scripts/lib/capture.mjs:1Low confidence
Network access in code of a file that runsvideo-to-css/scripts/lib/capture.mjs:73High confidence
Network access in code of a file that runsvideo-to-css/scripts/lib/capture.mjs:74High confidence
Network access in code of a file that runsvideo-to-css/scripts/lib/capture.mjs:75High confidence
Executable script in a comment of a file that runsvideo-to-css/scripts/lib/checkall.mjs:1Low confidence
Executable script in a comment of a file that runsvideo-to-css/scripts/lib/compare.mjs:1Low confidence
Executable script in a comment of a file that runsvideo-to-css/scripts/lib/diagnose.mjs:1Low confidence
Executable script in a comment of a file that runsvideo-to-css/scripts/lib/init.mjs:1Low confidence
Executable script in a comment of a file that runsvideo-to-css/scripts/lib/metrics.mjs:1Low confidence
Executable script in a comment of a file that runsvideo-to-css/scripts/lib/perf.mjs:1Low confidence
Executable script in a comment of a file that runsvideo-to-css/scripts/lib/pipeline.mjs:1Low confidence
Network access in code of a file that runsvideo-to-css/scripts/lib/pipeline.mjs:110High confidence
Network access in code of a file that runsvideo-to-css/scripts/lib/pipeline.mjs:111High confidence
Network access in code of a file that runsvideo-to-css/scripts/lib/pipeline.mjs:112High confidence
Network access in code of a file that runsvideo-to-css/scripts/lib/pipeline.mjs:123High confidence
Network access in code of a file that runsvideo-to-css/scripts/lib/pipeline.mjs:124High confidence
Network access in code of a file that runsvideo-to-css/scripts/lib/pipeline.mjs:125High confidence
Network access in code of a file that runsvideo-to-css/scripts/lib/pipeline.mjs:126High confidence
Executable script in code of a file that runsvideo-to-css/scripts/lib/png.mjs:1High confidence
Executable script in a comment of a file that runsvideo-to-css/scripts/lib/review.mjs:1Low confidence
Executable script in a comment of a file that runsvideo-to-css/scripts/lib/sbs.mjs:1Low confidence
Executable script in a comment of a file that runsvideo-to-css/scripts/lib/server.mjs:1Low confidence
Network access in code of a file that runsvideo-to-css/scripts/lib/server.mjs:11High confidence
Network access in code of a file that runsvideo-to-css/scripts/lib/server.mjs:12High confidence
Network access in code of a file that runsvideo-to-css/scripts/lib/server.mjs:13High confidence
Network access in code of a file that runsvideo-to-css/scripts/lib/server.mjs:20High confidence
Network access in code of a file that runsvideo-to-css/scripts/lib/server.mjs:21High confidence
Network access in code of a file that runsvideo-to-css/scripts/lib/server.mjs:22High confidence
Executable script in a comment of a file that runsvideo-to-css/scripts/lib/sheet.mjs:1Low confidence
Executable script in code of a file that runsvideo-to-css/scripts/lib/util.mjs:1High confidence
Executable script in a comment of a file that runsvideo-to-css/scripts/lib/variants.mjs:1Low confidence
Executable script in a comment of a file that runsvideo-to-css/scripts/lib/video.mjs:1Low confidence
Network access in code of a file that runsvideo-to-css/scripts/lib/video.mjs:104High confidence
Network access in code of a file that runsvideo-to-css/scripts/lib/video.mjs:105High confidence
Network access in code of a file that runsvideo-to-css/scripts/lib/video.mjs:106High confidence
Executable script in code of a file that runsvideo-to-css/scripts/package.json:1High confidence
Executable script in code of a file that runsvideo-to-css/scripts/v2css.mjs:1High confidence

Works with

Agent compatibility, from the files in this repository
Agent	Status	Evidence	Install to
Claude Code	Native	Manifest .claude-plugin/marketplace.json	`.claude/skills/<skill-name>/`
Codex	Native	Manifest AGENTS.md	`.agents/skills/<skill-name>/`
Cursor	Compatible	Standard SKILL.md skills/video-to-css/SKILL.md	`.cursor/skills/<skill-name>/`
Gemini CLI	Native	Manifest gemini-extension.json	`.gemini/skills/<skill-name>/`
GitHub Copilot	Compatible	Standard SKILL.md skills/video-to-css/SKILL.md	`.github/skills/<skill-name>/`
OpenCode	Compatible	Standard SKILL.md skills/video-to-css/SKILL.md	`.opencode/skills/<skill-name>/`

Native The repository ships a manifest, folder or frontmatter field for this agent.
Compatible A standard SKILL.md that this agent can read.
Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

gokayfem/video-to-css

History

skills/video-to-css/SKILL.md

Share this page

Heat

Stars over time

Individual skills in this repository

How it works

video-to-css

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

Skills included

Repository facts

Before you install

.claude-plugin/marketplace.json

.claude-plugin/plugin.json

skills/video-to-css/scripts/lib/audit.mjs

skills/video-to-css/scripts/lib/capture.mjs

skills/video-to-css/scripts/lib/checkall.mjs

skills/video-to-css/scripts/lib/compare.mjs

skills/video-to-css/scripts/lib/diagnose.mjs

skills/video-to-css/scripts/lib/init.mjs

skills/video-to-css/scripts/lib/metrics.mjs

skills/video-to-css/scripts/lib/perf.mjs

skills/video-to-css/scripts/lib/pipeline.mjs

skills/video-to-css/scripts/lib/png.mjs

skills/video-to-css/scripts/lib/review.mjs

skills/video-to-css/scripts/lib/sbs.mjs

skills/video-to-css/scripts/lib/server.mjs

skills/video-to-css/scripts/lib/sheet.mjs

skills/video-to-css/scripts/lib/util.mjs

skills/video-to-css/scripts/lib/variants.mjs

skills/video-to-css/scripts/lib/video.mjs

skills/video-to-css/scripts/package.json

skills/video-to-css/scripts/v2css.mjs