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

refactor: move Claude Design instructions from skills/ to docs/ (#495)

Browse Source
This commit is contained in:
Ular Kimsanov
2026-04-25 22:50:16 +02:00
committed by GitHub
parent 9b72a87c17
commit 9322ff9c74
6 changed files with 35 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+4
View File
@@ -94,3 +94,7 @@ captures/
cursor-tests/
basecamp-video/
launch-video*/
ab-test/
compositions/
video-6-2-patched/
claude-design-hyperframes-video/
README.md
+8 -9
View File
@@ -33,7 +33,7 @@ npx skills add heygen-com/hyperframes
This teaches your agent (Claude Code, Cursor, Gemini CLI, Codex) how to write correct compositions and GSAP animations. In Claude Code, the skills register as slash commands — invoke `/hyperframes` to author compositions, `/hyperframes-cli` for CLI commands, and `/gsap` for animation help.
For Claude Design, open [`skills/claude-design-hyperframes/SKILL.md`](https://github.com/heygen-com/hyperframes/blob/main/skills/claude-design-hyperframes/SKILL.md) on GitHub and click the download button (↓) to save it, then attach the file to your Claude Design chat. It produces a valid first draft; refine in any AI coding agent. See the [Claude Design guide](https://hyperframes.heygen.com/guides/claude-design).
For Claude Design, open [`docs/guides/claude-design-hyperframes.md`](https://github.com/heygen-com/hyperframes/blob/main/docs/guides/claude-design-hyperframes.md) on GitHub and click the download button (↓) to save it, then attach the file to your Claude Design chat. It produces a valid first draft; refine in any AI coding agent. See the [Claude Design guide](https://hyperframes.heygen.com/guides/claude-design).
For Codex specifically, the same skills are also exposed as an [OpenAI Codex plugin](./.codex-plugin/plugin.json) — sparse-install just the plugin surface:
@@ -184,14 +184,13 @@ HyperFrames ships [skills](https://github.com/vercel-labs/skills) that teach AI
npx skills add heygen-com/hyperframes
```
| Skill | What it teaches |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| `claude-design-hyperframes` | Template-first Claude Design skill — pre-valid skeletons, produces video drafts for refinement in any coding agent |
| `hyperframes` | HTML composition authoring, captions, TTS, audio-reactive animation, transitions |
| `hyperframes-cli` | CLI commands: init, lint, preview, render, transcribe, tts, doctor |
| `hyperframes-registry` | Block and component installation via `hyperframes add` |
| `website-to-hyperframes` | Capture a URL and turn it into a video — full website-to-video pipeline |
| `gsap` | GSAP animation API, timelines, easing, ScrollTrigger, plugins, React/Vue/Svelte, performance |
| Skill | What it teaches |
| ------------------------ | -------------------------------------------------------------------------------------------- |
| `hyperframes` | HTML composition authoring, captions, TTS, audio-reactive animation, transitions |
| `hyperframes-cli` | CLI commands: init, lint, preview, render, transcribe, tts, doctor |
| `hyperframes-registry` | Block and component installation via `hyperframes add` |
| `website-to-hyperframes` | Capture a URL and turn it into a video — full website-to-video pipeline |
| `gsap` | GSAP animation API, timelines, easing, ScrollTrigger, plugins, React/Vue/Svelte, performance |
## Contributing
skills/claude-design-hyperframes/SKILL.md → docs/guides/claude-design-hyperframes.md
-5
View File
@@ -1,8 +1,3 @@
---
name: claude-design-hyperframes
description: Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.
---
# Claude Design + HyperFrames (Template-First)
Your medium is **HyperFrames compositions**: plain HTML + CSS + a paused GSAP timeline. The CLI (`npx hyperframes render index.html`) turns the HTML into an MP4. You author the HTML -- the user renders locally.
docs/guides/claude-design.mdx
+21 -21
View File
@@ -1,6 +1,6 @@
---
title: Claude Design
description: "Create HyperFrames video drafts in Claude Design using a template-first skill, then refine in any AI coding agent."
description: "Create HyperFrames video drafts in Claude Design, then refine in any AI coding agent."
---
Claude Design produces a **valid first draft** of a HyperFrames video — brand identity, scene content, layout, animations, and transitions. You then download the ZIP and refine in any AI coding agent (Claude Code, Cursor, Codex, Windsurf, etc.) with linting and live preview.
@@ -8,14 +8,14 @@ Claude Design produces a **valid first draft** of a HyperFrames video — brand
## Get started
<Steps>
<Step title="Download the skill">
Right-click [`SKILL.md`](https://raw.githubusercontent.com/heygen-com/hyperframes/main/skills/claude-design-hyperframes/SKILL.md) → **Save Link As** to download. (Clicking opens it as text in a new tab.)
<Step title="Download the instruction file">
Open [`claude-design-hyperframes.md`](https://github.com/heygen-com/hyperframes/blob/main/docs/guides/claude-design-hyperframes.md) on GitHub and click the download button (↓) to save it. Or right-click [`this raw link`](https://raw.githubusercontent.com/heygen-com/hyperframes/main/docs/guides/claude-design-hyperframes.md) → **Save Link As**.
</Step>
<Step title="Open Claude Design">
Start a new chat at [claude.ai](https://claude.ai) with Claude Design enabled.
</Step>
<Step title="Attach the skill + describe your video">
Drag the SKILL.md file into the chat. Describe what you want — include screenshots, brand assets, or a palette if you have them.
<Step title="Attach the file + describe your video">
Drag the `claude-design-hyperframes.md` file into the chat. Describe what you want — include screenshots, brand assets, or a palette if you have them.
</Step>
<Step title="Download the ZIP">
Claude Design produces `index.html`, `preview.html`, `README.md`, and `DESIGN.md`. Download the ZIP.
@@ -38,27 +38,27 @@ Claude Design produces a **valid first draft** of a HyperFrames video — brand
| Surface | Recommended setup |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| Claude Design | Right-click [`SKILL.md`](https://raw.githubusercontent.com/heygen-com/hyperframes/main/skills/claude-design-hyperframes/SKILL.md) → Save Link As, then attach to your chat |
| Claude Design | Download [`claude-design-hyperframes.md`](https://raw.githubusercontent.com/heygen-com/hyperframes/main/docs/guides/claude-design-hyperframes.md) and attach to your chat |
| Claude Code | `npx skills add heygen-com/hyperframes`, then use `/hyperframes` |
| Cursor / Codex / Gemini CLI | `npx skills add heygen-com/hyperframes` |
## How the skill works
## How it works
The skill gives Claude Design **pre-valid HTML skeletons** — the structural rules (data attributes, timeline registration, scene visibility, preview token forwarding) are already embedded. Claude Design fills in the creative work:
The instruction file gives Claude Design **pre-valid HTML skeletons** — the structural rules (data attributes, timeline registration, scene visibility, preview token forwarding) are already embedded. Claude Design fills in the creative work:
1. **Palette + typography** — CSS custom properties on `:root`
2. **Scene content** — text, images, layout inside `.scene-content` wrappers
3. **Animations** — GSAP entrance tweens and mid-scene activity
4. **Transitions** — hard cuts for most scenes, shader transitions at 2-3 key moments
This template-first approach means the output passes `npx hyperframes lint` with zero errors on first download — Claude Code can start refining immediately without structural fixes.
This template-first approach means the output passes `npx hyperframes lint` with zero errors on first download — your coding agent can start refining immediately without structural fixes.
## Example prompts
<CardGroup cols={1}>
<Card title="Feature announcement (attach SKILL.md)">
<Card title="Feature announcement">
```text
Use the attached skill. I just shipped dark mode for my app. Make me a
Use the attached file. I just shipped dark mode for my app. Make me a
15-second Instagram reel announcing it.
- App name: Taskflow
@@ -67,9 +67,9 @@ This template-first approach means the output passes `npx hyperframes lint` with
- Key stat: "47% of users requested this"
```
</Card>
<Card title="Founder pitch (attach SKILL.md)">
<Card title="Founder pitch">
```text
Use the attached skill. 25-second LinkedIn video for my startup.
Use the attached file. 25-second LinkedIn video for my startup.
Problem: Sales teams waste 3 hours/day on manual CRM updates.
Solution: AutoCRM — AI that logs every call, email, and meeting.
@@ -79,9 +79,9 @@ This template-first approach means the output passes `npx hyperframes lint` with
Professional but not corporate. Think Linear or Vercel energy.
```
</Card>
<Card title="Stat highlight (attach SKILL.md)">
<Card title="Stat highlight">
```text
Use the attached skill. 10-second reel. Just one big number:
Use the attached file. 10-second reel. Just one big number:
"$4.2 billion processed in Q1 2026"
@@ -89,12 +89,12 @@ This template-first approach means the output passes `npx hyperframes lint` with
confident. End with logo placeholder and "stripe.com"
```
</Card>
<Card title="Sparse brief (attach SKILL.md, let it ask)">
<Card title="Sparse brief (let it ask)">
```text
Use the attached skill. Make a 30-second launch video for Orbit.
Use the attached file. Make a 30-second launch video for Orbit.
```
The skill asks ONE short clarifying question before generating.
The instructions tell Claude Design to ask ONE short clarifying question before generating.
</Card>
</CardGroup>
@@ -115,9 +115,9 @@ The more specific your prompt, the better the output. Include palette, fonts, du
- **In-pane preview** — scrubbing is unreliable in Claude Design's iframe sandbox. Download and use `npx hyperframes preview` locally for reliable playback.
- **No linting** — Claude Design can't run `npx hyperframes lint`. The template-first skeletons handle structural validity, but the self-review checklist is the only QA before download.
- **Shaders work at any aspect ratio** — vertical (1080x1920), landscape (1920x1080), and square (1080x1080) all supported. HyperShader reads dimensions from `data-width`/`data-height` on the composition root.
- **3 fetch limit** — Claude Design limits web fetches per turn. All critical rules are inlined in the skill; external references are for edge cases only.
- **Seeking backwards** — scrubbing backwards in the in-pane preview can show blank frames (async capture race condition). Forward seeking usually works.
- **Shaders work at any aspect ratio** — vertical (1080x1920), landscape (1920x1080), and square (1080x1080) all supported.
- **3 fetch limit** — Claude Design limits web fetches per turn. All critical rules are inlined; external references are for edge cases only.
- **Seeking backwards** — scrubbing backwards in the in-pane preview can show blank frames. Forward seeking usually works.
## The handoff to your coding agent
docs/guides/prompting.mdx
+1 -1
View File
@@ -29,7 +29,7 @@ In Claude Code, restart the session after installing. Skills register as **slash
## Claude Design
Claude Design uses a different setup. Right-click [`SKILL.md`](https://raw.githubusercontent.com/heygen-com/hyperframes/main/skills/claude-design-hyperframes/SKILL.md) → **Save Link As** to download, then **attach it to your chat** (don't paste the URL — file attachments produce better output):
Claude Design uses a different setup. Right-click [`SKILL.md`](https://raw.githubusercontent.com/heygen-com/hyperframes/main/docs/guides/claude-design-hyperframes.md) → **Save Link As** to download, then **attach it to your chat** (don't paste the URL — file attachments produce better output):
```text
Use the attached skill. 25-second LinkedIn video for my startup.
docs/quickstart.mdx
+1 -1
View File
@@ -16,7 +16,7 @@ npx skills add heygen-com/hyperframes
This teaches your agent (Claude Code, Cursor, Gemini CLI, Codex) how to write correct compositions and GSAP animations. In Claude Code the skills register as slash commands — `/hyperframes` for composition authoring, `/hyperframes-cli` for CLI commands, and `/gsap` for animation help. Invoking the slash command loads the skill context explicitly, which produces correct output the first time.
<Note>
Claude Design uses a different entry path. Open [`skills/claude-design-hyperframes/SKILL.md`](https://github.com/heygen-com/hyperframes/blob/main/skills/claude-design-hyperframes/SKILL.md) on GitHub, click the download button (↓) to save it, then attach to your Claude Design chat. It produces a valid first draft you can refine in any AI coding agent. See the [Claude Design guide](/guides/claude-design).
Claude Design uses a different entry path. Open [`docs/guides/claude-design-hyperframes.md`](https://github.com/heygen-com/hyperframes/blob/main/docs/guides/claude-design-hyperframes.md) on GitHub, click the download button (↓) to save it, then attach to your Claude Design chat. It produces a valid first draft you can refine in any AI coding agent. See the [Claude Design guide](/guides/claude-design).
</Note>
### Try it: example prompts