chore: help agents find hyperframes on npm and context7

README.md

@@ -32,6 +32,8 @@
 
 HyperFrames is an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. Use it locally with the CLI, from AI coding agents with skills, or as the rendering core behind hosted authoring workflows.
 
+Using Claude Code, Codex, Cursor, or another coding agent? Run `npx hyperframes skills update` once, then ask your agent to make a video.
+
 ## Quick Start
 
 ### With an AI coding agent

context7.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://context7.com/schema/context7.json",
+  "folders": ["docs", "skills", "registry", "examples"],
+  "excludeFolders": ["docs/public", "**/tests", "**/test", "**/fixtures", "**/node_modules"],
+  "excludeFiles": ["weekly-updates.mdx"],
+  "rules": [
+    "Install the HyperFrames agent skills before writing a composition: `npx skills add heygen-com/hyperframes`, or in Claude Code `claude plugin marketplace add heygen-com/hyperframes` then `claude plugin install hyperframes@hyperframes`.",
+    "A composition is an HTML file whose root element has data-composition-id, data-width, data-height and data-duration. Timed elements use class=\"clip\" with data-start and data-duration.",
+    "Register one paused GSAP root timeline per composition on window.__timelines[\"<composition-id>\"]. The runtime seeks it frame by frame, so never play it yourself.",
+    "Rendering is deterministic: no Date.now(), no unseeded Math.random(), no network fetches at render time.",
+    "Check before rendering: `npx hyperframes lint`, `npx hyperframes check`, and `npx hyperframes snapshot --at 1,3,5` for frames. Make the MP4 with `npx hyperframes render --output video.mp4`."
+  ]
+}

docs/packages/cli.mdx

@@ -127,8 +127,10 @@ of v3 `tailwind.config.js` patterns. The browser
 runtime is meant for scaffolded projects and quick iteration — for offline or
 locked-down production renders, compile Tailwind to CSS and link the stylesheet.
 
-After scaffolding, `init` checks and installs the core AI skills from the
-current GitHub source. See [`skills`](#skills).
+Every new project gets an `AGENTS.md` and an identical `CLAUDE.md`: they tell a
+coding agent what HyperFrames is and which commands preview, check, snapshot and
+render the video. After scaffolding, `init` checks and installs the core AI
+skills from the current GitHub source. See [`skills`](#skills).
 
 ### `add`
 

packages/cli/package.json

@@ -1,7 +1,23 @@
 {
   "name": "@hyperframes/cli",
   "version": "0.8.186",
-  "description": "HyperFrames CLI — create, preview, and render HTML video compositions",
+  "description": "Make videos with code and AI agents: write HTML, render MP4. Open source.",
+  "keywords": [
+    "ai-agents",
+    "animation",
+    "claude-code",
+    "codex",
+    "cursor",
+    "gsap",
+    "html-to-video",
+    "hyperframes",
+    "motion-graphics",
+    "mp4",
+    "remotion-alternative",
+    "render",
+    "video",
+    "video-editor"
+  ],
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

packages/cli/src/templates/_shared/AGENTS.md

@@ -1,5 +1,9 @@
 # HyperFrames Composition Project
 
+This folder is a [HyperFrames](https://hyperframes.heygen.com) video: HTML, CSS and seekable
+animations (GSAP by default) that the `hyperframes` CLI previews in the browser and renders to
+MP4.
+
 ## Skills — read these first
 
 **Invoke the relevant skill before writing or modifying compositions.** Skills encode framework-specific patterns (e.g., `window.__timelines` registration, `data-*` attribute semantics, shader-compatible CSS rules) that generic web docs don't cover, so compositions written without them break.
@@ -35,6 +39,7 @@ npx hyperframes preview --background  # agent-safe persistent Studio preview
 npx hyperframes preview --status      # verify the persistent preview is listening
 npx hyperframes preview --stop        # stop it when review is finished
 npm run check        # lint + runtime + layout + motion + contrast (one command)
+npx hyperframes snapshot --at 1,3,5  # PNG frames at those seconds, to look at before rendering
 npm run render       # render to MP4
 npm run publish      # publish and get a shareable link
 npx hyperframes lint --verbose  # include info-level findings

packages/cli/src/templates/_shared/CLAUDE.md

@@ -1,5 +1,9 @@
 # HyperFrames Composition Project
 
+This folder is a [HyperFrames](https://hyperframes.heygen.com) video: HTML, CSS and seekable
+animations (GSAP by default) that the `hyperframes` CLI previews in the browser and renders to
+MP4.
+
 ## Skills — read these first
 
 **Invoke the relevant skill before writing or modifying compositions.** Skills encode framework-specific patterns (e.g., `window.__timelines` registration, `data-*` attribute semantics, shader-compatible CSS rules) that generic web docs don't cover, so compositions written without them break.
@@ -35,6 +39,7 @@ npx hyperframes preview --background  # agent-safe persistent Studio preview
 npx hyperframes preview --status      # verify the persistent preview is listening
 npx hyperframes preview --stop        # stop it when review is finished
 npm run check        # lint + runtime + layout + motion + contrast (one command)
+npx hyperframes snapshot --at 1,3,5  # PNG frames at those seconds, to look at before rendering
 npm run render       # render to MP4
 npm run publish      # publish and get a shareable link
 npx hyperframes lint --verbose  # include info-level findings