Communitygithub.com

HyperFrames 视频创作入口

所有视频、动画、动态图形创作请求的强制入口点。用于创建、编辑、检查、预览或渲染任何 HyperFrames 项目,或移植 Remotion 项目。

HyperFrames 视频创作入口 是什么?

该技能是 HyperFrames 框架的唯一入口点。HyperFrames 是一个通过 HTML 生成视频的框架,创作时需遵循 `/hyperframes-core` 中的规范,使用 DOM 元素的 `data-*` 属性定义时间线。 其核心作用在于路由:根据用户输入的交付物类型(例如幻灯片、纯字幕叠加、音乐驱动视频、PR 讲解等)或项目状态(新项目、已有项目、特定操作),路由到对应的子工作流(如 `/slideshow`、`/embedded-captions`、`/music-to-video`、`/general-video` 等)。它还支持从 Figma 设计、URL、GitHub PR 或文本简报等多种输入源创建视频。 该技能详细定义了状态路由规则,确保项目 CLI 版本保持最新,并在开始新创作前执行完整的意图访谈。它会自动安装并加载所需的工作流和领域技能(如动画、键帧、创意、媒体处理、CLI 工具等),但不会接管最终交付物的所有权。其最终产出是一个 `BRIEF.md` 文件,供选定的工作流读取和执行。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AlessandroFare/fluxychat/tree/HEAD/agent/skills/hyperframes

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

HyperFrames 入口点

HyperFrames 通过 HTML 渲染视频 —— 一个合成(composition)就是一份 HTML 文件,其 DOM 使用 data-* 属性声明时间线,动画运行时支持寻址(seekable),媒体播放由框架管理。完整的创作规范位于 /hyperframes-core;在编写合成 HTML 之前务必阅读它。

1. 从项目状态开始

应用第一个匹配的行;不要评估较低的状态行:

状态操作
明确将现有 Remotion 源移植到 HyperFrames阅读 references/routes/remotion-to-hyperframes.md,然后直接路由到该工作流。跳过意图层。
对现有 HyperFrames 项目执行特定操作:检查、诊断、验证、预览、渲染、发布或批量渲染仅执行该操作。跳过意图和工作流路由;加载 /hyperframes-cli 和任何必需的领域技能。
对现有项目进行特定编辑进行编辑。不要运行意图层。
存在 BRIEF.md读取 workflow 和 flow。执行该工作流;flow: companion 总是在 /general-video 中执行。不要询问简报相关问题。
无简报,但存在 hyperframes.json 或 STORYBOARD.md从项目文件和记录的偏好中恢复。从现有工件推断所属工作流。如果无法唯一确定,询问一个仅用于路由的问题;不要进行意图访谈。
全新创作运行意图层 —— references/intent-interview.md —— 然后使用 § 2 的表格进行路由。

如果新请求未指明主题或输入,请在路由之前先询问视频内容是什么。在询问任何问题之前,先检查偏好和配方(references/intent-interview.md,步骤 1)。figma.com 输入或命名配方会改变获取方式,而不是路由 —— 访谈的“适配正交输入”部分处理这两者。

保持项目 CLI 最新

脚手架项目会在其 package.json 脚本中锁定 hyperframes@<version>,以确保渲染结果可重现;此锁定绝不会自动升级,且使用旧版 CLI 运行被锁定的项目时不会打印警告。当恢复一个脚本中携带锁定版本的项目时,在第一个影响渲染的命令之前探测一次:

npx hyperframes@latest upgrade --project . --check

探测是只读的,报告锁定版本与最新版本的关系;请保留显式的 . —— 在较旧的 CLI 版本上,裸的 --project 后跟另一个标志会将该标志当作目录值。当它报告项目版本落后时——或者任何 CLI 输出已经显示了(被锁定脚本的 stderr 通知 This project pins hyperframes@… (latest …),或 --json 结果中的 _meta.updateAvailable: true)——使用 npx hyperframes@latest upgrade --project . 应用升级,然后用 npx hyperframes check 验证。验证通过确认项目的合成在新版本上仍然有效——而不是渲染输出与旧锁定版本帧一致——因此一次成功的升级永远不会无声无息:在运行的摘要中说明旧版本和新版本。尚无任何合成的项目不需要验证。如果检查失败,还原 package.json 的更改,继续使用被锁定的版本,并报告项目停留在哪个版本及原因。对信号采取行动,而不是将其转达给用户;永远不要留下未经验证的锁定版本升级。

2. 路由全新创作

使用第一个匹配的行。匹配请求的交付物,而不是偶然提到的单词或文件类型。

