hyperframes-registry

Mechanism

When It Triggers · How It Works · What It Produces

Breaks down how the skill works and what it produces, so you can quickly judge whether it fits your scenario and value.

Trigger

When running hyperframes add / hyperframes catalog, wiring installed blocks/components into index.html, editing hyperframes.json, or authoring a new registry item to contribute upstream.

Mechanism

Resolve positional arg as exact name or tag, install deps first, write files to configured paths
Print snippet; user adds timing/track attributes for blocks or merges component HTML/CSS/JS
Discover via CLI catalog (json/type/tag filters) or raw registry.json fallback
Contribute: idea → scaffold → validate → PR per contributing.md

Result

Reusable blocks/components installed and wired into a HyperFrames composition, or a new item published upstream — faster composition assembly with validated pieces.

Use Cases

Two Typical Use Cases

Scenario 01

Assemble promo with registry blocks

A video editor building a HyperFrames promo needs a data-chart block and a grain-overlay component. They run `hyperframes add data-chart` and `hyperframes add grain-overlay`, then paste the printed snippets into index.html with proper data-start/track-index attributes and merge component CSS/JS. The skill guides exact wiring so the composition renders correctly without hand-building effects.

Scenario 02

CI installs caption blocks by tag

An agent in a CI workflow needs every block tagged 'captions'. It runs `npx hyperframes catalog --type block --tag captions --json`, parses names, then `hyperframes add <name>` for each. Install locations follow hyperframes.json. The skill ensures deterministic, headless installation and wiring-ready snippets, enabling automated video pipeline builds without manual discovery.

Skill Relationships

Which Skills I Use · Which Skills Use Me

Dependency relationships read as "the upper tier points to the lower tier." The current Skill sits in the middle tier — above are Skills that depend on it, below are Skills it depends on.

Tier 1 · These Skills Use Me

Tier 2 · Current Skill

hyperframes-registryCli Manual · Workflow

Tier 3 · I Use These Skills

Full Relationship Graph

Browse this skill's relationships within its skillset. Click a node to switch the side panel; use the search box to jump to any skill.

Skill File

SKILL.md

Open in GitHub ↗

SKILL.mdLoading from GitHub…

Skill Composition

Open in GitHub ↗

SKILL.md10.0%
references70.0%
other20.0%

▸skills/hyperframes-registry/
▸root
- ·SKILL.md
- ▸examples
  - ·add-block.md
  - ·add-component.md
- ▸references
  - ·contributing.md
  - ·demo-html-pattern.md
  - ·discovery.md
  - ·install-locations.md
  - ·templates.md
  - ·wiring-blocks.md
  - ·wiring-components.md

Per the Agent Skills spec, SKILL.md is the only required file. The colored bars classify the rest into the three spec-aligned optional directories (scripts / references / assets) and an 'other' bucket. The full directory tree is below.

Related in Skillset

You May Also Need These Skills

hyperframes-creative

Non-animation creative direction for HyperFrames videos: handles design specs, palettes, typography, narration, beat planning, audio-reactive visuals, and brand decisions. Method: read spec or pick route, plan beats, use references and scripts. Value: coherent style and validated plan ready for animation.

Style Guide · Workflow

hyperframes-animation

HyperFrames Animation provides all motion knowledge: atomic rules, scene blueprints, transitions, techniques, and 7 runtime adapters (GSAP default). It helps compose deterministic, seek-safe animations by picking rules or loading blueprints and auditing via scripts. Value: faster authoring of render-ready video compositions.

Style Guide · Workflow

figma

Imports Figma content into HyperFrames compositions via REST CLI and Figma MCP. Covers assets, brand tokens, components, motion, and shaders with local freezing and brand-variable binding. Delivers deterministic, editable video compositions from Figma designs.

Cli Manual · Workflow

hyperframes-core

The HyperFrames composition contract skill teaches how to build one renderable HTML-based video project: structure, data-* timing, clips/tracks, sub-compositions, variables, deterministic rules, and validation. It delivers correct, seekable, framework-owned compositions and covers Tailwind and STORYBOARD/SCRIPT plans.

Style Guide · Workflow

/hyperframes-registry

When It Triggers · How It Works · What It Produces

Trigger

Mechanism

Result

Two Typical Use Cases

Assemble promo with registry blocks

CI installs caption blocks by tag

Which Skills I Use · Which Skills Use Me

Full Relationship Graph

SKILL.md

Skill Composition

You May Also Need These Skills

hyperframes-creative

hyperframes-animation

figma

hyperframes-core

When It Triggers · How It Works · What It Produces

Trigger

Mechanism

Result

Two Typical Use Cases

Assemble promo with registry blocks

CI installs caption blocks by tag

Which Skills I Use · Which Skills Use Me

Full Relationship Graph

SKILL.md

Skill Composition

You May Also Need These Skills

hyperframes-creative

hyperframes-animation

figma

hyperframes-core