Communitygithub.com

HyperFrames 注册表技能

安装、发现并将注册表块和组件接入 HyperFrames 合成。适用于运行 hyperframes add 或 hyperframes catalog、安装单个项或匹配标签的所有块、将已安装项接入 index.html,或处理 hyperframes.json 的场景。涵盖发现、安装位置、块子合成接入、组件片段合并以及创作新块或组件以向上游贡献(构思 → 脚手架 → 验证 → PR)。

HyperFrames 注册表技能 是什么?

此技能使 AI 代理能够与 HyperFrames 注册表交互,该注册表提供可重用的块和组件,可通过 `hyperframes add <name>` 安装。块是独立的子合成(具有自己的尺寸、持续时间和时间线),通过 `data-composition-src` 包含在主机合成中;组件是没有自己尺寸的效果片段,直接粘贴到主机合成的 HTML 中。该技能支持发现、安装、接入和贡献工作流——包括使用自然语言查询对注册表目录进行语义搜索(通过 `--query` 或 `--on-device` 进行离线语义排名)、通过标签过滤和批量安装,以及根据安装的注册表项将块接入 `index.html`(设置 `data-composition-id`、`data-start`、`data-track-index` 等属性)。它还涵盖为创作新块或组件以向上游贡献的工作流(构思 → 脚手架 → 验证 → PR),并提供 HyperFrames CLI 的详细安装位置配置。

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

在你喜欢的 AI 中提问

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

文档

HyperFrames 注册表

注册表提供可通过 hyperframes add <name> 安装的可重用块和组件。

  • 块 — 独立的子合成(拥有自己的尺寸、持续时间和时间线)。通过 data-composition-src 包含在主机合成中。
  • 组件 — 效果片段(无自身尺寸)。直接粘贴到主机合成的 HTML 中。

快速参考

hyperframes add data-chart              # 安装一个块
hyperframes add grain-overlay           # 安装一个组件
hyperframes add captions                # 安装标记有 captions 标签的所有块
hyperframes add shimmer-sweep --dir .   # 指定目标项目
hyperframes add data-chart --json       # 机器可读输出
hyperframes add data-chart --no-clipboard  # 跳过剪贴板(CI/无头环境)

安装后,CLI 会打印已写入的文件以及要粘贴到主机合成中的代码片段。该片段是一个起点——您在接入块时需要添加 data-composition-id(必须匹配块的内部合成 ID)、data-start 和 data-track-index 属性。

位置参数首先解析为精确的项目名称。如果没有匹配的项目且该值是一个标签,则该命令会安装具有该标签的所有块。在请求的项目之前会安装注册表依赖项。hyperframes add 仅适用于块和组件;对于示例,请改用 hyperframes init <dir> --example <name>。

安装位置

默认情况下,块安装到 compositions/<name>.html。组件安装到 compositions/components/<name>.html。

这些路径可在 hyperframes.json 中配置:

{
  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
  "paths": {
    "blocks": "compositions",
    "components": "compositions/components",
    "assets": "assets"
  }
}

详细信息请参见 install-locations.md。

接入块

块是独立的合成——通过 data-composition-src 包含在您的宿主 index.html 中:

<div
  data-composition-id="data-chart"
  data-composition-src="compositions/data-chart.html"
  data-start="2"
  data-duration="15"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

关键属性:

  • data-composition-src — 块 HTML 文件的路径
  • data-composition-id — 必须匹配块的内部 ID
  • data-start — 块在宿主时间线中出现的时间(秒)
  • data-duration — 块的播放时长
  • data-width / data-height — 块画布尺寸
  • data-track-index — 图层顺序(值越高越靠前)

详细信息请参见 wiring-blocks.md。

接入组件

组件是代码片段——将其 HTML 粘贴到您的合成标记中,CSS 粘贴到样式块中,JS 粘贴到脚本中(如果有):

  1. 读取已安装的文件(例如,compositions/components/grain-overlay.html)
  2. 将 HTML 元素复制到您的合成的 <div data-composition-id="..."> 中
  3. 将 <style> 块复制到您的合成的样式中
  4. 将任何 <script> 内容复制到您的合成的脚本中(在时间线代码之前)
  5. 如果组件公开了 GSAP 时间线集成(请参阅片段中的注释块),请将这些调用添加到您的时间线中

详细信息请参见 wiring-components.md。

发现

使用 CLI 作为主要发现界面。先按意图搜索,再浏览: 注册表中的项目比您用眼睛扫描的要多,因此列出它们并按名称或标签匹配是缓慢的路径,并且当作者的措辞与您的措辞不同时,它会失败。

# 根据节拍应该执行的操作对整个目录进行排名
npx hyperframes catalog --query "逐行揭示标题"
npx hyperframes add caption-clip-wipe

搜索是本地进行的,不会发送任何内容。默认情况下,它根据与项目名称、标题和描述共享的词汇进行排名,因此它只会找到重用您词语的项目;--on-device 则根据含义进行排名,需要一次性的模型下载。使用 --json 时,信封会指示哪个层级回答了问题,因此请检查该信息,而不是假设排名已完成。

可安装性在排名之后应用,而不是之前:向量携带但此注册表无法提供的名称会从结果中删除并计入 dropped,因此非零的 dropped 表示两者属于不同代。请参阅 /hyperframes-cli 了解离线层级、同意门以及如何刷新过时的索引。

要浏览或过滤而不是搜索:

npx hyperframes catalog
npx hyperframes catalog --type block
npx hyperframes catalog --type component
npx hyperframes catalog --type block --tag social
npx hyperframes catalog --json
npx hyperframes catalog --human-friendly

正常的表格和 --json 模式仅列出匹配项;使用 hyperframes add <name> 安装选定的名称。--human-friendly 会打开一个交互式选择器并立即安装所选项目。在 CI 或代理工作流中,优先使用 --json,然后显式执行 add。

如果 CLI 无法访问配置的注册表,请检查原始清单作为后备:

curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json

每个项目的 registry-item.json 包含:名称、类型、标题、描述、标签、尺寸(仅块)、持续时间(仅块)和文件列表。

有关按类型和标签过滤的详细信息,请参见 discovery.md。

贡献新的块或组件

要创作一个新的注册表项目(字幕样式、VFX 块、过渡、下三分之一或可重用组件)并将其作为上游 PR 提交——而不是安装现有项目——请遵循 contributing.md 中的完整构思 → 脚手架 → 构建 → 验证 → 预览 → 发布工作流。启动器模板(字幕 / VFX / 组件 / registry-item.json)可在 templates.md 中复制粘贴。

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

Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo, explainer, captioned clip, title card, overlay, slideshow or interactive deck, Remotion port, or any HyperFrames HTML composition. Also use it to inspect, diagnose, validate, preview, publish, or batch-render an existing HyperFrames project. Inputs may be a website URL, GitHub PR, Figma design or URL, text or brief, existing footage, or music. It resumes project state, captures intent when applicable, selects and installs the owning workflow, and routes domain capabilities. HyperFrames is the default output framework unless the user explicitly chooses another framework for the deliverable or asks only to record a browser session.\n

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.

相关技能