RuiC Pixel Explainer skill
A skill that turns narration text into a 20-second chunky-pixel explainer at 1920×1080 with voice-over and an editable project.
- 84 ★ on the repository
- Last commit
Extended access
Why this level
- Scripts launch a browser through `playwright` and `ffmpeg` and write project files to disk
- Voice-over sends the clip text to the speech synthesis service you connect
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/ruic-pixel-explainerDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Scripts launch a browser through `playwright` and `ffmpeg` and write project files to disk
- Voice-over sends the clip text to the speech synthesis service you connect
This is third-party code. Review the repository files before installing.
What it does
The skill takes narration text, one phrase per line, splits it into semantic beats and invents a visible action for each: a card flies into a collection, a search finds nothing, an answer is checked against the reference, a reward lands. Frames are then drawn by code as a pure function of time and exported one by one, so the same frame twice gives identical bytes and fixing one word redraws only the right place. The skill picks one of two routes by what the host can do. With image generation it builds transparent 4×4 action sheets and half-body portraits from reference images. Without it, Canvas functions draw the half-body and the small hero. The output is an MP4 at 30 frames per second, an editable project, key stills and exact specs. You bring your own voice: an HTTP service or a local speech synthesis command.
Who it is for. Authors of study videos and book breakdowns who want a reproducible pixel video rather than a screen recording.
Good fit when
- You have 20 seconds of narration and want a clip with a hero, a scene and subtitles
- The idea "saving is not learning" should be shown by actions: an answer, a check, a key as a reward
- The host can generate images and you want pose sheets for two characters from a reference
- The host has no image generation: heroes are drawn by code and the clip builds without external models
Not a fit when
- You need detailed illustration: the chunky pixel look is intentional and fine textures go against the style
- You need full neural video generation: every frame here is drawn by code over time
- You need ready voice-over out of the box: there are no built-in voices and you connect your own synthesis
Example request
Make a 20-second pixel-style clip from this text, "Saving is not learning", with code-drawn characters instead of image generation, at 1920×1080 and with subtitles.Limitations
It needs `node` with `playwright`, `ffmpeg` and `python3`, plus Pillow and numpy to register character sheets. The template ships only a 20-second sample voice-over, which you replace for a new clip. The project texts and the repository description are in Chinese. Reference frames only calibrate the style. The clip itself remains original artwork; the author promises no pixel-for-pixel reproduction of someone else video. The Fusion Pixel 12px font ships with its OFL-1.1 license.
How to disable. Delete the `ruic-pixel-explainer` skill folder from `~/.agents/skills/` and the links the deploy script created for Claude Code and Codex. Finished clip projects live separately where you copied them.
FAQ
How do I install the skill?
Copy the repository into `~/.agents/skills/ruic-pixel-explainer`. For Claude Code and Codex the author syncs it with `deploy_skills.py --sync` from his own registry. In an ordinary setup the folder with SKILL.md is enough.
What differs between the two routes?
Route A uses image generation: a reference yields 4×4 pose sheets and portraits that `register_actor_sheet.py` then registers. Route B draws heroes with code on Canvas and needs no external models.
Why build the clip frame by frame instead of recording the screen?
Screen recording depends on load and drops frames. Frame export ties time to the frame number, so the code always yields the same frames and a self-check during render compares one frame captured twice.
Do I need my own voice?
Yes. `voice_track.py` takes your HTTP service or a local synthesis command, tests the connection with `--check` first, then voices phrases one by one, measures duration and assembles the track on the timeline.
What is in the output?
An MP4 at 1920×1080 and 30 frames per second with voice-over, an editable project, key stills, the narration text and the real file specs checked with `ffprobe`.
Discussion
No questions or reviews yet.
Related
SkillsA skill that turns your narration and real assets into a 20–60 second video in the style you pick, rendered locally as MP4.
A skill that makes video in pure code: narrated explainers and website promos in 35 visual styles, in 16:9 and 9:16.
A Claude Code skill for narrated explainers with a cartoon presenter, lip sync to your voice, poses on cue words and your brand
A Claude Code and Codex skill that turns a topic into a narrated motion-graphics explainer video on Remotion with subtitles and chapters
A skill for Khan Academy style explainer videos: a pen draws on a board while a voice speaks, one scene file renders to MP4
Claude Code skill that turns one topic into a 60-second Vox-style explainer: script, keyframes, animation, voiceover and music.
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| RuiC Pixel Explainer (this card) | no | 84 | |
| Pixel Art Studio | no | 111 | makes static pixel art in Pillow code with no voice-over or video |
| anything2explainer | no | 3,262 | turns a topic into a narrated motion-graphics clip, not in a pixel style |
README in short
The Chinese description shows three 20-second samples and explains how the video differs from neural generation: every frame is drawn by code. Capabilities, a seven-step diagram, route choice by host abilities, a quick start, a sizing table, voice-over rules, an acceptance checklist and questions on the chunky style, font and voice follow.
README badge
Original SKILL.md
---
name: ruic-pixel-explainer
description: 生成粗像素 RPG 横屏讲解片，按实际生图能力分为参考角色生图与纯代码两条路线。有生图用4×4动作小人和独立半身表情图，无生图用半身、大头平面脸、无突出鼻子的代码角色；两路都配角色专属场景、语义组件与确定性MP4导出。适用读书讲解、像素讲堂、像《刻意练习》那种视频及大小人物样片。
user-invocable: true
metadata:
dsh:
compatibility: native
requires:
- node
- ffmpeg
- python3
- curl
---
# ruic-pixel-explainer · 粗像素电影式讲解片
把知识点演成像素世界中的动作，交付带口播的 16:9 MP4 与可修改工程。默认 1920×1080 / 30 fps；时长、文案、人物、场景以用户这次要求为准。
## 先判断模式
- **新主题 / 新人物 / 新场景**：原创生成。参考片决定像素粗细、比例、灯光与节奏；人物与道具重新设计。
- **沿用已有一期**：只修改该期数据和需要的场景，保留其他期。
- **逐帧恢复参考视频**：仅在用户明确要求恢复素材或重建原画面时使用。恢复像素不是原创动画，也不能把整片画面包当成可编辑人物骨骼。详见 [references/reference-modes.md](references/reference-modes.md)。
## 先检查生图能力，再选路线
以本次宿主实际可调用的工具或使用者已配置且授权的图片生成后端为准。能读图片、目录里有一段生图脚本、或模型名称里写 img2，都不等于已具备可运行的生图能力。不为这条技能重复安装插件、下载模型或寻找密钥。
| 情况 | 路线 | 角色资源 |
|---|---|---|
| 有可用图片生成能力，用户未禁用 | **A 生图角色路线** | 参考图 → 每角色4×4透明动作表＋独立半身表情表 → 注册PNG → Canvas场景 |
| 没有图片生成能力，或用户选择纯代码 | **B 代码角色路线** | 独立半身与Q版小人绘制函数 → 角色色表 / 发型 / 帽饰 / 动作 → Canvas场景 |
| 没有实时生图能力，但已有用户提供的有效角色PNG | 复用PNG接入A的渲染段 | 明确说明使用已有资产，不能称新生成 |
A开工读 [references/imagegen-route.md](references/imagegen-route.md)，用 `scripts/register_actor_sheet.py` 与 `assets/imagegen-template/sprite-actor.mjs` 接入。B开工读 [references/code-route.md](references/code-route.md)，复制已升级的 `assets/cinematic-template/`。无论哪路，都复用同一套字幕、讲解组件与导出器。
有工具但当前生成失败或额度受限时，说明实际限制，按任务允许的范围改用已有PNG或B，不偷偷称调用成功。用户硬性要求特定生图方法时，先完成可独立推进的文案、场景与资产需求，缺该方法的角色生成不能冒充完成。
已有React游戏工程 `~/Desktop/zcode/ai-explain-game/game/` 仍可用于完整地图、选择题、评分和通关流程，接口见 [references/pipeline.md](references/pipeline.md)。只在需要其交互时接入；旧14×21精灵不是当前角色规范，不能原样放大作大人物。
把模板复制到本次项目再改；不修改已验收的旧期。产线检查入口缺失时核实实际工程，不另装替代系统。权威源是 `~/.agents/skills/ruic-pixel-explainer/`，其他agent经软链使用。
## 视觉重点
用户希望的是**原片那种简单、可读的粗像素**，不是更精细的像素插画。不要默认加密集纹理、蒸汽朋克装饰、发丝、亮晶晶大眼或满屏棋盘光环。