From 552b9828f643b9047b9c6f30e0fdcc572178bb52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20=C3=81ngel?= Date: Wed, 20 May 2026 01:10:36 -0400 Subject: [PATCH] docs(skill): add catalog references for blocks and components 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. --- skills/hyperframes/SKILL.md | 50 +++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/skills/hyperframes/SKILL.md b/skills/hyperframes/SKILL.md index f68c52dac..76e317172 100644 --- a/skills/hyperframes/SKILL.md +++ b/skills/hyperframes/SKILL.md @@ -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 # 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 ` 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.