20:"$Sreact.view_transition" 21:I[9754,["/_next/static/chunks/2t36f5p4pjzlb.js","/_next/static/chunks/1gyqeidjm5eoa.js","/_next/static/chunks/0_fjnxc4tt_l_.js","/_next/static/chunks/1ymt1shyhmu-4.js","/_next/static/chunks/3kv2zf0i7s2wc.js","/_next/static/chunks/1vs_3g_g75zmk.js","/_next/static/chunks/2g4dh802s8oz3.js","/_next/static/chunks/1bc3f0shukf1j.js","/_next/static/chunks/192kgs9v_t14j.js","/_next/static/chunks/0z6pw0v5c_lx5.js","/_next/static/chunks/08r60e6icmtkc.js","/_next/static/chunks/3trx6c0i7_x-3.js","/_next/static/chunks/40sro5bzp9bi_.js","/_next/static/chunks/1wgf3tk38y6cf.js"],"ProjectDetail"] 22:T623c, vibe-motion/skills · 信号到动效流水线

vibe-motion / skills · 信号到动效流水线

把一条原始输入，交给正确的动效技能。

vibe-motion/skills 是一套面向 Vibe Coding 的 agent skills 集合。在支持的智能体中调用某一项技能，让一段文字、一张 logo、一组价格序列进入流水线，出来的是各自动效语法的成品 —— 尺子进度、打字机、鱼群、K 线、3D 航线。

operand.in → skill → artifact.out npx skills add vibe-motion/skills

source1 repo

languagePython

installinteractive

stageactive

inskillout

// in

原始操作数

logo.png prompt.txt candlestick.csv

// skill

动效阶段 · 语法分流

中间走一段实时轨迹线，携带该技能的动效词汇 —— 规则推进、逐字键入、鱼群回旋、逐块组装。

// out

成品动效伪字段

brand promo · 16:9

SVG logo motion

typewriter page

fish swarm field

三分段是本页的组成模型，不代表仓库或智能体内部的真实流程顺序。

阶段有序，顺序决定语法

stage orders

输入操作数进入台架

一段文字、一张 logo 位图、一条价格序列 —— 原始材料先落上工作台。材种不变，语法未定。

skill

技能作为处理阶段

选中的技能接管材料，把它切进自己的动效语法。技能不同，同一个操作数可以得出完全不同的成品。

out

成品动效离台

保留最终形态的动效伪字段离开流水线：品牌视频、SVG logo 动效、打字机页面。哪个语法，由所选技能决定。

可以被加工的操作数

input operands

logo.png / jpg / webp

把自己转成可动效化的 SVG

pixel2motion 从位图或截图读取 logo，产出可变形的矢量，再生成品牌 logo 动效与交互式展示。

→ pixel2motion

prompt.txt

逐字打出的打字机页面

claude-typer 把文本当作逐字符敲击的序列，输出打字机节奏的文章呈现。

→ claude-typer

candlestick.csv / series

K 线序列的动画

remotion-candlestick 把价格序列渲染为随时间推进的 K 线动画。

→ remotion-candlestick

image.plane / street

航线与地球视图

threejs-earth-render 承接 3D 地球相关动效，依赖外部项目。

→ threejs-earth-render

audio.tone / fx

流程视觉

ruler-progress-render 以规则刻度推进的方式渲染进度类视觉。

→ ruler-progress-render

series.timebase

3D 价格走带

remotion-3d-ticker 以三维走带方式表现时间序列。

→ remotion-3d-ticker

选一项技能，切换动效语法

select a skill

› ruler-progress-render

规则刻度，逐格推进。

› claude-typer

逐字敲键，串成文章。

› procedural-fish-render

鱼群回旋，程序式涌现。

离台的成品形态

output artifacts

brand promo

品牌宣传视频

brand-launch-video-star 从官网或产品图制作 15–30 秒的品牌视频。

default EN · 16:9 · 15s

logo motion

SVG logo 动效

pixel2motion 把转成的 SVG 排成可动效的品牌展示。

animatable SVG · showcase

procedural

程序式场景

procedural-fish-render、3d-chladni-render、wechat-2d-render 等生成程序式画面。

swarm · chladni · 2d

sequence

时序动效

remotion-candlestick、remotion-3d-ticker 把时间序列渲染成动画。

candlestick · 3d ticker

motion principle

动画原则

disney-animation-rule-skill 把迪士尼 12 原则引入程序化动效设计。

12 principles · engineering

assembly / ink

组装与渲染件

svg-assembly-animator 组装 SVG 部件成动效；light-spotlight-render、printed-curtain-render 等承担灯光与材质渲染。

assembly · spotlight · curtain

把整条流水线带进你的智能体

run · install

installation

npx skills add vibe-motion/skills

然后交互式选择要安装的 skill 与对应的智能体。

