ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-03 04:38:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs(skill): add catalog references for blocks and components

Browse Source 
Surface the full registry of pre-built blocks and components directly
in the main authoring skill so agents know what's available before
building from scratch. Adds CLI commands, use-case tables grouped by
category (transitions, social, data, maps, VFX, captions, overlays),
and quick-pick suggestions for common user requests.
This commit is contained in:
Miguel Ángel
2026-05-20 01:10:36 -04:00
parent ce95c9aea0
commit 552b9828f6
1 changed files with 50 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/hyperframes/SKILL.md
+50
View File
@@ -464,6 +464,56 @@ Skip on small edits (fixing a color, adjusting one duration). Run on new composi
---
## Catalog: Pre-Built Blocks & Components
The HyperFrames registry ships ready-to-use blocks (full compositions with fixed dimensions and duration) and components (reusable snippets you drop into any composition). Browse interactively or install directly:
```bash
npx hyperframes catalog # list everything
npx hyperframes catalog --type block # blocks only
npx hyperframes catalog --type component # components only
npx hyperframes catalog --tag social # filter by tag
npx hyperframes catalog --human-friendly # interactive picker
npx hyperframes add <name> # install into current project
```
Full catalog with previews: [hyperframes.heygen.com/catalog](https://hyperframes.heygen.com/catalog)
### When to suggest catalog items
Before building something from scratch, check whether a catalog item already covers the need. Suggest `npx hyperframes add <name>` when the user's request matches a category below — it's faster to customize an existing block than to author one from zero.
### Blocks by use case
| Need | Blocks | Tags to filter |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
| **Scene transitions** | `transitions-3d`, `transitions-blur`, `transitions-cover`, `transitions-dissolve`, `transitions-distortion`, `transitions-grid`, `transitions-light`, `transitions-mechanical`, `transitions-push`, `transitions-radial`, `transitions-scale`, `flash-through-white`, `cinematic-zoom`, `whip-pan`, `light-leak`, `glitch`, `cross-warp-morph`, `domain-warp-dissolve`, `swirl-vortex`, `ripple-waves`, `thermal-distortion`, `gravitational-lens`, `sdf-iris`, `ridged-burn`, `chromatic-radial-split` | `transition` |
| **Social media cards** | `instagram-follow`, `tiktok-follow`, `yt-lower-third`, `x-post`, `reddit-post`, `spotify-card` | `social` |
| **Data & charts** | `data-chart`, `flowchart` | `data`, `chart` |
| **Maps** | `us-map`, `us-map-bubble`, `us-map-flow`, `us-map-hex`, `world-map`, `spain-map` | `map`, `geography` |
| **Product & device showcases** | `app-showcase`, `vfx-iphone-device`, `ui-3d-reveal` | `showcase`, `device` |
| **VFX & motion graphics** | `vfx-liquid-background`, `vfx-liquid-glass`, `vfx-magnetic`, `vfx-portal`, `vfx-shatter`, `vfx-text-cursor` | `effects`, `webgl` |
| **Branding & outros** | `logo-outro`, `apple-money-count` | `logo`, `branding`, `finance` |
| **Notifications & UI** | `macos-notification` | `notification` |
### Components by use case
| Need | Components | Tags to filter |
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| **Caption styles** | `caption-clip-wipe`, `caption-editorial-emphasis`, `caption-emoji-pop`, `caption-glitch-rgb`, `caption-gradient-fill`, `caption-highlight`, `caption-kinetic-slam`, `caption-matrix-decode`, `caption-neon-accent`, `caption-neon-glow`, `caption-parallax-layers`, `caption-particle-burst`, `caption-pill-karaoke`, `caption-texture-lava`, `caption-weight-shift` | `caption-style` |
| **Visual overlays & effects** | `grain-overlay`, `shimmer-sweep`, `grid-pixelate-wipe`, `texture-mask-text`, `vignette` | `overlay`, `effect` |
### Quick picks
- User wants **transitions between scenes** → suggest `npx hyperframes add transitions-blur` (or whichever style fits the mood). Each transition block bundles multiple variants.
- User wants **captions** → suggest a caption component that matches the energy. `caption-highlight` for TikTok-style, `caption-editorial-emphasis` for cinematic, `caption-glitch-rgb` for tech/cyber.
- User wants **data visualization** → `npx hyperframes add data-chart` includes animated bar, line, pie, and area charts with configurable data.
- User wants **social proof** → suggest the matching platform card (`x-post`, `reddit-post`, `instagram-follow`, etc.).
- User wants **film grain or cinematic look** → `npx hyperframes add grain-overlay` + `npx hyperframes add vignette`.
- User wants **a map** → pick the geographic region: `us-map` for US states, `world-map` for global, `spain-map` for Spain.
---
## References (loaded on demand)
- **[references/captions.md](references/captions.md)** — Captions, subtitles, lyrics, karaoke synced to audio. Tone-adaptive style detection, per-word styling, text overflow prevention, caption exit guarantees, word grouping. Read when adding any text synced to audio timing.