Skip to content

Commit 9342d3d

Browse files
miguel-heygenmiguel-heygen
committed
docs: add setup guides for Google Antigravity and GitHub Copilot CLI
Add dedicated guide pages for two AI coding tools that were missing from the documentation (closes #744): - docs/guides/antigravity.mdx — skills install, semantic matching, Manager view parallelism, MCP alternative, CLAUDE.md compat - docs/guides/copilot-cli.mdx — skills install, slash commands, /skills management, agent mode, MCP alternative Also updates quickstart.mdx and prompting.mdx to mention both tools alongside the existing agent list, and adds both pages to the docs navigation in docs.json.
1 parent 7354d61 commit 9342d3d

5 files changed

Lines changed: 355 additions & 2 deletions

File tree

‎docs/docs.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,8 @@
7474
"guides/pipeline",
7575
"guides/html-in-canvas",
7676
"guides/website-to-video",
77+
"guides/antigravity",
78+
"guides/copilot-cli",
7779
"guides/claude-design",
7880
"guides/open-design",
7981
"guides/prompting",

‎docs/guides/antigravity.mdx‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
---
2+
title: Google Antigravity
3+
description: "Set up HyperFrames in Google Antigravity — install skills, author compositions, and render video from the agent-first IDE."
4+
---
5+
6+
Google Antigravity is Google's agent-first IDE built on VS Code. Its agent discovers and loads HyperFrames skills automatically based on your prompts, so you get correct compositions without memorizing framework internals.
7+
8+
## Install skills
9+
10+
Install the HyperFrames skill package into your project:
11+
12+
```bash
13+
npx skills add heygen-com/hyperframes
14+
```
15+
16+
This places skill directories inside `.agent/skills/` at your workspace root — the location Antigravity scans for workspace-scoped skills.
17+
18+
<Tip>
19+
If you want the skills available across all your Antigravity projects, copy them to the global scope instead:
20+
21+
```bash
22+
npx skills add heygen-com/hyperframes -a antigravity --global
23+
```
24+
25+
Global skills live in `~/.gemini/antigravity/skills/` and load in every workspace.
26+
</Tip>
27+
28+
Verify the skills are installed:
29+
30+
```bash
31+
ls .agent/skills/
32+
```
33+
34+
You should see directories like `hyperframes/`, `hyperframes-cli/`, `gsap/`, `tailwind/`, and others — each containing a `SKILL.md` that the agent reads on demand.
35+
36+
## How skills work in Antigravity
37+
38+
Antigravity uses **semantic matching** — when you type a prompt, the agent compares it against the `description` field of every available skill and loads the ones that are relevant. You don't need to invoke skills with a slash command (though you can reference them by name for precision).
39+
40+
| You say | Agent loads |
41+
|---|---|
42+
| "Create a 10-second product intro with captions" | `hyperframes`, `hyperframes-cli` |
43+
| "Add a GSAP scale-pop to the title" | `gsap` |
44+
| "Use Tailwind for styling" | `tailwind` |
45+
| "Transcribe this audio and add captions" | `hyperframes-media` |
46+
| "Add a shimmer sweep transition" | `hyperframes-registry` |
47+
48+
The skill is only injected into the agent's context window when it matches — this keeps the context clean and focused.
49+
50+
<Note>
51+
For the best results, mention "HyperFrames" or "composition" in your prompt so the agent matches the right skills immediately instead of guessing at generic web-video conventions.
52+
</Note>
53+
54+
## Create and preview a video
55+
56+
<Steps>
57+
<Step title="Scaffold a project">
58+
Open Antigravity's integrated terminal and run:
59+
60+
```bash
61+
npx hyperframes init my-video
62+
cd my-video
63+
```
64+
65+
The wizard walks you through example selection and media import. Skills are installed automatically inside the new project.
66+
</Step>
67+
68+
<Step title="Start the preview server">
69+
```bash
70+
npx hyperframes preview
71+
```
72+
73+
This launches the HyperFrames Studio in your browser with hot reload — edits to `index.html` appear instantly.
74+
</Step>
75+
76+
<Step title="Prompt the agent">
77+
In Antigravity's agent sidebar, describe the video you want:
78+
79+
> Create a 15-second dark-themed product intro for my SaaS app with a fade-in title, hype-style captions, and a flash transition to the CTA.
80+
81+
The agent reads the HyperFrames skill, writes valid HTML with `data-*` attributes and GSAP timelines, and saves it to your project files. The preview updates automatically.
82+
</Step>
83+
84+
<Step title="Iterate">
85+
Talk to the agent like a video editor — don't re-prompt from scratch:
86+
87+
> Make the title 2x bigger and swap the transition to a whip pan.
88+
89+
> Add a lower third at 0:03 with my name.
90+
91+
> Replace the background with assets/hero.mp4.
92+
</Step>
93+
94+
<Step title="Render">
95+
```bash
96+
npx hyperframes render --output output.mp4
97+
```
98+
</Step>
99+
</Steps>
100+
101+
## Using multiple agents in Manager view
102+
103+
Antigravity's Manager view lets you orchestrate multiple agents in parallel. For complex multi-scene videos, you can split the work:
104+
105+
- **Agent 1:** Author the intro scene and transitions
106+
- **Agent 2:** Generate TTS narration and caption timing
107+
- **Agent 3:** Build the data visualization scene
108+
109+
Each agent picks up the relevant HyperFrames skills independently. Merge the output into a single `index.html` with `data-composition-src` references when all agents finish.
110+
111+
## MCP alternative
112+
113+
If you prefer zero-install cloud authoring, Antigravity supports MCP servers. Add the HyperFrames MCP connector to author and render compositions without the CLI:
114+
115+
1. Open **Settings → MCP Servers → Add Server**
116+
2. Enter: `https://mcp.heygen.com/mcp/hyperframes`
117+
3. Authorize via OAuth with your HeyGen account
118+
119+
See the [MCP guide](/guides/mcp) for full details. The MCP handles rendering in the cloud; the CLI gives you local control.
120+
121+
## CLAUDE.md compatibility
122+
123+
When Antigravity's agent uses a Claude model (Sonnet or Opus), it reads your project's `CLAUDE.md` for project-specific instructions. HyperFrames projects created with `npx hyperframes init` include a `CLAUDE.md` automatically, giving the agent additional composition context beyond what the skills provide.
124+
125+
## Tips
126+
127+
- **Mention the skill by name when precision matters.** "Using the hyperframes skill, add a grain overlay" is more reliable than "add a grain overlay" when the agent has many skills loaded.
128+
- **Use `npx hyperframes lint` before rendering.** The linter catches structural issues (missing `class="clip"`, unregistered timelines, muted video violations) that the agent might miss on complex edits.
129+
- **Install registry blocks for advanced effects.** Run `npx hyperframes add shimmer-sweep` to install pre-built blocks, then ask the agent to wire them into your composition.
130+
- **Keep the preview server running.** Antigravity's file watcher + HyperFrames' hot reload means you see every agent edit in real time.
131+
132+
## Next steps
133+
134+
<CardGroup cols={2}>
135+
<Card title="Prompting guide" icon="message" href="/guides/prompting">
136+
Vocabulary and patterns that produce better compositions.
137+
</Card>
138+
<Card title="Catalog" icon="grid-2" href="/catalog/blocks/data-chart">
139+
50+ ready-to-use blocks the agent can install and wire.
140+
</Card>
141+
<Card title="GSAP Animation" icon="wand-magic-sparkles" href="/guides/gsap-animation">
142+
Motion principles and timeline authoring.
143+
</Card>
144+
<Card title="Pipeline guide" icon="list-check" href="/guides/pipeline">
145+
The 7-step structure agents follow for multi-beat videos.
146+
</Card>
147+
</CardGroup>

‎docs/guides/copilot-cli.mdx‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
---
2+
title: GitHub Copilot CLI
3+
description: "Set up HyperFrames with GitHub Copilot CLI — install skills, invoke them with slash commands, and render video from the terminal."
4+
---
5+
6+
GitHub Copilot CLI brings AI-powered coding assistance to your terminal. HyperFrames skills teach it how to write correct compositions, GSAP timelines, and framework-specific patterns — so you get valid video HTML without reading the docs yourself.
7+
8+
## Prerequisites
9+
10+
- **GitHub Copilot subscription** — Free, Pro, Pro+, Business, or Enterprise all include CLI access
11+
- **Copilot CLI installed** — `npm install -g @github/copilot` (or via the [install script](https://github.com/github/copilot-cli))
12+
- **Node.js 22+** and **FFmpeg** for the HyperFrames CLI
13+
14+
## Install skills
15+
16+
Install the HyperFrames skill package into your project:
17+
18+
```bash
19+
npx skills add heygen-com/hyperframes
20+
```
21+
22+
This writes skill directories to `.github/skills/` in your project — one of the paths Copilot CLI scans automatically.
23+
24+
<Tip>
25+
To make skills available across all your projects, install them globally:
26+
27+
```bash
28+
npx skills add heygen-com/hyperframes -a github-copilot --global
29+
```
30+
31+
Global skills live in `~/.copilot/skills/` and load in every Copilot CLI session.
32+
</Tip>
33+
34+
If you install skills during an active session, reload them:
35+
36+
```
37+
/skills reload
38+
```
39+
40+
Verify they're available:
41+
42+
```
43+
/skills list
44+
```
45+
46+
You should see `hyperframes`, `hyperframes-cli`, `gsap`, `tailwind`, and others in the list.
47+
48+
## Using skills
49+
50+
Copilot CLI supports both **explicit invocation** via slash commands and **automatic detection** based on your prompt.
51+
52+
### Slash commands
53+
54+
Prefix a skill name with `/` to load it explicitly:
55+
56+
```
57+
/hyperframes Create a 10-second product intro with a fade-in title and dark background.
58+
```
59+
60+
```
61+
/gsap Add a scale-pop animation to the title element.
62+
```
63+
64+
```
65+
/hyperframes-cli How do I render at 60fps with Docker?
66+
```
67+
68+
### Auto-detection
69+
70+
Copilot also matches skills based on the `description` field in each `SKILL.md`. If your prompt mentions compositions, timelines, or video rendering, the agent loads the right skills without you specifying them:
71+
72+
```
73+
Create a 9:16 TikTok hook video about AI productivity with bouncy captions.
74+
```
75+
76+
Explicit invocation is more reliable when you have many skills installed.
77+
78+
### Skill management commands
79+
80+
| Command | What it does |
81+
|---|---|
82+
| `/skills list` | Show all available skills |
83+
| `/skills info hyperframes` | View skill details and file location |
84+
| `/skills reload` | Reload after installing new skills mid-session |
85+
| `/skills` | Enable or disable skills interactively |
86+
87+
## Create and preview a video
88+
89+
<Steps>
90+
<Step title="Scaffold a project">
91+
```bash
92+
npx hyperframes init my-video
93+
cd my-video
94+
```
95+
96+
Skills are installed automatically inside the new project.
97+
</Step>
98+
99+
<Step title="Start the preview server">
100+
```bash
101+
npx hyperframes preview
102+
```
103+
104+
Opens the HyperFrames Studio in your browser. Edits reload automatically.
105+
</Step>
106+
107+
<Step title="Start Copilot CLI in the project directory">
108+
In a second terminal:
109+
110+
```bash
111+
copilot
112+
```
113+
114+
Or if using the npm global install:
115+
116+
```bash
117+
github-copilot
118+
```
119+
</Step>
120+
121+
<Step title="Prompt with the skill">
122+
```
123+
/hyperframes Create a 15-second dark-themed product intro with hype-style
124+
captions and a flash transition to the CTA.
125+
```
126+
127+
The agent writes valid HyperFrames HTML — `data-*` attributes, `class="clip"` on timed elements, paused GSAP timelines registered on `window.__timelines`. The preview updates as files are saved.
128+
</Step>
129+
130+
<Step title="Iterate">
131+
Keep prompting without re-specifying the full context:
132+
133+
```
134+
Make the title 2x bigger and add a lower third at 0:03.
135+
```
136+
137+
```
138+
Swap the transition to a whip pan.
139+
```
140+
</Step>
141+
142+
<Step title="Render">
143+
```bash
144+
npx hyperframes render --output output.mp4
145+
```
146+
147+
Or ask the agent:
148+
149+
```
150+
/hyperframes-cli Render this composition to output.mp4 at high quality.
151+
```
152+
</Step>
153+
</Steps>
154+
155+
## Agent mode
156+
157+
Copilot CLI's agent mode can handle multi-step tasks autonomously — scaffolding a project, writing the composition, installing registry blocks, and rendering in sequence:
158+
159+
```
160+
/hyperframes Scaffold a new project called "launch-video", create a 30-second
161+
product launch video with 5 scenes, install the flash-through-white transition
162+
block, and render to mp4.
163+
```
164+
165+
In agent mode, Copilot runs terminal commands (like `npx hyperframes init` and `npx hyperframes render`) on your behalf. Review the commands before approving them — especially if the skill pre-approves `shell` in its `allowed-tools`.
166+
167+
<Warning>
168+
Only pre-approve `shell` or `bash` in skill `allowed-tools` for skills you trust. The HyperFrames skills do not pre-approve shell access — the agent will ask for confirmation before running terminal commands.
169+
</Warning>
170+
171+
## MCP alternative
172+
173+
Copilot CLI also supports MCP servers for cloud-based authoring without the local CLI:
174+
175+
```bash
176+
copilot --mcp-server https://mcp.heygen.com/mcp/hyperframes
177+
```
178+
179+
Authorize via OAuth when prompted. See the [MCP guide](/guides/mcp) for full details.
180+
181+
## Tips
182+
183+
- **Always start with `/hyperframes` for composition work.** This loads the full skill context — composition rules, data attributes, GSAP patterns, caption formats — that generic web knowledge doesn't cover.
184+
- **Use `/skills info hyperframes` to check skill status.** If output looks wrong, the skill might not be loaded. Reload with `/skills reload`.
185+
- **Run `npx hyperframes lint` before rendering.** The linter catches structural issues the agent might miss on complex multi-scene edits.
186+
- **Keep the preview server running in a separate terminal.** You see every edit reflected in real time while prompting in Copilot CLI.
187+
- **Install registry blocks for transitions and effects.** `npx hyperframes add shimmer-sweep` installs pre-built blocks, then prompt the agent to wire them in.
188+
189+
## Next steps
190+
191+
<CardGroup cols={2}>
192+
<Card title="Prompting guide" icon="message" href="/guides/prompting">
193+
Vocabulary and patterns that produce better compositions.
194+
</Card>
195+
<Card title="Catalog" icon="grid-2" href="/catalog/blocks/data-chart">
196+
50+ ready-to-use blocks the agent can install and wire.
197+
</Card>
198+
<Card title="GSAP Animation" icon="wand-magic-sparkles" href="/guides/gsap-animation">
199+
Motion principles and timeline authoring.
200+
</Card>
201+
<Card title="Pipeline guide" icon="list-check" href="/guides/pipeline">
202+
The 7-step structure agents follow for multi-beat videos.
203+
</Card>
204+
</CardGroup>

‎docs/guides/prompting.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Prompt Guide
3-
description: "How to prompt Claude Code, Cursor, Codex, and other AI agents to author Hyperframes compositions — with copy-pasteable examples and vocabulary tables."
3+
description: "How to prompt Claude Code, Cursor, Codex, Google Antigravity, GitHub Copilot CLI, and other AI agents to author Hyperframes compositions — with copy-pasteable examples and vocabulary tables."
44
---
55

66
Hyperframes is built for AI agents — compositions are plain HTML, the CLI is non-interactive, and the framework ships [skills](https://github.com/vercel-labs/skills) that teach agents the patterns docs alone don't cover. This guide shows how to prompt agents effectively once skills are installed — the vocabulary that changes output, the iteration patterns that save time, and the rules that prevent breakage.

‎docs/quickstart.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ Install the HyperFrames skills, then describe the video you want:
1313
npx skills add heygen-com/hyperframes
1414
```
1515

16-
This teaches your agent (Claude Code, Cursor, Gemini CLI, Codex) how to write correct compositions, GSAP timelines, Tailwind v4 browser-runtime styles, and first-party adapter animations. In Claude Code the skills register as slash commands — `/hyperframes` for composition authoring, `/hyperframes-cli` for the dev-loop commands (init, lint, preview, render), `/hyperframes-media` for asset preprocessing (TTS, transcription, background removal), `/tailwind` for `init --tailwind` projects, `/gsap` for timeline animation help, and `/animejs`, `/css-animations`, `/lottie`, `/three`, or `/waapi` when a composition uses those runtimes. Invoking the slash command loads the skill context explicitly, which produces correct output the first time.
16+
This teaches your agent (Claude Code, Cursor, Gemini CLI, Codex, [Google Antigravity](/guides/antigravity), [GitHub Copilot CLI](/guides/copilot-cli)) how to write correct compositions, GSAP timelines, Tailwind v4 browser-runtime styles, and first-party adapter animations. In Claude Code the skills register as slash commands — `/hyperframes` for composition authoring, `/hyperframes-cli` for the dev-loop commands (init, lint, preview, render), `/hyperframes-media` for asset preprocessing (TTS, transcription, background removal), `/tailwind` for `init --tailwind` projects, `/gsap` for timeline animation help, and `/animejs`, `/css-animations`, `/lottie`, `/three`, or `/waapi` when a composition uses those runtimes. Invoking the slash command loads the skill context explicitly, which produces correct output the first time.
1717

1818
<Note>
1919
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).

0 commit comments

Comments
 (0)