Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ Try a prompt like:

> Using `/hyperframes`, create a 10-second product intro with a fade-in title, a background video, and subtle background music.

The skills teach agents the HyperFrames production loop: plan the video, write valid HTML, wire seekable animations, add media, lint, preview, and render. They work with Claude Code, Codex, Cursor, Gemini CLI, IBM Bob, and other coding agents that support skills.
The skills teach agents the HyperFrames production loop: plan the video, write valid HTML, wire seekable animations, add media, lint, preview, and render. They work with Claude Code, Codex, Cursor, Gemini CLI, IBM Bob, Pi, and other coding agents that support skills.

## Skills

Expand Down
1 change: 1 addition & 0 deletions docs/docs.json
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@
"guides/with-claude-code",
"guides/with-codex",
"guides/with-cursor",
"guides/with-pi",
"guides/mcp",
"guides/free-agents",
"guides/skills",
Expand Down
7 changes: 4 additions & 3 deletions docs/faq.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,11 @@ license.
## Which AI agent should I use?

Any coding agent that supports skills works, including Claude Code, Codex,
Cursor, Gemini CLI, GitHub Copilot, Google Antigravity, IBM Bob, and OpenCode.
If you have none yet, start with Claude Code or Codex. Setup guides:
Cursor, Gemini CLI, GitHub Copilot, Google Antigravity, IBM Bob, Pi, and
OpenCode. If you have none yet, start with Claude Code or Codex. Setup guides:
[Claude Code](/guides/with-claude-code), [Codex](/guides/with-codex),
[Cursor](/guides/with-cursor), and [other agents](/guides/skills).
[Cursor](/guides/with-cursor), [Pi](/guides/with-pi), and
[other agents](/guides/skills).

## Can I use it in the Claude or ChatGPT chat app?

Expand Down
3 changes: 2 additions & 1 deletion docs/guides/plugins.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ and more, plus the CLI, registry, and media skills. Skills load when needed.

Choose one installation method per agent. Plugins receive updates through the
agent's plugin manager. [Standalone skills](/guides/skills) remain available for
OpenCode and other agents, or when you prefer the smaller core-only install.
OpenCode, Pi, and other agents, or when you prefer the smaller core-only install.

| Agent | Installation route |
| --- | --- |
Expand All @@ -20,6 +20,7 @@ OpenCode and other agents, or when you prefer the smaller core-only install.
| Cursor | Import through a team marketplace, or load a local plugin |
| Gemini CLI | Install the HyperFrames extension from GitHub |
| Codex | Use your existing HyperFrames plugin; directory updates are published separately |
| Pi | Use standalone skills |
| OpenCode | Use standalone skills |

You need Node.js 22+ and npm for the local CLI, plus FFmpeg for rendering.
Expand Down
13 changes: 13 additions & 0 deletions docs/guides/skills.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,19 @@ bob
Ask Bob to use `/hyperframes` for the first request. Running the update again
refreshes the same global skill bundles without changing the project format.

## Use the skills in Pi

Run `npx hyperframes skills update`, then open Pi in the project folder. Pi reads
the skills from the shared `~/.agents/skills` folder in every project, and loads
one with `/skill:hyperframes`:

```text
/skill:hyperframes make a 10-second product intro for https://example.com.
```

See [Make videos with Pi](/guides/with-pi) for the project-local install and
what to check when Pi does not list the skill.

## What the skills cover

Make any video by asking for it; the `/hyperframes` skill carries the contract and the references (each kind of film, story, motion, look, sound, review, captions, overlays).
Expand Down
100 changes: 100 additions & 0 deletions docs/guides/with-pi.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
---
title: "Make videos with Pi"
sidebarTitle: "Pi"
description: "Install the HyperFrames skills in Pi, ask for a video in plain words, then preview and render it to MP4 on your computer."
---

Install the HyperFrames skills, then ask Pi for a video. Pi writes an HTML
project in your folder, opens a live preview, and renders the MP4 on your
computer.

```bash
npx hyperframes skills update
```

This installs the core skills into your user's shared skills folder,
`~/.agents/skills`, which Pi reads in every project. Pi needs no plugin to use
them.

## Before you start

- [Pi](https://github.com/earendil-works/pi), signed in to the provider whose
models you want to use. Its usage bills to that provider.
- Node.js 22 or newer, and npm.
- FFmpeg, for rendering MP4 files. Run `npx hyperframes doctor` to check.

## Install

Run the command above once. Run it again later to update the skills.

To keep the skills with one project instead, run this in the project folder and
choose **Core Skills** and **Pi** in the picker:

```bash
npx skills add heygen-com/hyperframes
```

That writes the skills to the project's `.agents/skills` folder. Pi asks for
project trust when it finds that folder; grant it so the skills load, and read
the skill files first if the project is unfamiliar.

Start a new Pi session after either install. See
[Install and update agent skills](/guides/skills) for checking and updating.

## Ask for your first video

Open Pi in an empty folder and paste:

```text
/skill:hyperframes make a 10-second product intro for https://example.com.
```

Pi loads a skill with `/skill:<name>`, so the command is `/skill:hyperframes`.
Naming the skill in plain words works too, because Pi selects it from the skill's
description. Replace the URL with the page you want the video to show.

## What happens

1. Pi reads the HyperFrames guide for your kind of video, such as a product
launch or an explainer, and builds the project in your folder. For a longer
film that tells a story, it first offers three storylines to pick from.
2. It checks the project and opens a local preview.

Pi runs commands without asking each time, so start it in a folder you are
willing to let it change. The skills install packages, start a preview server,
and run the renderer. Watch the first version and say what to change, in the
same session.

## Preview and render

To reopen the preview later, run this inside the project folder:

```bash
npx hyperframes preview
```

The preview opens in the browser editor, where you can also edit the video by
hand. To make the MP4 yourself:

```bash
npx hyperframes render --output final.mp4
```

You can also ask Pi to render it.

## If something goes wrong

- **Pi does not offer `/skill:hyperframes`.** Start a new session. Confirm that
`~/.agents/skills/hyperframes` (user install) or `.agents/skills/hyperframes`
(project install) exists, then run `npx hyperframes skills check`.
- **Pi ignores a project install.** Grant project trust when Pi asks, or start it
with `pi --approve` in that folder. Declining trust makes Pi skip the project's
`.agents/skills`.
- **The render fails.** Run `npx hyperframes doctor` and fix what it reports.
- **Anything else.** See [Troubleshooting](/help).

## Related topics

- [Make your first video](/quickstart)
- [Choose what to make](/workflows)
- [Write better prompts](/prompting/overview)
6 changes: 3 additions & 3 deletions docs/quickstart.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,8 @@ drawing. For Mac (Apple Silicon or Intel), Windows (64-bit Intel and AMD; not Wi

## With your agent

For Claude Code, Codex, Cursor, Copilot, Gemini CLI or any agent that works in a folder on your computer, on any
system.
For Claude Code, Codex, Cursor, Copilot, Gemini CLI, Pi or any agent that works in a folder on your computer, on
any system.

### The short way

Expand All @@ -70,7 +70,7 @@ Set this folder up for HyperFrames and make me a video.
<Steps>
<Step title="Install the plugin or skills">
Step-by-step pages: [Claude Code](/guides/with-claude-code), [Codex](/guides/with-codex),
[Cursor](/guides/with-cursor).
[Cursor](/guides/with-cursor), [Pi](/guides/with-pi).

For Claude Code, Copilot, VS Code, Cursor, or Gemini CLI, start with the
[plugin installation guide](/guides/plugins). It includes update settings for each agent. Claude's plugin entry
Expand Down