diff --git a/README.md b/README.md index ffe9f4c2c43..29c356c4221 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/docs/docs.json b/docs/docs.json index 5181593ef26..6b713d3ca11 100644 --- a/docs/docs.json +++ b/docs/docs.json @@ -82,6 +82,7 @@ "guides/with-claude-code", "guides/with-codex", "guides/with-cursor", + "guides/with-pi", "guides/mcp", "guides/free-agents", "guides/skills", diff --git a/docs/faq.mdx b/docs/faq.mdx index df2dd008078..ab862944b38 100644 --- a/docs/faq.mdx +++ b/docs/faq.mdx @@ -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? diff --git a/docs/guides/plugins.mdx b/docs/guides/plugins.mdx index 9c1c726c9c4..23500091c67 100644 --- a/docs/guides/plugins.mdx +++ b/docs/guides/plugins.mdx @@ -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 | | --- | --- | @@ -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. diff --git a/docs/guides/skills.mdx b/docs/guides/skills.mdx index 17f0e6ce364..62ed00da1c9 100644 --- a/docs/guides/skills.mdx +++ b/docs/guides/skills.mdx @@ -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). diff --git a/docs/guides/with-pi.mdx b/docs/guides/with-pi.mdx new file mode 100644 index 00000000000..75c4b1ac9dc --- /dev/null +++ b/docs/guides/with-pi.mdx @@ -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:`, 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) diff --git a/docs/quickstart.mdx b/docs/quickstart.mdx index 73bdf93fdb2..f6bf697e286 100644 --- a/docs/quickstart.mdx +++ b/docs/quickstart.mdx @@ -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 @@ -70,7 +70,7 @@ Set this folder up for HyperFrames and make me a video. 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