hyperframes-registry

Search, install, and wire registry blocks and components into HyperFrames compositions.

Updated Aug 25, 2026
One-click install
npx skills add https://github.com/Sergiotsk/Interstellar --skill hyperframes-registry-sergiotsk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-registry
Source: https://github.com/Sergiotsk/Interstellar/tree/main/.agents/skills/hyperframes-registry
Command: npx skills add https://github.com/Sergiotsk/Interstellar --skill hyperframes-registry-sergiotsk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Hand-building named visual effects like glitch transitions, film grain, charts, or terminal windows from scratch is slow and error-prone when a hosted registry of roughly 400 reusable blocks and components already covers many of them. ## Core Features & Use Cases - Registry Discovery: Rank the whole catalog against an intent query with hyperframes catalog --query, filter by type or tag, and report gaps with hyperframes feedback --search-miss. - Install and Wiring: Install blocks to compositions/ and components to compositions/components/ via hyperframes add, then wire blocks with data-composition-src attributes or merge component snippets into host HTML, CSS, and GSAP timelines. - Contributing Upstream: Author a new block or component following the idea → scaffold → build → validate → preview → ship workflow, including lint, check, registry regeneration, and PR submission. - Use Case: A storyboard calls for a shimmer sweep on a title; search the catalog, run hyperframes add shimmer-sweep, paste the snippet into the composition, and add the timeline call. ## Quick Start Ask the agent to search the HyperFrames registry for the visual effect named in your brief and install the matching block or component into your 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 a block from the HyperFrames registry?▼

Run `hyperframes add <name>`, for example `hyperframes add data-chart`. Blocks install to `compositions/<name>.html` by default, and the CLI prints the files written plus a wiring snippet for your host composition.

How do I search the HyperFrames catalog for an effect?▼

Use `npx hyperframes catalog --query "<what the move should do>"` to rank the whole catalog by intent. Always query in English, since both search tiers index the English catalog; queries in other scripts return nothing.

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

Blocks are standalone sub-compositions with their own dimensions, duration, and timeline, included via `data-composition-src`. Components are effect snippets with no own dimensions that you paste directly into a host composition's HTML, CSS, and script.

Can I install HyperFrames registry items offline?▼

No. Discovery works offline because a cached manifest keeps serving past its refresh window, but `hyperframes add` fetches the item's actual files on every install, so installing requires network access to the registry.

What should I do when the catalog has no matching item?▼

Report the gap with `npx hyperframes feedback --search-miss "<query>" --wanted "<the move you needed>" --tier <tier>` before hand-authoring the effect. Describe the effect you wanted rather than an imagined item name.

How do I contribute a new block or component to the registry?▼

Follow the six-step workflow: clarify the item type, scaffold the directory with registry-item.json, build from the provided templates, validate with `hyperframes lint` and `check`, preview with render and snapshot, then regenerate registry.json and open a PR.