# Hyperframes Video

> Current Hyperframes pack for HTML-first motion videos, lintable frames, previews, and render command prep.

- **Type:** Skill
- **Install:** `agentstack add skill-sarveshsea-design-skills-hyperframes-video`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [sarveshsea](https://agentstack.voostack.com/s/sarveshsea)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [sarveshsea](https://github.com/sarveshsea)
- **Source:** https://github.com/sarveshsea/design-skills/tree/main/skills/hyperframes-video
- **Website:** https://www.memoire.cv/notes/community/

## Install

```sh
agentstack add skill-sarveshsea-design-skills-hyperframes-video
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Hyperframes Video

Use this Note when the video can be expressed as a deterministic HTML scene.
Hyperframes is the lighter path for product cards, marketing loops, website
captures, and simple composited explainers.

## Current Workflow

1. Generate `index.html` and `hyperframes.json` in `.memoire/videos/`.
2. Preview with `npx hyperframes preview .` from the project folder, or pass the
   folder explicitly from Studio.
3. Lint with `npx hyperframes lint .` before rendering when the command is
   available.
4. Render with `npx hyperframes render . --output dist/.mp4`.

## Scaffold Rules

- Keep all external assets local to the project folder or explicit URLs.
- Prefer CSS keyframes and deterministic layout over runtime mutation.
- Store render outputs in `dist/` and keep `hyperframes.json` as the command
  contract Studio can inspect.
- Use `@hyperframes/core` or `@hyperframes/producer` for programmatic validation
  and rendering once the sidecar grows beyond command preparation.

## Quality Bar

- Use fixed dimensions, fps, and duration in config.
- Avoid layout shifts between preview and render.
- Keep colors/tokens aligned with the source product rather than inventing a
  separate video theme.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [sarveshsea](https://github.com/sarveshsea)
- **Source:** [sarveshsea/design-skills](https://github.com/sarveshsea/design-skills)
- **License:** MIT
- **Homepage:** https://www.memoire.cv/notes/community/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-sarveshsea-design-skills-hyperframes-video
- Seller: https://agentstack.voostack.com/s/sarveshsea
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.