Not in the top 1,000 by GitHub stars

VisroliyaHimanshu/jsxmotion

Narrated videos written like apps: a Claude Code skill and plugin that rebuilds your app's screens in JSX, voices them with ElevenLabs and lands every frame on the spoken word.

Claude Code Engineering

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/jsxmotion/SKILL.md`

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

Before Network or broad shell → After Network or broad shell

d916728e109a → d916728e109a

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → d916728e109a

No earlier version was observed for comparison.

Compare on GitHub

View on GitHub Add to my skills

Verified commit d916728e109af347bdeb2d17f71d11b13f6f207d

Version-pinned installation · Claude Code

git clone --filter=blob:none --no-checkout https://github.com/VisroliyaHimanshu/jsxmotion.git .hotskills/visroliyahimanshu-jsxmotion && git -C .hotskills/visroliyahimanshu-jsxmotion checkout --detach d916728e109af347bdeb2d17f71d11b13f6f207d
# Copy each selected skill directory from .hotskills/visroliyahimanshu-jsxmotion into .claude/skills/<skill-name>/

3GitHub stars

0stars in 7 days

1skill in this repository

15commits in 30 days

Heat

1.6

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

jsxmotion skills/jsxmotion

How it works

jsxmotion

When your agent uses it

Use when asked to make, change, shorten, retime or re-voice a video with voiceover for any app or project, such as an app guide, tutorial, demo or walkthrough, an announcement or explainer built from a storyboard image, or a promo, ad, reel or skit (Remotion, ElevenLabs).

What it loads into context

Frontmatter

74 tokens

Always available to the agent

SKILL.md

2,415 tokens

When the skill is activated

Reference documents

916 tokens

Loaded on request

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

The playbook

Overview
Projects
Workflow
Look
QA
Common mistakes

Scripts executed separately

../../hooks/keys.mjs
scripts/cast.mjs
scripts/stills.mjs
scripts/tighten.py
scripts/tts.mjs

Files

../../.claude-plugin/marketplace.jsonasset432 bytes
../../.claude-plugin/plugin.jsonasset1,346 bytes
../../hooks/hooks.jsonasset487 bytes
../../hooks/keys.mjsruns2,308 bytes
SKILL.mdcore9,393 bytes
SKILL.mdcore9,393 bytes
SKILL.mdcore9,393 bytes
kinds.mddoc3,627 bytes
scripts/cast.mjsruns3,345 bytes
scripts/stills.mjsruns1,732 bytes
scripts/tighten.pyruns3,369 bytes
scripts/tts.mjsruns12,304 bytes

Read SKILL.md


# JSXMotion

## Overview
A video here is React scenes animated in Remotion, voiced by ElevenLabs, with every beat timed to a spoken word. App and vendor UI is always rebuilt, never shown as screenshots, screen recordings or a slideshow of the storyboard. A supplied image that is itself the content (a signature, a logo, a product photo) may appear as an image. Each product keeps its own video project and its own look; this skill holds the process and the tools in `scripts/` in this skill's base directory (shown when the skill loads).

## Projects
Read `~/.claude/jsxmotion/projects.md` first if it exists (the user's private list, kept outside the skill so updates never touch it: folder, notes to read, voice command, conventions). Then read that project's own notes. A project not listed: ask the user where it lives, then add a row there.

New project: set it up yourself, the user should not have to. Check `node -v` (22 or newer) and `ffmpeg -version` first; if one is missing, offer the install command (macOS: `brew install node ffmpeg`) and run it on yes. Then a Remotion project inside the product's repo, with `scripts/tts.mjs` and `scripts/cast.mjs` copied from this skill and `stills.mjs` in `qa/`, `.env`, `voice-previews/` and `out/` in its `.gitignore`, and this `remotion.config.ts` (lossless frames keep small text and dark gradients clean; yuv420p plays everywhere, GitHub included):

```ts
import { Config } from '@remotion/cli/config';
Config.setVideoImageFormat('png');
Config.setPixelFormat('yuv420p');

View the complete source on GitHub

Skills included

jsxmotion

Repository facts

License: MIT
Created: Oct 27, 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 7, 2026

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

Show 2 notes

skills/jsxmotion/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/jsxmotion/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed

No broad tool permissions
2 dangerous shell commandsin 2 files: jsxmotion/SKILL.md:52 jsxmotion/kinds.md:21
23 network referencesin 5 files: .claude-plugin/plugin.json:5 jsxmotion/scripts/cast.mjs:33 jsxmotion/scripts/tts.mjs:51 and 2 more
No hidden or obfuscated text
No instruction overrides
5 executable scriptsin 5 files: hooks/keys.mjs:1 jsxmotion/scripts/cast.mjs:1 jsxmotion/scripts/stills.mjs:1 and 2 more
15 references to secretsin 5 files: jsxmotion/scripts/tts.mjs:2 jsxmotion/scripts/cast.mjs:12 .claude-plugin/plugin.json:22 and 2 more
No requests to vote in Hot

Show all 45 signals by file

`.claude-plugin/marketplace.json`

Network accessline 4

"owner": {     "name": "Himanshu Visroliya",     "url": "https://github.com/VisroliyaHimanshu"

Network accessline 5

"name": "Himanshu Visroliya",     "url": "https://github.com/VisroliyaHimanshu"   },

Network accessline 6

"url": "https://github.com/VisroliyaHimanshu"

`.claude-plugin/plugin.json`

Network accessline 5

"author": {     "name": "Himanshu Visroliya",     "url": "https://github.com/VisroliyaHimanshu"

Network accessline 6

"name": "Himanshu Visroliya",     "url": "https://github.com/VisroliyaHimanshu"   },

Network accessline 7

"url": "https://github.com/VisroliyaHimanshu"

Network accessline 8

},   "homepage": "https://github.com/VisroliyaHimanshu/jsxmotion",   "repository": "https://github.com/VisroliyaHimanshu/jsxmotion",

Network accessline 9

"homepage": "https://github.com/VisroliyaHimanshu/jsxmotion",

Network accessline 10

"repository": "https://github.com/VisroliyaHimanshu/jsxmotion",

Access to secretsline 22
```
[Credential-related source omitted]
```
Access to secretsline 25
```
[Credential-related source omitted]
```

`hooks/keys.mjs`

Executable scriptline 1
```
Executable file
```
Access to secretsline 20
```
[Credential-related source omitted]
```

`skills/jsxmotion/SKILL.md`

Access to secretsline 33
```
[Credential-related source omitted]
```

Dangerous shell operationline 52

- Delete the QA PNGs (`find qa -name '*.png' -delete`; in zsh `rm qa/*.png` fails when there are none).

`skills/jsxmotion/kinds.md`

Network accessline 12

- Default vertical 1080×1920, loudness like guides (mean about -21 dB). First reply, before building: transcribe the panels into a flow table (time, scene, on screen, motion) and list the issues found, then ask. - The storyboard's timestamp

Network accessline 13

- The storyboard's timestamps don't set the timing; the voice does. Its full text read aloud runs about twice its timestamps, so voice a tightened version and keep the full copy on screen as captions. - Keep the storyboard's palette and com

Network accessline 14

- Keep the storyboard's palette and composition. Redraw its pictures as animated vectors (skyline, devices, product windows, icons); fetch an official brand icon once, else draw it (Microsoft products: `https://res-1.cdn.office.net/files/fa

Dangerous shell operationline 21

- Music and SFX (`tts.mjs <video> sfx` / `music`) sit under the dialogue. Render through the limiter pass to about -14 LUFS, as the `render:` script: `remotion render <Comp> out/<v>-raw.mp4 && ffmpeg -y -loglevel error -i out/<v>-raw.mp4 -c

`skills/jsxmotion/scripts/cast.mjs`

Executable scriptline 1
```
Executable file
```
Access to secretsline 12
```
[Credential-related source omitted]
```
Access to secretsline 16
```
[Credential-related source omitted]
```
Access to secretsline 17
```
[Credential-related source omitted]
```

Network accessline 33

const p = new URLSearchParams({ page_size: '30', language: 'en', search, sort: 'usage_character_count_1y',       ...(gender && { gender }), ...(accent && { accent }) });     const res = await fetch(`https://api.elevenlabs.io/v1/shared-voice

Network accessline 34

