SkillFoxx

Code Animation Prompts skill

A skill with 341 ready styles that Claude Code and Codex pick by code to turn an idea into code-driven animation and video

  • 1,012 ★ on the repository
  • Last commit
Skill

Extended access

Why this level

  • The installer copies files into the agent's skills directory and video rendering runs third-party dependencies on your machine.
All reasons and checks

xiaoyecodes/code-animation-promptsAuthor:XiaoyeCodes

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/code-animation-prompts

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • The installer copies files into the agent's skills directory and video rendering runs third-party dependencies on your machine.

This is third-party code. Review the repository files before installing.

What it does

The skill connects a library of 341 visual style prompts to Claude Code or Codex: particles, neon, ink, paper cut-out, comics, cinematic frames. 196 styles come with reference stills, the rest are described in text. The agent finds a style by code or keyword with `scripts/styles.py search` and reads it with `show`, so the whole library never enters the context. It then plans scenes, builds editable HTML animation and, when the dependencies exist, renders frames to MP4. The bundle includes an offline style picker with search and export of the chosen list. The installer copies the skill folder for the chosen agent.

Who it is for. Motion designers and marketers who make animated intros and explainers with an agent and want to choose a style from a catalog instead of describing it in words.

Good fit when

  • A 12-second intro in a paper cut-out or ink style is needed and the designer wants to name the style by code.
  • The client has not picked a style and the agent has to offer three options with colour and motion notes.
  • An explainer for schoolchildren is built in a hand-drawn whiteboard style with large captions.
  • The animation is assembled as an HTML page that is edited by hand and then rendered to MP4.

Not a fit when

  • A ready video model is needed that draws a clip from text without writing code.
  • The project needs a verified license for every style and the terms of some third-party styles are unchecked.
  • The video is assembled in an editor without HTML or code.

Example request

/code-animation-prompts Make a 12-second intro in style Z5 (paper cut-out), 16:9, red paper and warm shadows. Give me HTML and keyframes first.

Limitations

The skill supplies styles and a working order, while the agent writes and renders the animation, so the result depends on the model and environment. MP4 export needs separate render dependencies that the installer does not add. Styles in the L, V and X series come from third parties, see `LICENSE.md` for the terms: the repository has no detected SPDX license. Style texts and documentation are in Chinese and there is no Russian interface. The `scripts/styles.py` script needs Python 3.10 or newer.

How to disable. Delete the `code-animation-prompts` folder from `~/.claude/skills/` or `~/.agents/skills/`. On a repeat run the installer does not overwrite an existing folder.

FAQ

How do I install the skill in Claude Code?

Clone the repository and run `python scripts/install_skill.py --target claude`. Use `--target codex` for Codex and `--target both` for both.

Are API keys or paid services required?

No, searching and reading styles works locally. Only the agent itself is billed by its platform.

Do all 341 styles have images?

No: 196 have reference stills and 145 have only a text description. Stills show the direction while the result depends on the implementation.

What does the offline style picker do?

It is a page in `assets/library` where styles are searched, filtered by category, viewed large and exported as a chosen list. The list is then handed to the agent.

Which style series does the library have?

Series A to G give code samples, M covers motion and narrative, K, Z and R cover drawing manner, H covers layout, L, V and X come from third parties and O sets cinematic references.

Discussion

No questions or reviews yet.

Skills

Skill for Claude Code: the agent makes a short film entirely in code in a chosen style, with no video model or stock footage

SkillExtended access15.2K

A Claude Code skill that builds motion graphics in code: 21 ready looks, five questions, three approval stills and an MP4 render.

SkillExtended access166
Editors’ pick

A video editing skill for Claude Code and Codex: the agent cuts pauses and filler words, grades color, burns subtitles and adds animated overlays

SkillExtended access30.9K

A skill for Claude Code and Codex: the agent writes animation scenes, a browser player shows them, export to MP4 and Lottie.

SkillExtended access56

A set of 11 skills for Claude Code and Codex: from an idea or a novel to episode scripts, storyboards, image and video prompts, and a finished cut

SkillExtended access4.2K

The Video by Reference skill learns style from a sample clip and builds an animated short from code with an original soundtrack

SkillExtended access76

Comparison with similar tools

Cards that share the main search query, and how they differ.