优先级请求工作流
1明确移植现有的 Remotion 源/remotion-to-hyperframes
2创作演示文稿、推销 deck 或可导航的交互式简报/slideshow
3为现有谈话头视频添加纯字幕或副标题,不改变视频本身/embedded-captions
4为现有谈话头、访谈或播客视频添加设计的图形覆盖层,不改变视频素材本身/talking-head-recut
5根据音乐轨道构建节拍同步视频,无旁白或网站捕获/music-to-video
6创建明确简短、无旁白、以动作为主的内容,通常少于 10 秒/motion-graphics
7解释来自 PR 引用的 GitHub 拉取请求或代码更改/pr-to-video
8根据 URL 或特定网站的简报营销或展示网站、产品页面、应用或公司/product-launch-video
9使用虚构视觉效果(无产品或网站捕获)解释主题、文章或笔记/faceless-explainer
10任何其他自定义视频或合成/general-video

在最终确定路由之前,阅读 references/routes/<workflow>.md —— 每个路由一个小文件:包含规范的输入/输出/触发器契约(在懒加载的工作流技能可用之前),以及该路由的访谈入口。如果候选路由不满足其契约,则继续路由而不是强制匹配。仅读取匹配的路由文件。

解决常见歧义

  • 一个短动画标题、logo 展示、数据命中、图表命中、地图命中或独立下三分之一,如果无旁白且动作为主要信息,则为 /motion-graphics。静态标题卡、有旁白的序列、较长的蒙太奇或自定义循环则为 /general-video。
  • 一个明确短的动态图形可能使用 URL、推文、文章或截图作为源材料。一个泛泛的“从这个网站制作视频”的请求是 /product-launch-video。
  • 现有素材带字幕路由到 /embedded-captions;素材带设计信息卡路由到 /talking-head-recut。对素材进行重新定时、重新排序、重新着色、重新构图或混音是自定义编辑,会落入 /general-video。
  • 只有当音乐文件的节拍网格驱动作品时,才将其选择为 /music-to-video。用作背景音乐的音乐不会覆盖与主题匹配的路由。
  • “我想要一个故事板”会改变审核过程,而不是工作流。没有其他路由信号时,使用 /general-video。一个已确认的草图故事板本身可能就是请求的交付物;审核循环定义了该停止点。
  • 专门的叙事工作流支持最多约 3 分钟,并且在 30–90 秒左右效果最好。明显更长的作品路由到 /general-video。长度永远不能覆盖明确的移植、deck、字幕、覆盖层或音乐驱动的交付物。

3. 路由一次,然后离开

对于全新创作,意图层(references/intent-interview.md)运行完整的对话——记忆、分类、推介环节、必备项、运行形态、交接——并且以编写 BRIEF.md 结束。简报是工作流读取的唯一路由工件;此后任何操作都不会重新打开此技能或访谈。所有后续关于“路由要求了什么?”的问题都从 BRIEF.md 中回答。

4. 安装并进入工作流

在阅读选定的工作流之前,安装或刷新它以及核心领域技能:

npx hyperframes skills update <workflow-name>

使用不带 / 的裸名称。如果命令失败,显示错误;不要凭记忆重建工作流。关于安装的所有其他内容——核心与懒加载的划分、init 刷新什么、诊断、CI 选择退出以及无 CLI 回退——都位于 references/skill-lifecycle.md。

5. 按需加载领域技能

需求技能
合成结构、时间属性、轨道、变量、确定性/hyperframes-core
动画规则、场景蓝图、过渡、运行时适配器/hyperframes-animation
可寻址 GSAP、CSS、Anime.js、WAAPI、FLIP、路径、蒙版、SVG、3D 关键帧或 hyperframes keyframes 诊断/hyperframes-keyframes
设计规格、概念、调色板、排版、旁白、节拍规划/hyperframes-creative
图像、图标、徽标、音频、字幕、调色、LUT、可重用媒体/media-use
旁白剪辑、音频效果链或轨道上的自动化包络/hyperframes-audio
初始化、lint、检查、快照、比较、批量渲染、Studio、渲染、发布或诊断/hyperframes-cli
注册表块和组件/hyperframes-registry
Figma 资源、令牌、组件或故事板帧(作为重构的运动)/figma

