mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
**Nine guide videos rebuilt in the light house style.** They were dark — a reader clicking between sibling guides watched the theme flip. mcp, performance, rendering, skills, html-in-canvas and remove-background were restyled to the bone field; faceless-explainer, product-launch and voice-and-audio were re-narrated with River, the house voice the user-journey films use. Measured luma is 177-230, matching the journey films, and every one carries audio. The restyle also surfaced a real bug in the frame itself: the house coral #D96A4F is 2.95:1 on bone, under the WCAG large-text floor, and `hyperframes check` failed on it. Darkened to #B44E33 (4.43:1) before any of these rendered. **canary-rollouts trimmed from 2,443 words to 520.** The statistical-calibration essay — pre-registered experiment design, a probability formula, rejected hardware-fingerprinting alternatives — was never documentation for someone shipping a staged rollout. Cut to Add one / Override one / Remove one / Where it lives, the part that was already good. **thirty-days now shows the films.** It was 431 words and 30 links to x.com for a series entirely about videos, with no thumbnails. It now leads with real preview clips where a film exists and marks the rest with a visual placeholder rather than a dead off-site link.
142 lines
4.9 KiB
Plaintext
142 lines
4.9 KiB
Plaintext
---
|
|
title: "Install and update agent skills"
|
|
sidebarTitle: "Agent skills"
|
|
description: "Teach a coding agent how to create valid HyperFrames projects and load specialized workflows when needed."
|
|
---
|
|
|
|
import { DocsVideo } from "/snippets/docs-video.jsx";
|
|
|
|
HyperFrames skills teach coding agents the project format, animation rules, media workflow, validation loop, and creation workflows that generic web knowledge does not cover.
|
|
|
|
<DocsVideo
|
|
title="One command installs the skills, and the router picks the workflow"
|
|
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/skills-install-demo-v2.mp4"
|
|
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/skills-install-demo-v2.jpg"
|
|
/>
|
|
|
|
The terminal output is a real run of the command. Afterwards the router reads a
|
|
request and chooses the workflow for it, instead of the agent guessing at the
|
|
framework's rules.
|
|
|
|
## Install for a person
|
|
|
|
Run the interactive installer:
|
|
|
|
```bash
|
|
npx skills add heygen-com/hyperframes --full-depth
|
|
```
|
|
|
|
Select **Core Skills**. The `/hyperframes` router installs a specialized creation workflow when the request needs one, so you do not need the full catalog up front.
|
|
|
|
Start a fresh agent chat after installation, then ask it to use `/hyperframes`.
|
|
|
|
## Install or refresh from an agent
|
|
|
|
For a non-interactive agent or CI environment, use:
|
|
|
|
```bash
|
|
npx hyperframes skills update
|
|
```
|
|
|
|
This installs or refreshes the core set and any HyperFrames skills already present in the global install, then links those bundles into compatible installed agents. It does not add every optional workflow.
|
|
|
|
Check freshness without changing anything:
|
|
|
|
```bash
|
|
npx hyperframes skills check
|
|
```
|
|
|
|
Install or refresh one workflow explicitly:
|
|
|
|
```bash
|
|
npx hyperframes skills update pr-to-video
|
|
```
|
|
|
|
## Use the skills in Google Antigravity
|
|
|
|
Install the skills from the root of the project you open in Antigravity:
|
|
|
|
```bash
|
|
npx skills add heygen-com/hyperframes --full-depth
|
|
```
|
|
|
|
Select **Core Skills** and **Antigravity**. This uses Antigravity's supported
|
|
project location, `.agents/skills`, and keeps the skills with the project. Start
|
|
a fresh Antigravity conversation after installation.
|
|
|
|
Antigravity also supports a global `~/.gemini/config/skills` directory. See
|
|
Google's [current skills guide](https://antigravity.google/docs/skills?app=antigravity-ide)
|
|
before managing that directory by hand.
|
|
|
|
## Use the skills in GitHub Copilot CLI
|
|
|
|
Run `npx hyperframes skills update`, open the project, and start Copilot:
|
|
|
|
```bash
|
|
copilot
|
|
```
|
|
|
|
If Copilot was already running, use `/skills reload`. Use `/skills list` or
|
|
`/skills info hyperframes` to confirm discovery. GitHub's [current skills
|
|
guide](https://docs.github.com/en/copilot/how-tos/copilot-cli/customize-copilot/add-skills)
|
|
lists its project and personal skill locations.
|
|
|
|
Both agents can use the same first request:
|
|
|
|
```text
|
|
Using /hyperframes, make a 10-second product intro for https://example.com.
|
|
```
|
|
|
|
Continue in the same conversation for revisions. For hosted creation instead
|
|
of a local project, use the [HyperFrames MCP guide](/guides/mcp).
|
|
|
|
## Let the router choose
|
|
|
|
The normal entry point is `/hyperframes`. It confirms the important intent, then selects a workflow from the input:
|
|
|
|
| You provide | Workflow |
|
|
| --- | --- |
|
|
| A product website or product brief | Product launch video |
|
|
| A topic or script with no website capture | Faceless explainer |
|
|
| A GitHub pull request | PR-to-video |
|
|
| Existing talking-head footage | Captions or a designed recut |
|
|
| A music track | Music-driven video |
|
|
| A short design-led animation | Motion graphic |
|
|
| A presentation | Slideshow |
|
|
| A Figma file or frame | Figma import with assets, brand tokens, components, and reconstructed motion |
|
|
| Anything outside those shapes | General video |
|
|
|
|
You can invoke a workflow directly when you already know it is the right one, but you do not need to memorize the names to start.
|
|
|
|
## Install more only when you need it
|
|
|
|
Install the complete set deliberately with:
|
|
|
|
```bash
|
|
npx skills add heygen-com/hyperframes --all --full-depth
|
|
```
|
|
|
|
Or install one named skill:
|
|
|
|
```bash
|
|
npx skills add heygen-com/hyperframes --skill hyperframes-animation --full-depth
|
|
```
|
|
|
|
Use the full set for an environment that must work across many HyperFrames tasks without fetching later. For a normal project, the core set is smaller and easier to keep current.
|
|
|
|
## If the agent cannot see a skill
|
|
|
|
1. Start a new agent session.
|
|
2. Confirm that the project or global skill directory belongs to the agent you are using.
|
|
3. Run `npx hyperframes skills check`.
|
|
4. Run `npx hyperframes skills update` when the check reports a missing or stale core skill.
|
|
|
|
The individual skill definitions remain the source of truth for agents and are
|
|
available in the [HyperFrames repository](https://github.com/heygen-com/hyperframes/tree/main/skills).
|
|
|
|
## Related topics
|
|
|
|
- [Make your first video](/quickstart)
|
|
- [Choose a specific creation workflow](/workflows)
|
|
- [Use authentication and hosted services](/guides/authentication)
|