...(gender && { gender }), ...(accent && { accent }) });     const res = await fetch(`https://api.elevenlabs.io/v1/shared-voices?${p}`, { headers });     if (!res.ok) { console.error('HTTP', res.status, (await res.text()).slice(0, 300)); pr

Network accessline 35

const res = await fetch(`https://api.elevenlabs.io/v1/shared-voices?${p}`, { headers });

Network accessline 45

seen.add(v.voice_id);     const file = `${role}-${n + 1}-${v.name.replace(/[^A-Za-z0-9]+/g, '-').slice(0, 30)}.mp3`;     if (v.preview_url) writeFileSync(join(dir, file), Buffer.from(await (await fetch(v.preview_url)).arrayBuffer()));

Network accessline 46

const file = `${role}-${n + 1}-${v.name.replace(/[^A-Za-z0-9]+/g, '-').slice(0, 30)}.mp3`;     if (v.preview_url) writeFileSync(join(dir, file), Buffer.from(await (await fetch(v.preview_url)).arrayBuffer()));     console.log(`${n + 1}. ${v.

Network accessline 47

if (v.preview_url) writeFileSync(join(dir, file), Buffer.from(await (await fetch(v.preview_url)).arrayBuffer()));

`skills/jsxmotion/scripts/stills.mjs`

Executable scriptline 1
```
Executable file
```

`skills/jsxmotion/scripts/tighten.py`

Executable scriptline 1
```
Executable file
```

`skills/jsxmotion/scripts/tts.mjs`

Executable scriptline 1
```
Executable file
```
Access to secretsline 2
```
[Credential-related source omitted]
```
Access to secretsline 3
```
[Credential-related source omitted]
```
Access to secretsline 5
```
[Credential-related source omitted]
```
Access to secretsline 26
```
[Credential-related source omitted]
```
Access to secretsline 32
```
[Credential-related source omitted]
```
Access to secretsline 38
```
[Credential-related source omitted]
```
Access to secretsline 41
```
[Credential-related source omitted]
```
Access to secretsline 42
```
[Credential-related source omitted]
```

Network accessline 51

async function post(url, body) {   const res = await fetch(`https://api.elevenlabs.io${url}`, {

Network accessline 52

const res = await fetch(`https://api.elevenlabs.io${url}`, {

Network accessline 194

form.append('model_id', 'scribe_v1');     form.append('file', new Blob([readFileSync(path(`public/audio/${spec.prefix}-line${i}.mp3`))], { type: 'audio/mpeg' }), `line${i}.mp3`);     const res = await fetch('https://api.elevenlabs.io/v1/spe

Network accessline 195

form.append('file', new Blob([readFileSync(path(`public/audio/${spec.prefix}-line${i}.mp3`))], { type: 'audio/mpeg' }), `line${i}.mp3`);     const res = await fetch('https://api.elevenlabs.io/v1/speech-to-text', { method: 'POST', body: form

Network accessline 196
```
[Credential-related source omitted]
```

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: 34 facts

Executable script in a comment of a file that runshooks/keys.mjs:1Low confidence
Access to secrets in code of a file that runs: a variable, placeholder or call, not a stored valuehooks/keys.mjs:20Low confidence
Access to secrets in prose of the SKILL.md: a variable, placeholder or call, not a stored valuejsxmotion/SKILL.md:33Low confidence
Dangerous shell operation in prose of the SKILL.mdjsxmotion/SKILL.md:52Low confidence
Network access in prose of documentationjsxmotion/kinds.md:12Low confidence
Network access in prose of documentationjsxmotion/kinds.md:13Low confidence
Network access in prose of documentationjsxmotion/kinds.md:14Low confidence
Dangerous shell operation in prose of documentationjsxmotion/kinds.md:21Low confidence
Executable script in a comment of a file that runsjsxmotion/scripts/cast.mjs:1Low confidence
Access to secrets in code of a file that runs: a variable, placeholder or call, not a stored valuejsxmotion/scripts/cast.mjs:12Low confidence
Access to secrets in code of a file that runs: a variable, placeholder or call, not a stored valuejsxmotion/scripts/cast.mjs:16Low confidence
Access to secrets in code of a file that runs: a variable, placeholder or call, not a stored valuejsxmotion/scripts/cast.mjs:17Low confidence
Network access in code of a file that runsjsxmotion/scripts/cast.mjs:33High confidence
Network access in code of a file that runsjsxmotion/scripts/cast.mjs:34High confidence
Network access in code of a file that runsjsxmotion/scripts/cast.mjs:35High confidence
Network access in code of a file that runsjsxmotion/scripts/cast.mjs:45High confidence
Network access in code of a file that runsjsxmotion/scripts/cast.mjs:46High confidence
Network access in code of a file that runsjsxmotion/scripts/cast.mjs:47High confidence
Executable script in a comment of a file that runsjsxmotion/scripts/stills.mjs:1Low confidence
Executable script in prose of a file that runsjsxmotion/scripts/tighten.py:1Low confidence
Executable script in a comment of a file that runsjsxmotion/scripts/tts.mjs:1Low confidence
Access to secrets in a comment of a file that runs: a variable, placeholder or call, not a stored valuejsxmotion/scripts/tts.mjs:2Low confidence
Access to secrets in a comment of a file that runs: a variable, placeholder or call, not a stored valuejsxmotion/scripts/tts.mjs:3Low confidence
Access to secrets in a comment of a file that runs: a variable, placeholder or call, not a stored valuejsxmotion/scripts/tts.mjs:5Low confidence
Access to secrets in code of a file that runs: a variable, placeholder or call, not a stored valuejsxmotion/scripts/tts.mjs:26Low confidence
Access to secrets in code of a file that runs: a variable, placeholder or call, not a stored valuejsxmotion/scripts/tts.mjs:32Low confidence
Access to secrets in code of a file that runs: a variable, placeholder or call, not a stored valuejsxmotion/scripts/tts.mjs:38Low confidence
Access to secrets in code of a file that runs: a variable, placeholder or call, not a stored valuejsxmotion/scripts/tts.mjs:41Low confidence
Access to secrets in code of a file that runs: a variable, placeholder or call, not a stored valuejsxmotion/scripts/tts.mjs:42Low confidence
Network access in code of a file that runsjsxmotion/scripts/tts.mjs:51High confidence
Network access in code of a file that runsjsxmotion/scripts/tts.mjs:52High confidence
Network access in code of a file that runsjsxmotion/scripts/tts.mjs:194High confidence
Network access in code of a file that runsjsxmotion/scripts/tts.mjs:195High confidence
Network access in code of a file that runsjsxmotion/scripts/tts.mjs:196High 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	Compatible	Standard SKILL.md skills/jsxmotion/SKILL.md	`.agents/skills/<skill-name>/`
Cursor	Compatible	Standard SKILL.md skills/jsxmotion/SKILL.md	`.cursor/skills/<skill-name>/`
Gemini CLI	Compatible	Standard SKILL.md skills/jsxmotion/SKILL.md	`.gemini/skills/<skill-name>/`
GitHub Copilot	Compatible	Standard SKILL.md skills/jsxmotion/SKILL.md	`.github/skills/<skill-name>/`
OpenCode	Compatible	Standard SKILL.md skills/jsxmotion/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.

VisroliyaHimanshu/jsxmotion

History

skills/jsxmotion/SKILL.md

Share this page

Heat

Stars over time

Individual skills in this repository

How it works

jsxmotion

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

hooks/keys.mjs

skills/jsxmotion/SKILL.md

skills/jsxmotion/kinds.md

skills/jsxmotion/scripts/cast.mjs

skills/jsxmotion/scripts/stills.mjs

skills/jsxmotion/scripts/tighten.py

skills/jsxmotion/scripts/tts.mjs

How the signals fit together

Works with

You might also use

Agents365-ai/video-podcast-maker

DojoCodingLabs/remotion-superpowers

ahmdd4vd/MotionCraft

Matteoikarieth96/whiteboard-video-skill

cth9191/animate

kharmanskyi/open-steps

`skills/jsxmotion/SKILL.md`

`.claude-plugin/marketplace.json`

`.claude-plugin/plugin.json`

`hooks/keys.mjs`

`skills/jsxmotion/SKILL.md`

`skills/jsxmotion/kinds.md`

`skills/jsxmotion/scripts/cast.mjs`

`skills/jsxmotion/scripts/stills.mjs`

`skills/jsxmotion/scripts/tighten.py`

`skills/jsxmotion/scripts/tts.mjs`