hyperframes-registry

Automates installation and wiring of HyperFrames registry components into video compositions.

Updated Apr 14, 2026
One-click install
npx skills add https://github.com/Evilavy/lavvy --skill hyperframes-registry-evilavy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: hyperframes-registry
Source: https://github.com/Evilavy/lavvy/tree/main/.agents/skills/hyperframes-registry
Command: npx skills add https://github.com/Evilavy/lavvy --skill hyperframes-registry-evilavy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates the tedious and error-prone process of manually installing and wiring reusable animated assets from the HyperFrames registry into video compositions, saving developers time and reducing configuration mistakes.

Core Features & Use Cases

  • Registry Item Installation: Guide users through installing both standalone blocks and effect components via the hyperframes add command, with support for custom install paths and headless environments.
  • Wiring Instructions: Provide step-by-step guidance for wiring installed blocks into host compositions using data-composition-src attributes, and merging component HTML, CSS, and JS snippets directly into existing compositions.
  • Discovery & Configuration: Help users browse available registry items, filter by type and tags, and configure install locations via hyperframes.json to match custom project structures.
  • Use Case: For example, a developer building a HyperFrames product demo can use this Skill to quickly add an animated data chart block and a shimmer text effect component, then wire them correctly into their main composition without manual trial and error.

Quick Start

Use the hyperframes-registry skill to install the data-chart block and wire it into your existing HyperFrames index.html file to display an animated chart 5 seconds into your 30-second video composition.

Frequently Asked Questions about hyperframes-registry

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install reusable blocks from the HyperFrames registry into my video composition?

Install HyperFrames blocks by running the `hyperframes add` command, which supports custom install paths and headless environments. This automates downloading and placing animated assets into your video composition project structure.

How do I wire HyperFrames components into an existing HTML composition?

Wire HyperFrames components by using `data-composition-src` attributes for blocks and merging component HTML, CSS, and JS snippets directly into your existing video composition files to ensure correct rendering.

Can I configure custom install paths for HyperFrames blocks?

Yes, configure custom install paths for HyperFrames blocks by defining the target locations in a `hyperframes.json` file. This allows the registry installation to match your specific project structure.

How do I browse and discover available animated assets in the HyperFrames registry?

Discover available HyperFrames registry items by browsing the manifest and filtering by type and tags. This helps you find specific animated blocks and effect components suitable for your video composition.

What is the best way to add an animated data chart to a HyperFrames video project?

Add an animated data chart to a HyperFrames video by using the `hyperframes add` command to install the block and then wiring it into your main composition, eliminating manual configuration trial and error.

Why are my manually installed HyperFrames blocks not rendering correctly in my video composition?

Manual HyperFrames block installation often fails due to incorrect wiring or incomplete snippet merging. Using an automated registry installation ensures valid block sub-composition inclusion and correct component snippet merging.