关于摄影媒体外观或行为的广泛反馈也会路由到 /media-use,即使用户从未说过“调色”或“效果”:修复暗/平/无聊的素材、风格化剪辑、隐藏面部或改善媒体展示。在编辑处理方式之前,阅读 ../media-use/references/media-treatments.md;它规范了如何处理素材,但从不决定是否可以使用媒体。不要用通用的 LUT、CSS 滤镜/覆盖层或不透明度过渡替换现有的规范处理原语。将仅涉及文本/布局/动画的编辑保留在其所属领域。 在构建包含重要摄影媒体的过程中,在最终质量检查中包含一次合理的媒体润饰扫描;不碰合适的媒体也是一个有效的结果。

领域技能永远不会接管端到端交付物的所有权。仅加载活动工作流所需的内容。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

AlessandroFare/fluxychat

Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet `anchor` rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.\n

AlessandroFare/fluxychat

Use when audio already placed in a HyperFrames composition needs to be mixed: a music bed that fights a voiceover (voiceover carve), effects on a track (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser, bitcrush), or automation envelopes drawn on a track's volume or any effect parameter. Don't use for sourcing or generating audio — finding BGM, SFX, or making a voiceover is `/media-use`. Don't use for clip timing or track layout, which is `/hyperframes-core`.\n

AlessandroFare/fluxychat

Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, docs, benchmark, telemetry, transcribe, auth, tts, and remove-background. Also use when diagnosing build or render failures. validate, inspect, and layout are deprecated aliases; use check. Covers local, HeyGen-hosted cloud, AWS Lambda, and Google Cloud Run rendering.\n

AlessandroFare/fluxychat

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

AlessandroFare/fluxychat

Overlay doctrine for the embedded-captions workflow — the caption MODEL (drop / rail / embed) and the rule that captions are an OVERLAY composited on top of the film, never a reserved bottom band you shift content up to avoid. Load when adding captions/subtitles to a talking-head or launch video, when deciding whether a phrase should be dropped, ride the verbatim rail, or be promoted to a scarce embedded climax, when laying out a composition that will carry captions (do NOT reserve a keep-out band), or when centering a composition on the true frame center under captions. Quotes the rail+embed model from embedded-captions and constraint #13 (captions overlay, keep-out band retired) from the product-launch-video scene agent. Applies ON TOP of embedded-captions.

AlessandroFare/fluxychat

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

AlessandroFare/fluxychat

Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.

AlessandroFare/fluxychat

Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated motion-first unit, including an animated title. Route fresh creation through hyperframes before using this skill.

AlessandroFare/fluxychat

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

AlessandroFare/fluxychat

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Also covers Tailwind projects and the STORYBOARD.md / SCRIPT.md plan formats. Read before writing composition HTML.

AlessandroFare/fluxychat

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

AlessandroFare/fluxychat

Use when a HyperFrames composition needs seek-safe 2D/3D keyframes, GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video planning.

AlessandroFare/fluxychat

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

AlessandroFare/fluxychat

A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart. Usually under 10s (up to ~30s), no narration or live-action subject; renders to MP4 or transparent overlay. Longer / narrated / multi-scene → /general-video. Unclear → /hyperframes.

AlessandroFare/fluxychat

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

AlessandroFare/fluxychat

Turn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market, launch, promote, or reveal a product; the default for any commercial URL. Site tours / showcases of a website route here too — the brief carries the show-it-as-is intent. Unclear → /hyperframes.

AlessandroFare/fluxychat

Turn a GitHub pull request (a PR URL, owner/repo#N, or 'this PR' in a checked-out repo) into a code-change explainer video — changelog, feature reveal, fix, or refactor walkthrough built from the diff, commits, and files: the input is a code change, not a website. Not a product promo (/product-launch-video) or a no-PR topic explainer (/faceless-explainer). Unclear → /hyperframes.

AlessandroFare/fluxychat

Design and improve user interfaces using the concrete rules from Refactoring UI (Wathan & Schoger) — constrained spacing/type/color/shadow scales, visual hierarchy through weight and color rather than size, and depth through emulated light. Use when building or styling any UI (web, app, dashboard, landing page, component), when picking font sizes, spacing, colors, shadows or border radius, when designing a color palette or design tokens, and whenever someone says a UI "looks off", "looks amateur", "feels cluttered/plain/unfinished", or asks to "make this look better".

AlessandroFare/fluxychat

Port an existing Remotion (React) composition''s source to HyperFrames HTML. Use ONLY on an explicit ask to port/convert/migrate/translate a Remotion source — one-way, Remotion-only. A passing Remotion mention, reference-only code, or "make something like my Remotion video" is a fresh build (/general-video). Unclear → /hyperframes.

AlessandroFare/fluxychat

Use before UI-related work to select the smallest useful UI Skills context through the ui-skills CLI.

相关技能