ToolOfficialRepository starsMain difference
Code Animation Prompts (this card)no1,012
HyperFramesno83,283renders HTML to video as a framework; here the skill is built around a style library searchable by code
Motion Design Skillno2,980gives animation rules for interfaces; here a numbered catalog of ready visual styles

README in short

The README shows a style gallery, a table of components, a ready prompt for installing through an agent and sample requests for Codex and Claude Code. The offline picker and HTML-to-video rendering are described separately.

README badge

Original SKILL.md

---
name: code-animation-prompts
description: 使用 341 种风格提示词和参考静帧制作代码动画、HTML 动效或视频。适用于按风格编号选型、组合视觉风格、把内容转成可编辑动画并渲染成片。
---

# Code Animation Prompts

将用户的内容转成有明确视觉风格、可编辑、可复现的代码动画。素材库在本技能的 `assets/library/`，包含 341 份提示词、196 张参考静帧、离线挑选器和原始示例。

## 找到合适的风格

以本文件所在目录为技能根目录，执行脚本时使用它的绝对路径；不要假定当前工作目录是技能目录。

```bash
python "<技能目录>/scripts/styles.py" search 水墨
python "<技能目录>/scripts/styles.py" search 粒子 --series AG
python "<技能目录>/scripts/styles.py" show B3
python "<技能目录>/scripts/styles.py" list --series Z
```

索引见 [references/catalog.json](references/catalog.json)，只含编号、名称、标签与文件路径。优先查索引，再读取选中的 Markdown 和同名静帧；不要一次加载全部提示词。没有 Python 时直接查索引与文件。

- 用户给了编号或挑选器导出的清单：精确匹配，保留编号和名称。
- 用户只描述气质：给出 2–3 个匹配项，说明色彩、运动和适用内容；用户已要求直接制作时选择最匹配的一项并继续。
- A–G 是带代码的样片；M 是运动／叙事；K、Z、R 是画风；H 是版式；L、V、X 是第三方风格；O 是电影视觉参考。不要把多个风格的全部约束机械叠加，应确定主画风、运动方式和版式各自的职责。
- 145 个条目没有静帧；明确说明文字参考，不虚构截图。
- **B6 只存在于原始示例目录，不在 341 个风格条目中。** 用户点名 B6 时阅读 `assets/library/示例/B6_光速穿梭·爆炸·重聚_同一份提示词/提示词.md`，不要冒充索引中有 B6。

## 从提示词到可编辑动画

从用户要求中提取内容、时长、画幅、字幕及声音选择。遵循用户已经给定的参数；缺失且不影响内容时可采用 12 秒、1920×1080、30 fps、无声预览，并说明假设。不要把无声预览描述成已经配音或配乐的成片。

读取所选提示词，填充 `{{ }}` 占位符，保留形成该风格的核心视觉特征。原提示词中的“只输出代码”等措辞是局部素材模板，不能覆盖当前用户的交付需求。原始示例的模型名称是素材记录，不代表本技能验证过这些模型。

一般从 HTML + Canvas／SVG／CSS 开始；复杂空间镜头可用 Three.js，已有 Remotion 等工程则沿用工程。选择满足画面要求的实现，不强制改框架。需要外部字体、图片、库或音频时，检查来源与实际可用性。

浏览器动画需要稳定导出时，采用 [references/rendering.md](references/rendering.md) 的时间接口：画面由秒数 `t` 决定，随机数固定种子，导出时关闭实时循环。模板见 [assets/starter/index.html](assets/starter/index.html)，它只演示接口，不是 341 个风格之一。

在用户工作目录中保存项目，保留技能素材库原样。将文案、颜色、节奏等常改参数集中配置；长片先确定镜头顺序与每段时间，再实现。

## 验收与交付

打开动画，检查首帧、中段、尾帧及转场：字体、溢出、黑帧、图像加载、字幕可读性。确认相同时间重复渲染一致，并且不同时间确实有预期运动。

用户要 MP4 时，实际渲染并检查分辨率、时长、帧率和声音轨。可使用随附的 `scripts/render_video.py`，接口和依赖见渲染说明。若缺少渲染依赖，交付已完成的 HTML、源码与准确的运行命令，并明确视频尚未导出；不能把 HTML 或录屏命令当成成片。

Report a problem