查看仓库 ↗

常用技能 pixel2motion remotion-candlestick claude-typer procedural-fish-render brand-launch-video-star disney-animation-rule

台架永远欢迎新的阶段

contributing tray

提交技能

仓库开放贡献。往 vibe-motion/skills 添加新的动效技能，让它进入可调用的流水线。技能名与技术专名保持英文原名。

提交 pull request

打开的方向

题目围绕 agent 与 Vibe Coding 展开，覆盖前端与产品设计。仓库收录多种动画、渲染与组装技能。
一些技能依赖外部项目（如 threejs-earth），GIF 预览未必完整呈现效果。

vibe-motion / skills — 用于 Vibe Coding 的动画生成技能集 github.com/vibe-motion/skills

23:T6149, vibe-motion/skills · Signal to Motion Pipeline

vibe-motion / skills · signal to motion

Feed one raw input, and let the right skill decide the motion grammar.

vibe-motion/skills is a collection of agent skills for Vibe Coding. Invoke a skill inside a supported agent, feed it a snippet of text, a logo, or a price series, and a finished animation leaves the bench — a ruler that ticks, a typewriter, fish, candlesticks, a 3D route.

operand.in → skill → artifact.out npx skills add vibe-motion/skills

source1 repo

languagePython

installinteractive

stageactive

inskillout

// in

Raw operand

logo.png prompt.txt candlestick.csv

// skill

Motion stage

A live trace carries the skill's motion vocabulary — ticking ruler, per-letter typing, swirling fish, block assembly.

// out

Finished artifact

brand promo · 16:9

SVG logo motion

typewriter page

fish swarm field

The three stages are this page's composition model, not a claim about the repository's or an agent's internal pipeline.

Ordered stages, decided grammar

stage orders

Input lands on the bench

A block of text, a logo bitmap, a price series — the raw material arrives unchanged. The grammar is not yet fixed.

skill

The skill is the processing stage

The chosen skill takes over the material and cuts it into its own motion grammar. The same operand can leave as very different artifacts.

out

The artifact leaves the bench

A finished artifact exits the line: brand video, SVG logo motion, typewriter page. Which grammar, the chosen skill decides.

Operands the bench can work

input operands

logo.png / jpg / webp

To an animatable SVG of itself

pixel2motion reads a logo from a bitmap or screenshot, produces a transformable vector, then generates brand logo motion and an interactive showcase.

→ pixel2motion

prompt.txt

A typewriter page, letter by letter

claude-typer treats text as per-character keystrokes and renders it with typewriter pacing.

→ claude-typer

candlestick.csv / series

An animated candle series

remotion-candlestick renders a price series as a candlestick animation advancing over time.

→ remotion-candlestick

image.plane / street

Routes and earth views

threejs-earth-render takes on 3D earth-related motion and depends on an external project.

→ threejs-earth-render

audio.tone / fx

Progress visuals

ruler-progress-render renders progress-style visuals by advancing a rule of ticks.

→ ruler-progress-render

series.timebase

A 3D price ticker

remotion-3d-ticker presents a time series as a three-dimensional ticker.

→ remotion-3d-ticker

Pick a skill, switch the grammar

select a skill

› ruler-progress-render

A rule of ticks, advancing step by step.

› claude-typer

Per-character keystrokes, strung into a page.

› procedural-fish-render

A fish swarm, emergent from procedures.

Artifacts that leave the line

output artifacts

brand promo

Brand promo video

brand-launch-video-star produces a 15–30 second promo from an official site or product images.

default EN · 16:9 · 15s

logo motion

SVG logo motion

pixel2motion arranges the converted SVG into an animatable brand showcase.

animatable SVG · showcase

procedural

Procedural scenes

procedural-fish-render, 3d-chladni-render, wechat-2d-render and more generate procedural imagery.

swarm · chladni · 2d

sequence

Time-series motion

remotion-candlestick and remotion-3d-ticker render time series as animation.

candlestick · 3d ticker

motion principle

Animation principles

disney-animation-rule-skill brings the 12 principles of animation into procedural motion design.

12 principles · engineering

assembly / ink

Assembly and render pieces

svg-assembly-animator assembles SVG pieces into motion; light-spotlight-render and printed-curtain-render handle lighting and ink-material renders.

assembly · spotlight · curtain

Bring the whole line into your agent

run · install

installation

npx skills add vibe-motion/skills

Then interactively choose which skills to install and which agent to target.

View the repo ↗

Common skills pixel2motion remotion-candlestick claude-typer procedural-fish-render brand-launch-video-star disney-animation-rule

The bench stays open to new stages

contributing tray

Submit a skill

The repo is open to contributions. Add a new animation skill to vibe-motion/skills so it can enter the invocable line. Skill names and technical terms keep their English names.

