mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
chore(skills): rename compose-video → hyperframes-compose, captions → hyperframes-captions
Namespace skill names with `hyperframes-` prefix for clearer identity in OSS contexts where users may have other skills installed. Updates skill directories, SKILL.md frontmatter, CLAUDE.md, README.md, CLI build script, init command, and project template. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
James
@@ -1 +0,0 @@
|
||||
../../skills/captions
|
||||
@@ -1 +0,0 @@
|
||||
../../skills/compose-video
|
||||
+1
@@ -0,0 +1 @@
|
||||
../../skills/hyperframes-captions
|
||||
+1
@@ -0,0 +1 @@
|
||||
../../skills/hyperframes-compose
|
||||
@@ -6,10 +6,10 @@ This repo ships skills that are installed globally via `npx hyperframes skills`
|
||||
|
||||
### HyperFrames Skills (from this repo)
|
||||
|
||||
| Skill | Invoke with | When to use |
|
||||
| ----------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **compose-video** | `/compose-video` | Creating ANY HTML composition — videos, animations, title cards, overlays. Contains required HTML structure, `class="clip"` rules, GSAP timeline patterns, and rendering constraints. |
|
||||
| **captions** | `/captions` | Building tone-adaptive captions from whisper transcripts — style detection, per-word styling, positioning. |
|
||||
| Skill | Invoke with | When to use |
|
||||
| ------------------------ | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **hyperframes-compose** | `/hyperframes-compose` | Creating ANY HTML composition — videos, animations, title cards, overlays. Contains required HTML structure, `class="clip"` rules, GSAP timeline patterns, and rendering constraints. |
|
||||
| **hyperframes-captions** | `/hyperframes-captions` | Building tone-adaptive captions from whisper transcripts — style detection, per-word styling, positioning. |
|
||||
|
||||
### GSAP Skills (from [greensock/gsap-skills](https://github.com/greensock/gsap-skills))
|
||||
|
||||
@@ -28,8 +28,8 @@ The skills encode HyperFrames-specific patterns (e.g., required `class="clip"` o
|
||||
|
||||
### Rules
|
||||
|
||||
- When creating or modifying HTML compositions → invoke `/compose-video` BEFORE writing any code
|
||||
- When adding captions → invoke `/captions` BEFORE writing any code
|
||||
- When creating or modifying HTML compositions → invoke `/hyperframes-compose` BEFORE writing any code
|
||||
- When adding captions → invoke `/hyperframes-captions` BEFORE writing any code
|
||||
- When writing GSAP animations → invoke `/gsap-core` and `/gsap-timeline` BEFORE writing any code
|
||||
- When optimizing animation performance → invoke `/gsap-performance` BEFORE making changes
|
||||
|
||||
|
||||
@@ -86,7 +86,7 @@ npx hyperframes skills --cursor
|
||||
### Or via `npx skills add`
|
||||
|
||||
```bash
|
||||
# HyperFrames skills (compose-video, captions)
|
||||
# HyperFrames skills (hyperframes-compose, hyperframes-captions)
|
||||
npx skills add heygen-com/hyperframes
|
||||
|
||||
# GSAP skills (gsap-core, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-performance, gsap-utils, gsap-react, gsap-frameworks)
|
||||
@@ -97,10 +97,10 @@ npx skills add greensock/gsap-skills
|
||||
|
||||
| Source | Skills | What they teach |
|
||||
| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| **HyperFrames** | `compose-video`, `captions` | HTML composition structure, `class="clip"` rules, `data-*` attributes, timeline registration, rendering constraints |
|
||||
| **HyperFrames** | `hyperframes-compose`, `hyperframes-captions` | HTML composition structure, `class="clip"` rules, `data-*` attributes, timeline registration, rendering constraints |
|
||||
| **[GSAP](https://github.com/greensock/gsap-skills)** | `gsap-core`, `gsap-timeline`, `gsap-performance`, `gsap-plugins`, `gsap-scrolltrigger`, `gsap-utils`, `gsap-react`, `gsap-frameworks` | Core API, timeline sequencing, ScrollTrigger, plugin usage, performance best practices |
|
||||
|
||||
In Claude Code, invoke with `/compose-video`, `/captions`, `/gsap-core`, etc.
|
||||
In Claude Code, invoke with `/hyperframes-compose`, `/hyperframes-captions`, `/gsap-core`, etc.
|
||||
|
||||
## Documentation
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
"build:fonts": "cd ../producer && tsx scripts/generate-font-data.ts",
|
||||
"build:studio": "cd ../studio && bun run build",
|
||||
"build:runtime": "tsx scripts/build-runtime.ts",
|
||||
"build:copy": "mkdir -p dist/studio dist/docs dist/templates dist/skills && cp -r ../studio/dist/* dist/studio/ && cp -r src/templates/blank src/templates/warm-grain src/templates/play-mode src/templates/swiss-grid src/templates/vignelli src/templates/_shared dist/templates/ && cp -r ../../skills/compose-video ../../skills/captions dist/skills/ && (cp src/docs/*.md dist/docs/ 2>/dev/null || true)",
|
||||
"build:copy": "mkdir -p dist/studio dist/docs dist/templates dist/skills && cp -r ../studio/dist/* dist/studio/ && cp -r src/templates/blank src/templates/warm-grain src/templates/play-mode src/templates/swiss-grid src/templates/vignelli src/templates/_shared dist/templates/ && cp -r ../../skills/hyperframes-compose ../../skills/hyperframes-captions dist/skills/ && (cp src/docs/*.md dist/docs/ 2>/dev/null || true)",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
|
||||
@@ -447,7 +447,7 @@ function scaffoldProject(
|
||||
// Copy project-level skills (.claude/skills/) for immediate availability
|
||||
const skillsSrcDir = getBundledSkillsDir();
|
||||
if (existsSync(skillsSrcDir)) {
|
||||
const projectSkills = ["compose-video", "captions"];
|
||||
const projectSkills = ["hyperframes-compose", "hyperframes-captions"];
|
||||
for (const skill of projectSkills) {
|
||||
const src = join(skillsSrcDir, skill);
|
||||
if (existsSync(src)) {
|
||||
|
||||
@@ -4,13 +4,13 @@
|
||||
|
||||
**Always invoke the relevant skill before writing or modifying compositions.** Skills encode framework-specific patterns (e.g., `class="clip"`, `window.__timelines`, `data-*` attributes) that are NOT in generic web docs. Skipping them produces broken compositions.
|
||||
|
||||
| Skill | Command | When to use |
|
||||
| -------------------- | ------------------- | ------------------------------------------------------------------------------------------------------ |
|
||||
| **compose-video** | `/compose-video` | Creating or editing ANY HTML composition — videos, animations, title cards, overlays, sub-compositions |
|
||||
| **captions** | `/captions` | Building captions from whisper transcripts — style detection, per-word styling |
|
||||
| **gsap-core** | `/gsap-core` | GSAP tweens: `gsap.to()`, `from()`, `fromTo()`, easing, stagger, defaults |
|
||||
| **gsap-timeline** | `/gsap-timeline` | Timeline sequencing, position parameter, labels, nesting |
|
||||
| **gsap-performance** | `/gsap-performance` | Animation performance — transforms over layout props, will-change, batching |
|
||||
| Skill | Command | When to use |
|
||||
| ------------------------ | ----------------------- | ------------------------------------------------------------------------------------------------------ |
|
||||
| **hyperframes-compose** | `/hyperframes-compose` | Creating or editing ANY HTML composition — videos, animations, title cards, overlays, sub-compositions |
|
||||
| **hyperframes-captions** | `/hyperframes-captions` | Building captions from whisper transcripts — style detection, per-word styling |
|
||||
| **gsap-core** | `/gsap-core` | GSAP tweens: `gsap.to()`, `from()`, `fromTo()`, easing, stagger, defaults |
|
||||
| **gsap-timeline** | `/gsap-timeline` | Timeline sequencing, position parameter, labels, nesting |
|
||||
| **gsap-performance** | `/gsap-performance` | Animation performance — transforms over layout props, will-change, batching |
|
||||
|
||||
> **Skills not available?** Ask the user to run `npx hyperframes skills` and restart their
|
||||
> agent session, or install manually: `npx skills add heygen-com/hyperframes` and
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
name: captions
|
||||
name: hyperframes-captions
|
||||
description: Build tone-adaptive captions from whisper transcripts. Detects script energy (hype, corporate, tutorial, storytelling, social) and applies matching typography, color, and animation. Supports per-word styling for brand names, ALL CAPS, numbers, and CTAs. Use when adding captions or subtitles to a HyperFrames composition.
|
||||
---
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
name: compose-video
|
||||
name: hyperframes-compose
|
||||
description: Create HyperFrames HTML video compositions. Use when asked to create a video, build an animation, make a composition, add a title card, or generate any HTML-based video content for HyperFrames.
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user