mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-04 07:19:52 +00:00
Merge pull request #108 from heygen-com/chore/rename-skills-namespace
chore(skills): rename compose-video/captions to hyperframes-compose/hyperframes-captions
This commit is contained in:
James Russo
@@ -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)
|
### HyperFrames Skills (from this repo)
|
||||||
|
|
||||||
| Skill | Invoke with | When to use |
|
| 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. |
|
| **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. |
|
||||||
| **captions** | `/captions` | Building tone-adaptive captions from whisper transcripts — style detection, per-word styling, positioning. |
|
| **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))
|
### 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
|
### Rules
|
||||||
|
|
||||||
- When creating or modifying HTML compositions → invoke `/compose-video` BEFORE writing any code
|
- When creating or modifying HTML compositions → invoke `/hyperframes-compose` BEFORE writing any code
|
||||||
- When adding captions → invoke `/captions` 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 writing GSAP animations → invoke `/gsap-core` and `/gsap-timeline` BEFORE writing any code
|
||||||
- When optimizing animation performance → invoke `/gsap-performance` BEFORE making changes
|
- When optimizing animation performance → invoke `/gsap-performance` BEFORE making changes
|
||||||
|
|
||||||
|
|||||||
@@ -86,7 +86,7 @@ npx hyperframes skills --cursor
|
|||||||
### Or via `npx skills add`
|
### Or via `npx skills add`
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# HyperFrames skills (compose-video, captions)
|
# HyperFrames skills (hyperframes-compose, hyperframes-captions)
|
||||||
npx skills add heygen-com/hyperframes
|
npx skills add heygen-com/hyperframes
|
||||||
|
|
||||||
# GSAP skills (gsap-core, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-performance, gsap-utils, gsap-react, gsap-frameworks)
|
# 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 |
|
| 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 |
|
| **[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
|
## Documentation
|
||||||
|
|
||||||
|
|||||||
@@ -20,7 +20,7 @@
|
|||||||
"build:fonts": "cd ../producer && tsx scripts/generate-font-data.ts",
|
"build:fonts": "cd ../producer && tsx scripts/generate-font-data.ts",
|
||||||
"build:studio": "cd ../studio && bun run build",
|
"build:studio": "cd ../studio && bun run build",
|
||||||
"build:runtime": "tsx scripts/build-runtime.ts",
|
"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"
|
"typecheck": "tsc --noEmit"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|||||||
@@ -447,7 +447,7 @@ function scaffoldProject(
|
|||||||
// Copy project-level skills (.claude/skills/) for immediate availability
|
// Copy project-level skills (.claude/skills/) for immediate availability
|
||||||
const skillsSrcDir = getBundledSkillsDir();
|
const skillsSrcDir = getBundledSkillsDir();
|
||||||
if (existsSync(skillsSrcDir)) {
|
if (existsSync(skillsSrcDir)) {
|
||||||
const projectSkills = ["compose-video", "captions"];
|
const projectSkills = ["hyperframes-compose", "hyperframes-captions"];
|
||||||
for (const skill of projectSkills) {
|
for (const skill of projectSkills) {
|
||||||
const src = join(skillsSrcDir, skill);
|
const src = join(skillsSrcDir, skill);
|
||||||
if (existsSync(src)) {
|
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.
|
**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 |
|
| Skill | Command | When to use |
|
||||||
| -------------------- | ------------------- | ------------------------------------------------------------------------------------------------------ |
|
| ------------------------ | ----------------------- | ------------------------------------------------------------------------------------------------------ |
|
||||||
| **compose-video** | `/compose-video` | Creating or editing ANY HTML composition — videos, animations, title cards, overlays, sub-compositions |
|
| **hyperframes-compose** | `/hyperframes-compose` | 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 |
|
| **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-core** | `/gsap-core` | GSAP tweens: `gsap.to()`, `from()`, `fromTo()`, easing, stagger, defaults |
|
||||||
| **gsap-timeline** | `/gsap-timeline` | Timeline sequencing, position parameter, labels, nesting |
|
| **gsap-timeline** | `/gsap-timeline` | Timeline sequencing, position parameter, labels, nesting |
|
||||||
| **gsap-performance** | `/gsap-performance` | Animation performance — transforms over layout props, will-change, batching |
|
| **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
|
> **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
|
> 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.
|
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.
|
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