diff --git a/.claude/skills/captions b/.claude/skills/captions deleted file mode 120000 index 1f0835bce..000000000 --- a/.claude/skills/captions +++ /dev/null @@ -1 +0,0 @@ -../../skills/captions \ No newline at end of file diff --git a/.claude/skills/compose-video b/.claude/skills/compose-video deleted file mode 120000 index ae92ed1f0..000000000 --- a/.claude/skills/compose-video +++ /dev/null @@ -1 +0,0 @@ -../../skills/compose-video \ No newline at end of file diff --git a/.claude/skills/hyperframes-captions b/.claude/skills/hyperframes-captions new file mode 120000 index 000000000..a3c2afaa5 --- /dev/null +++ b/.claude/skills/hyperframes-captions @@ -0,0 +1 @@ +../../skills/hyperframes-captions \ No newline at end of file diff --git a/.claude/skills/hyperframes-compose b/.claude/skills/hyperframes-compose new file mode 120000 index 000000000..8028a889f --- /dev/null +++ b/.claude/skills/hyperframes-compose @@ -0,0 +1 @@ +../../skills/hyperframes-compose \ No newline at end of file diff --git a/CLAUDE.md b/CLAUDE.md index 04a5a207d..d77f482b5 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -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 diff --git a/README.md b/README.md index 3bc8a0058..f9733081d 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/packages/cli/package.json b/packages/cli/package.json index eca5276d4..4a6b993e3 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -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": { diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts index c34e1a392..4c43bcfcb 100644 --- a/packages/cli/src/commands/init.ts +++ b/packages/cli/src/commands/init.ts @@ -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)) { diff --git a/packages/cli/src/templates/_shared/CLAUDE.md b/packages/cli/src/templates/_shared/CLAUDE.md index 55bd046e0..ada92b7a2 100644 --- a/packages/cli/src/templates/_shared/CLAUDE.md +++ b/packages/cli/src/templates/_shared/CLAUDE.md @@ -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 diff --git a/skills/captions/SKILL.md b/skills/hyperframes-captions/SKILL.md similarity index 99% rename from skills/captions/SKILL.md rename to skills/hyperframes-captions/SKILL.md index 0831a51a2..a759a7ed5 100644 --- a/skills/captions/SKILL.md +++ b/skills/hyperframes-captions/SKILL.md @@ -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. --- diff --git a/skills/compose-video/SKILL.md b/skills/hyperframes-compose/SKILL.md similarity index 99% rename from skills/compose-video/SKILL.md rename to skills/hyperframes-compose/SKILL.md index fd4f519e3..9da90dd7b 100644 --- a/skills/compose-video/SKILL.md +++ b/skills/hyperframes-compose/SKILL.md @@ -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. --- diff --git a/skills/compose-video/data-in-motion.md b/skills/hyperframes-compose/data-in-motion.md similarity index 100% rename from skills/compose-video/data-in-motion.md rename to skills/hyperframes-compose/data-in-motion.md diff --git a/skills/compose-video/house-style.md b/skills/hyperframes-compose/house-style.md similarity index 100% rename from skills/compose-video/house-style.md rename to skills/hyperframes-compose/house-style.md diff --git a/skills/compose-video/palettes/bold-energetic.md b/skills/hyperframes-compose/palettes/bold-energetic.md similarity index 100% rename from skills/compose-video/palettes/bold-energetic.md rename to skills/hyperframes-compose/palettes/bold-energetic.md diff --git a/skills/compose-video/palettes/clean-corporate.md b/skills/hyperframes-compose/palettes/clean-corporate.md similarity index 100% rename from skills/compose-video/palettes/clean-corporate.md rename to skills/hyperframes-compose/palettes/clean-corporate.md diff --git a/skills/compose-video/palettes/dark-premium.md b/skills/hyperframes-compose/palettes/dark-premium.md similarity index 100% rename from skills/compose-video/palettes/dark-premium.md rename to skills/hyperframes-compose/palettes/dark-premium.md diff --git a/skills/compose-video/palettes/jewel-rich.md b/skills/hyperframes-compose/palettes/jewel-rich.md similarity index 100% rename from skills/compose-video/palettes/jewel-rich.md rename to skills/hyperframes-compose/palettes/jewel-rich.md diff --git a/skills/compose-video/palettes/monochrome.md b/skills/hyperframes-compose/palettes/monochrome.md similarity index 100% rename from skills/compose-video/palettes/monochrome.md rename to skills/hyperframes-compose/palettes/monochrome.md diff --git a/skills/compose-video/palettes/nature-earth.md b/skills/hyperframes-compose/palettes/nature-earth.md similarity index 100% rename from skills/compose-video/palettes/nature-earth.md rename to skills/hyperframes-compose/palettes/nature-earth.md diff --git a/skills/compose-video/palettes/neon-electric.md b/skills/hyperframes-compose/palettes/neon-electric.md similarity index 100% rename from skills/compose-video/palettes/neon-electric.md rename to skills/hyperframes-compose/palettes/neon-electric.md diff --git a/skills/compose-video/palettes/pastel-soft.md b/skills/hyperframes-compose/palettes/pastel-soft.md similarity index 100% rename from skills/compose-video/palettes/pastel-soft.md rename to skills/hyperframes-compose/palettes/pastel-soft.md diff --git a/skills/compose-video/palettes/warm-editorial.md b/skills/hyperframes-compose/palettes/warm-editorial.md similarity index 100% rename from skills/compose-video/palettes/warm-editorial.md rename to skills/hyperframes-compose/palettes/warm-editorial.md diff --git a/skills/compose-video/patterns.md b/skills/hyperframes-compose/patterns.md similarity index 100% rename from skills/compose-video/patterns.md rename to skills/hyperframes-compose/patterns.md