Open a pull request

Directions you can open

The theme orbits agents and Vibe Coding, touching frontend and product design. The repo holds a range of animation, rendering, and assembly skills.
Some skills depend on external projects (like threejs-earth), and GIF previews may not fully show a result.

vibe-motion / skills — animation skills for Vibe Coding github.com/vibe-motion/skills

a:[["$","$20",null,{"enter":{"secondary-forward":"secondary-forward","secondary-back":"secondary-back-enter","default":"none"},"exit":{"secondary-forward":"secondary-forward","secondary-back":"secondary-back-exit","default":"none"},"update":{"secondary-forward":"secondary-forward","secondary-back":"secondary-back-update","default":"none"},"default":"none","children":["$","$L21","cmsqzpz1600xhzn191rhm21dh:zh-CN:beautified",{"project":{"id":"cmsqzpz1600xhzn191rhm21dh","slug":"vibe-motion-skills","name":"skills","description":"为 Vibe Coding 准备的动画生成技能集","authorName":"vibe-motion","authorVerification":{"verified":false,"verifiedAt":null},"category":"development_tools","subcategory":"data_ai_tools","experienceUrl":null,"qualityScore":45,"featured":false,"officialSite":null,"views":{"original":{"available":true},"official":{"available":false,"reason":"disabled_by_policy"},"beautified":{"available":true,"reason":null},"defaultView":"beautified"},"beautifiedView":{"revisionId":"cmt2zh3pf01x56271gc4tbmy1","kind":"artifact","artifact":{"schemaVersion":"localized-static-html-v4","kind":"static_html","locales":["zh-CN","en"],"defaultLocale":"zh-CN","documents":{"zh-CN":"$22","en":"$23"},"designDirections":{"schemaVersion":"dodot-design-directions-v1","directions":[{"id":"dir-spectrum-of-hands","name":"Spectrum of Moving Hands","projectMetaphor":"A kit of discrete skills as a tool-belt of interchangeable hands — each installed skill is a distinct hand that acts on the same raw material (a prompt, an image, a series) to produce a specific kind of motion.","signatureVisual":"A horizontal rail of 'kinetic keys' — a row of reduced SVG glyph loops, each running its own recognizably different animation grammar (one ruler ticks forward, one types letter-by-letter, one swirls a fish swarm, one assembles blocks), arranged in a single continuous band.","heroGeometry":"A long horizontal metric band (16:4) subdivided into equally-weighted slots; each slot holds one motion glyph and its skill name, the band itself implying selection/invocation left to right.","sectionSequence":["intro-manifesto","band-of-skills","one-skill-mechanism","install-operand","output-spectrum","neighbor-context","contribute-strip"],"surfaceModel":"Flat ink-on-paper layered planes; each skill slot is an unraised tile separated only by weight of line and a single accent that travels with the currently-hovered skill, no shadows, only hairline dividers.","palette":"Paper white field with near-black ink; a single warm accent (embersh) travels and marks the active slot; motion-only color (no static decorative gradients).","typography":"Monospaced numerals for metrics and one skill monospaced token per slot; one humanist display face for section titles to counterbalance the technical glyphs.","desktopComposition":"A single overscan band across the viewport carrying all seven skill glyphs at native width; a fixed left gutter lists the seven skills as a vertical index while the right two-thirds scrolls detail panels beneath the band.","mobileTransformation":"The horizontal band collapses into a vertical accordion of stacked slots; the gutter index disappears and the skill glyph squashes inline with its name; the accent becomes a left-edge rail on the open slot.","mediaStrategy":"No remote or fake media; the band-of-skills glyphs are the only 'media', rendered as motion-bearing marks, each a genuine reduced expression of a named skill.","forbiddenPatterns":["Feature-card wall of identical rounded rectangles","Browser/terminal/editor shell","Decorative particle field or glow grid as background"],"compositionFingerprint":"one-overscan-band-plus-vertical-gutter"},{"id":"dir-signal-pipeline","name":"Signal-to-Motion Pipeline","projectMetaphor":"A tuning/processing bench: raw input (text, a logo PNG, a price series, an image) enters a staged bench, each skill is a processing stage, and order matters — the pipeline decides which motion grammar the final artifact takes.","signatureVisual":"A persistent three-stage horizontal pipeline rendered as connected lanes — IN (raw operand chip), SKILL (animated intermediate trace), OUT (the finished motion artifact) — where the SKILL lane is a live trace line carrying the actual motion vocabulary.","heroGeometry":"A wide 21:5 stage splitting into three unequal lanes left-to-right (narrow-narrow-wide); the third lane is the motion outcome field that visibly animates.","sectionSequence":["pipeline-hero","stage-orders","input-operands","select-a-skill","output-artifacts","run-install","contributing-tray"],"surfaceModel":"Machined metal-flat surfaces with thin grooved channels and knockout-type labels stamped into the surface; lanes read as routed tracks, not cards.","palette":"Cool technical grey field routed with a single signal accent (signal-amber) marking the active lane; dark ink operands stamped on the surface.","typography":"Engineering monospace throughout for stages and operands; a sparse uppercase tracking for operation labels; display type restricted to the title set.","desktopComposition":"Three fixed lanes spanning the full viewport width; a right-sidevertical rail lists install commands and contributes; scattered known operands (logo.svg, candlestick.csv, prompt.txt) stamped directly onto the lanes.","mobileTransformation":"The three lanes re-stack vertically as IN on top, SKILL middle, OUT bottom; the motion outcome field becomes the bottom full-width zone where the artifact plays; command rail folds into a bottom tray.","mediaStrategy":"No media assets; the pipeline and its inline stamped operands are the visual inventory, no screenshots, no fabricated output charts.","forbiddenPatterns":["Dashboard/editor shell frame","Three metric cards under a slogan","Generic placeholder media region"],"compositionFingerprint":"three-routed-lanes-with-stamped-operands"},{"id":"dir-emergent-collective","name":"Emergent Collective","projectMetaphor":"The whole as emergent from many discrete, animated parts — fish swarms, Chladni particles, virial trails — where one instruction sets thousands of small units into coordinated motion; the kit is the choreographer, not the canvas.","signatureVisual":"A coordinate field of many small displaced units that settle and re-settle around a single moving attractor (a point, a lane, a cursor); a legend read-out lists which skill owns which act of the choreography.","heroGeometry":"A near-square 1:1 field (larger than a hero) with a sparse still field of marks and one bright attractor path drawn across it on entry (reduced-motion safe; marks exist statically without the attractor).","sectionSequence":["field-hero","choreography-roster","one-instruction-one-act","swarm-logs","install-ritual","open-ensemble"],"surfaceModel":"Aerially-viewed ground plane of scattered unit marks; no stacked layers, all elements sit at the same depth; depth implied only by density of marks, never shadow.","palette":"Deep still-ground field with sparse luminous unit marks in two tones; one moving attractor in a third color; marks and attractor only, no decorative glow fill.","typography":"Tiny-width technical tabular for the roster read-out and coordinates; a geometric sans for titles; skill tokens always in tabular small caps.","desktopComposition":"The field occupies the stage; a thin left column is the choreography roster listing each skill and its act; below the field a horizontal log strip streams the last invoked acts.","mobileTransformation":"The field shrinks to a top band; the roster column becomes a swipable list; the log strip stays at bottom; the attractor path re-runs at reduced speed within the smaller field.","mediaStrategy":"No media assets; the unit-mark field is the sole visual system, knowingly derived from the swarming/particle skills, not presented as a product screenshot.","forbiddenPatterns":["Glow/particle field used only as decorative background","Rounded feature-card wall","Hero browser shell"],"compositionFingerprint":"still-unit-field-with-single-attractor-plus-roster-log"}],"selectedDirectionId":"dir-signal-pipeline","selectionRationale":"The project's mechanism is 'invoke one skill to convert a raw input operand into a specific animated artifact' — a staged processing relationship, exactly the composition the Signal-to-Motion Pipeline expresses (input operand enters, skill stage transforms, animated output leaves). This maps the strongest in-material facts: the install command operand, the diversity of skill outputs (logo-to-SVG, candlestick, brand video, fish swarm), and the discrete-invocable nature, into a single legible composition. Spectrum-of-Hands is expressive but reads as a generic gallery and risks masking the transformation mechanism; Emergent-Collective is dramatic but emphasizes atmosphere over the pick-a-skill-and-produce mechanism that carries the value. Neither has local media, and both focus on any-project decoration. Signal-to-Motion wins on mechanism clarity, evidence fit, and a mobile transformation that preserves the IN-SKILL-OUT order as vertical staging."},"designBrief":{"schemaVersion":"dodot-design-brief-v1","selectedDirectionId":"dir-signal-pipeline","projectMetaphor":"A tuning/processing bench: raw input (text, a logo PNG, a price series, an image) enters a staged bench, each skill is a processing stage, and order matters — the pipeline decides which motion grammar the final artifact takes.","signatureVisual":"A persistent three-stage horizontal pipeline rendered as connected lanes — IN (raw operand chip), SKILL (animated intermediate trace), OUT (the finished motion artifact) — where the SKILL lane is a live trace line carrying the actual motion vocabulary.","compositionFingerprint":"three-routed-lanes-with-stamped-operands","heroGeometry":"A wide 21:5 stage splitting into three unequal lanes left-to-right (narrow-narrow-wide); the third lane is the motion outcome field that visibly animates.","sectionSequence":["pipeline-hero","stage-orders","input-operands","select-a-skill","output-artifacts","run-install","contributing-tray"],"surfaceModel":"Machined metal-flat surfaces with thin grooved channels and knockout-type labels stamped into the surface; lanes read as routed tracks, not cards.","palette":"Cool technical grey field routed with a single signal accent (signal-amber) marking the active lane; dark ink operands stamped on the surface.","typography":"Engineering monospace throughout for stages and operands; a sparse uppercase tracking for operation labels; display type restricted to the title set.","desktopComposition":"Three fixed lanes spanning the full viewport width; a right-sidevertical rail lists install commands and contributes; scattered known operands (logo.svg, candlestick.csv, prompt.txt) stamped directly onto the lanes.","mobileTransformation":"The three lanes re-stack vertically as IN on top, SKILL middle, OUT bottom; the motion outcome field becomes the bottom full-width zone where the artifact plays; command rail folds into a bottom tray.","mediaStrategy":"No media assets; the pipeline and its inline stamped operands are the visual inventory, no screenshots, no fabricated output charts.","evidencePlan":["Show the install operand `npx skills add vibe-motion/skills` on the RUN-INSTALL lane as the native verbatim command.","Stamp real in-material operands (logo.svg to animatable SVG via pixel2motion, candlestick series via remotion-candlestick, prompt text via claude-typer) onto the INPUT lanes, tagged only to what the readme evidence supports.","The SKILL lanes carry reduced motion traces whose vocabulary maps directly to a named skill (ruler-progress-render ticks, procedural-fish-render swarm, disney 12-principle timing), each a genuine expression of that skill, not a fabricated screenshot.","OUT lane presents finished-artifact outcomes as descriptive labeled tokens (brand promo 16:9, SVG logo motion, typewriter page), using only categories the readme lists.","Choreography/order claim (IN then SKILL then OUT) is presented as the composition's own model, not asserted as a fact about the repository beyond what the evidence implies.","A real CTA to install and a contribution route to the vibes open repository provide the actionable edge the evidence supports."],"localeContract":{"zh-CN":"中文本地化使用自然的中文措辞；技能名（如 pixel2motion、remotion-candlestick）与安装命令 `npx skills add vibe-motion/skills` 保持原样不加翻译；阶段标签（IN/SKILL/OUT）可用中文意译如「输入 / 技能 / 输出」并保留英文操作符；文本密度按中文习惯处理。","en":"English copy uses natural phrasing; skill names and the install command `npx skills add vibe-motion/skills` stay verbatim; stage labels IN/SKILL/OUT read natively with the operand tokens unchanged; text density follows English reading conventions."},"forbiddenPatterns":["Feature-card wall of identical rounded rectangles","Browser/terminal/editor/shell frame","Three metric cards under a large slogan","Decorative particle field or glow grid used as a substitute for the pipeline visual","Fabricated output charts, screenshots, or testimonial quotes"]},"visualReview":{"schemaVersion":"dodot-automated-design-review-v1","status":"approved","summary":"页面忠实地实现了所选 Signal-to-Motion Pipeline 方向（brief 的 dir-signal-pipeline）。Hero 呈现真正的 IN/SKILL/OUT 三分段路由车道，且以 pipe-note 明确声明顺序只是页面组成模型而非仓库事实，证据边界处理得当。技能名、安装命令、操作数、成品形态全部有 material.json 依据，无捏造数据。phone CSS 在 max-width:900px 将三车道重排为竖向 IN→SKILL→OUT、在 640px 下网格全部坍缩为单列，形成真实重构。双语 7 节结构等价、措辞自然，技能名与命令原文保留。未见通用 Hero、三卡墙、浏览器壳或装饰性渐变网格；所有按钮/链接为真实跳转，无假控件。仅有一处音频操作数与 ruler-progress-render 的配对属于设计侧示意配对（证据仅支持 ruler 自身为进度渲染），列为 warning 但不阻断。","checks":{"projectFit":{"passed":true,"evidence":"结构完整对应 brief 的 sectionSequence：pipeline-hero、stage-orders、input-operands、select-a-skill、output-artifacts、run-install、contributing-tray 共 7 节（QA 确认 sectionCount=7，h2=6），落入下限 4 / 上限 7。Hero 采用三不等宽路由车道（1fr/2fr/3fr），对应 heroGeometry 的窄-窄-宽。桌面 .pipe 三车道横向、固定 gutter 式右侧 .rail-cmd 安装命令列表，符合 desktopComposition 的三固定车道加右侧垂直 rail。"},"evidenceBound":{"passed":true,"evidence":"安装命令 npx skills add vibe-motion/skills 逐字出现在 hero-operand chip 与 run-install .cmd（material readme.commands）。操作数 logos.png→pixel2motion、prompt.txt→claude-typer、candlestick.csv→remotion-candlestick 均在 readme 技能列表有据；SKILL 轨迹（ruler-progress-render 刻度、claude-typer 逐字、procedural-fish-render 鱼群）与 OUT 成品（brand promo 16:9、SVG logo motion、typewriter page）均对应 readme 声明。source 1 repo、language Python、stage active 来自 repository 事实。threejs-earth 依赖与 GIF 预览 caveat 取自 summary.caveats。pipe-note 明示三分段是页面组成模型而非仓库内部流程，符合 evidencePlan 的免责要求。"},"signatureVisual":{"passed":true,"evidence":"签名视觉——持续的三段水平 IN/SKILL/OUT 连接车道——在两种语言中被真实实现：.pipe 网格含三个 .lane（IN 原始操作数 chip、SKILL 实时轨迹线 path、OUT 成品 token 列表），SKILL 车道带琥珀色轨迹线，OUT 车道为深色字段并带成品标识。源代码中存在对应的实际 SVG path/marker，非占位符。"},"mobileTransformation":{"passed":true,"evidence":"@media (max-width:900px) 将 .pipe 重排为单列，DOM 顺序 IN→SKILL→OUT，与 brief 的 mobileTransformation 竖向重排一致；@media (max-width:640px) 下 orders/operand-grid/skill-trace/out-grid/tray 全部坍缩为 1fr 单列，.rail-cmd 安装命令随 .two-col(块)落至下方，形成 bottom flow/tray 折叠。hero-right 指标块在手机转为顶部横条上方整宽区块。网格边框、左右角线均按单列重排，构成真实重构而非同等缩放。"},"localeParity":{"passed":true,"evidence":"zh-CN 与 en 结构逐节对应（7 节、6 个 h2、同一 data-dodot-section）。技能名（pixel2motion、remotion-candlestick、claude-typer、brand-launch-video-star、disney-animation-rule-skill 等）与安装命令在两侧逐字保持原样，符合 localeContract。阶段标签 IN/SKILL/OUT 保留英文操作符，中文以「输入操作数/动效阶段/成品」自然意译；英文措辞自然（Raw operand / Motion stage / Finished artifact），中文密度适中（CJK 796 字，非直译机翻）。两侧语义等价。"},"antiTemplate":{"passed":true,"evidence":"未回退到通用 Hero/三卡/卡片墙。采用 three-routed-lanes 组合指纹，无浏览器/终端/编辑器壳，无完全相同圆角矩形卡片墙（各单元以发丝线分隔、无阴影、无圆角）。body::before 的全页网格是低透明（0.16）的蓝图式发丝网格，呼应机械台架/加工通道的 surfaceModel，非发光的装饰粒子场或渐变网格，且不替代 pipeline 视觉本体。cell/operand/artifact 均以规则分栏的加工台布局呈现，而非营销三卡。"},"noFakeUi":{"passed":true,"evidence":"所有交互元素均为真实且可跳转：.btn「查看仓库/View the repo」指向 github.com/vibe-motion/skills，.blink「提交 pull request/Open a pull request」指向 …/pulls。无假进度条、假播放器、假设备壳或装饰性按钮。QA 报告在四个视口-语言组合下均报告 fakeControlCount=0、brokenImageCount=0、networkRequests=[]，无外部/伪造媒体。"}},"issues":[{"code":"evidence-operand-pairing-warning","severity":"warning","locale":"all","description":"input-operands 中第 5 项把抽象操作数 audio.tone/fx 配对到 ruler-progress-render 并配文『流程视觉』。该操作数-技能配对并无 readme 直接证据支撑（证据仅支持 ruler-progress-render 自身为进度/刻度渲染），匹配关系属于设计侧示意。属轻微配色偏差，不构成事实捏造，因为技能描述本身准确且管道顺序已被 pipe-note 声明为页面组成模型。","repairInstruction":"可将该操作数改为更贴合 readme 的抽象形式（例如 progress.trace / ruler.frame 之类与进度渲染语义词面上更一致的命名），并确保描述仅陈述该技能已证实的职能，或直接在释义中标注该条目为示意配对。"}]},"repairEvidence":[],"provenance":{"executor":"opencode","model":"deepseek/deepseek-v4-flash","opencodeVersion":"1.1.58","promptVersion":"dodot-showcase-deepseek-v4","inputHash":"ac069c004234f8d3ceec4b0e4be3ff896ae116656ff37842f5f4a7ef54943e13","artifactHash":"d67b6f44cb360972cdd78ef2b882a4a89e6c0fe9d40c2700e33140585aa1ff2b","designSkill":"dodot-showcase-design"},"qaEvidence":{"zh-CN":[{"viewport":"desktop","passed":true,"localePassed":true,"metrics":{"language":"zh-CN","h1Count":1,"h2Count":6,"sectionCount":7,"textLength":2720,"cjkCount":796,"latinLetterCount":1338,"scrollWidth":1280,"clientWidth":1280,"scrollHeight":3861,"h1Top":140.59375,"bottomInset":79.859375,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"e6938847410c7b62bdacb2e7a0c83f0ba31048432359791301658057564ade2c","middle":"6fdf9d3cd668161ca2b2de5db1e2daab8dffebb5760bab54b6943306290db0c2","bottom":"9568d322b6f9beda15e14af89e6c16db0c6dbed91fece835314a6e126fb46ebe"},"consoleErrors":[],"networkRequests":[]},{"viewport":"mobile","passed":true,"localePassed":true,"metrics":{"language":"zh-CN","h1Count":1,"h2Count":6,"sectionCount":7,"textLength":2628,"cjkCount":796,"latinLetterCount":1261,"scrollWidth":390,"clientWidth":390,"scrollHeight":7476,"h1Top":151.1875,"bottomInset":80.40625,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"d28c1512f7a3a2377659fd26d450a839067ba0c78577b03a496c5f0fa23fb68a","middle":"a4f9d1e99d309dcc3a96a143ee6388f965bac9c5dff9cb1b3b2a111108f7e3d3","bottom":"2be3e8f7d5f06486f16f6304e12120dbab77b8d84208a223d039052531db4acc"},"consoleErrors":[],"networkRequests":[]}],"en":[{"viewport":"desktop","passed":true,"localePassed":true,"metrics":{"language":"en","h1Count":1,"h2Count":6,"sectionCount":7,"textLength":4720,"cjkCount":0,"latinLetterCount":3736,"scrollWidth":1280,"clientWidth":1280,"scrollHeight":4047,"h1Top":140.59375,"bottomInset":79.515625,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"07e5441322723aa8d4c643d6627c0eaad1c7f49e4bc5310eaa85d3a8509f5daa","middle":"e4eee066bd0aa4531355e80c25bbbe19904b8ab96f398c7d123171b4dee28f36","bottom":"7b210807da34d59bd9b0e699bf28716042842d9549994b64a4bd7bafcf0c8a0f"},"consoleErrors":[],"networkRequests":[]},{"viewport":"mobile","passed":true,"localePassed":true,"metrics":{"language":"en","h1Count":1,"h2Count":6,"sectionCount":7,"textLength":4628,"cjkCount":0,"latinLetterCount":3659,"scrollWidth":390,"clientWidth":390,"scrollHeight":8143,"h1Top":151.1875,"bottomInset":80.28125,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"6e32730c460965dcb3860dc6a340f2f524d7d7c9445ce986ec899e6dfba1f622","middle":"2a84f2909ebd28317e5dc3b02e43d695e67380e446d15aa7472fc58eaf5d77a0","bottom":"f5fdc9aea7c5129cf5c25f0ba4e8d8651b3c1a092ffd364f5754bd08358edef6"},"consoleErrors":[],"networkRequests":[]}]}},"generatorVersion":"opencode-1.1.58:deepseek/deepseek-v4-flash:dodot-showcase-deepseek-v4","publishedAt":"2026-08-20T10:09:48.777Z"},"rawExtraction":{"projectRevisionId":"cmt2zh3p501wz62714illjc90","projectVersion":1,"sources":[{"canonicalKey":"github:vibe-motion/skills","role":"primary","revisionVersion":1,"url":"https://github.com/vibe-motion/skills"}],"facts":[{"key":"repository_owner","value":"vibe-motion","evidence":[{"path":"repository.owner","excerpt":"vibe-motion"}]},{"key":"repository_name","value":"skills","evidence":[{"path":"repository.name","excerpt":"skills"}]},{"key":"description","value":"agent skills for vibe motion","evidence":[{"path":"repository.description","excerpt":"agent skills for vibe motion"}]},{"key":"primary_language","value":"Python","evidence":[{"path":"repository.language","excerpt":"Python"}]},{"key":"topics","value":"agent, skills, vibe-coding, vibe-motion","evidence":[{"path":"repository.topics","excerpt":"agent, skills, vibe-coding, vibe-motion"}]},{"key":"source_count","value":"1","evidence":[{"path":"projectRevision.sources","excerpt":"github:vibe-motion/skills"}]}],"taxonomy":{"category":"development_tools","subcategory":"data_ai_tools","confidence":0.65,"evidence":[{"path":"repository.description","excerpt":"agent skills for vibe motion"}]},"lifecycle":{"stage":"active","confidence":0.75,"evidence":[{"path":"repository.pushedAt","excerpt":"2026-08-12T14:54:38.000Z"}]},"userIntents":[{"slug":"build_software","label":"构建或改进软件","confidence":0.65,"evidence":[{"path":"repository.description","excerpt":"agent skills for vibe motion"}]},{"slug":"automate_work","label":"自动化工作流程","confidence":0.65,"evidence":[{"path":"repository.description","excerpt":"agent skills for vibe motion"}]},{"slug":"create_content","label":"创作内容或设计","confidence":0.65,"evidence":[{"path":"repository.description","excerpt":"agent skills for vibe motion"}]},{"slug":"learn_explore","label":"学习与探索","confidence":0.65,"evidence":[{"path":"repository.description","excerpt":"agent skills for vibe motion"}]}],"readme":{"headings":["安装","可用技能","ruler-progress-render","claude-typer","procedural-fish-render","svg-assembly-animator","pixel2motion","brand-launch-video-star","remotion-candlestick","light-spotlight-render","printed-curtain-render","remotion-3d-ticker","remotion-vinyl-player","threejs-earth-render","3d-chladni-render","wechat-2d-render","disney-animation-rule-skill","提交贡献","杂项","鱼群模拟"],"commands":["npx skills add vibe-motion/skills"]},"changeSet":[{"field":"repository","beforeHash":"552de61e11c60995f48f529be74bae5c34693b86d9d1c4290d622746761f5558","afterHash":"a3d8f485f6f3a46ced0dbb60068555634c68f12bf355e1f5fa776347fa478c3a"}]},"publishedAt":"2026-08-13T04:00:34.473Z","updatedAt":"2026-08-21T13:26:54.733Z","summary":{"id":"cmt2zh3p801x16271zgups4ro","projectType":"template","oneLine":"为 Vibe Coding 准备的动画生成技能集","overview":"vibe-motion/skills 是一套面向 Vibe Coding 的 agent skills 集合，包含多种动画生成技能，如尺子进度动画、打字机效果、程序化鱼群、SVG 组装动效、logo 转 SVG 动效、品牌宣传视频、K 线图动画、3D 地球航线、克拉尼粒子等。通过 npx skills add 安装后，可在支持的智能体中直接调用，快速生成可配置的动画演示。","highlights":["多种动画技能","交互式安装","支持自定义参数","含品牌视频制作"],"bestFor":["Vibe Coding 开发者","需要快速生成动画演示的创作者","品牌宣传视频制作者"],"caveats":["部分技能依赖外部项目（如 threejs-earth）","安装需选择对应智能体","GIF 预览可能未完全展示效果"],"categorySuggestion":"education","subcategorySuggestion":"prompt_skill_resources","lifecycleStages":["frontend","product_design"],"audienceIntents":["build","create","learn"],"confidence":0.8,"evidence":[{"claim":"仓库提供多个 agent skills，如 ruler-progress-render、claude-typer、procedural-fish-render 等，用于生成动画效果。","sourceType":"readme","locator":"https://github.com/vibe-motion/skills"},{"claim":"安装命令为 npx skills add vibe-motion/skills，交互式选择要安装的 skills 和对应的智能体。","sourceType":"readme","locator":"https://github.com/vibe-motion/skills"},{"claim":"pixel2motion 可将 PNG/JPG/WebP/截图中的 logo 转为可动效化的 SVG，并生成品牌 logo motion、交互式 HTML 展示等。","sourceType":"readme","locator":"https://github.com/vibe-motion/skills"},{"claim":"brand-launch-video-star 可从官网或产品图制作 15-30 秒的品牌宣传视频，默认英文、16:9、15 秒。","sourceType":"readme","locator":"https://github.com/vibe-motion/skills"},{"claim":"disney-animation-rule-skill 将迪士尼动画12原则应用于程序化动画的设计与工程实践。","sourceType":"readme","locator":"https://github.com/vibe-motion/skills"}],"publishedAt":"2026-08-17T13:52:00.485Z"},"github":{"url":"https://github.com/vibe-motion/skills","ownerAvatarUrl":"https://avatars.githubusercontent.com/u/268959773?v=4","starsCount":1063,"forksCount":72,"language":"Python","syncedAt":"2026-08-17T13:48:37.482Z","license":null,"defaultBranch":"main","archived":false,"disabled":false,"lastChangedAt":"2026-08-12T14:54:38.000Z","missing":false},"tags":[{"name":"Vibe coding","slug":"vibe-coding","verification":"verified","evidenceUrl":"https://github.com/vibe-motion/skills","evidenceExcerpt":"GitHub topic: vibe-coding"}],"updates":[]},"entryPoint":"discovery","claim":{"state":"unclaimed","verified":false},"initialView":"beautified","community":{"viewer":null,"state":{"likesCount":0,"creativeCount":0,"followersCount":0,"commentsCount":0,"liked":false,"creative":false,"followed":false},"comments":{"comments":[],"nextCursor":null}}}]}],"$L24"]