What is the difference between a block and a component in HyperFrames?

Blocks are standalone sub-compositions with their own dimensions and timelines included via data-composition-src. Components are smaller HTML/CSS snippets designed to be pasted directly into a host composition.

How does the skill handle the 'hyperframes add' command?

The skill manages the CLI execution, interprets the output (file paths and snippets), and then helps you manually wire the new assets into your index.html with the correct data attributes.

Can I use this skill to find new assets in the registry?

Yes, the skill can browse the registry manifest to discover available blocks and components, including their descriptions, tags, and required dimensions.

Does it support custom project structures?

Absolutely. It can read and modify the hyperframes.json file to respect or define custom paths for blocks, components, and assets.

HyperFrames Registry | Claude Code Skill for UI Components

The HyperFrames Registry skill enables seamless management of modular video composition assets. It automates the process of adding reusable blocks and component snippets via the CLI, while providing expert guidance on 'wiring' these elements into host HTML files. By managing the hyperframes.json configuration and ensuring correct attribute mapping for timelines—such as start times, durations, and track indices—it streamlines the development of complex, multi-layered visual compositions. This skill is essential for developers building dynamic motion graphics or data-driven video interfaces using the HyperFrames framework.

Características Principales

01Automated installation of registry blocks and components

02Configuration management for project-specific install paths

03Registry discovery and manifest exploration

042,820 GitHub stars

05Precise wiring of sub-compositions with timeline attributes

06Smart merging of component HTML, CSS, and GSAP snippets

Casos de Uso

01Adding dynamic data-chart blocks to a master video composition

02Integrating visual effect snippets like overlays or sweeps into existing HTML

03Configuring custom asset and composition directories in hyperframes.json

Tieline — product intent grounded in code

HyperFrames Registry Manager

Características Principales

Casos de Uso

Remotion Video Engineering

UI to Vue 3 Converter

Frontend Slides

Características Principales

Casos de Uso