# Create HyperFrames Video Direction

Video compositions often become generic when style decisions are improvised. This skill gives agents structured creative direction for polished HyperFrames videos.

## Install

```bash
npx skillstore add heygen-com/hyperframes-creative
```

## Metadata

- - Slug: heygen-com-hyperframes-creative
- - Version: 1.0.0
- - Author: heygen-com
- - GitHub username: heygen-com
- - License: MIT
- - Repository: https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes-creative/
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: medium
- - Risk factors: network, external\_commands, filesystem, scripts, env\_access
- - Quality score: 50
- - Quality tier: warning
- - Public page: https://skillstore.pages.dev/skills/heygen-com-hyperframes-creative
- - Manifest: https://skillstore.pages.dev/api/skills/heygen-com-hyperframes-creative/manifest

## Capabilities

- Routes agents to the right creative references for HyperFrames video work.
- Explains how to read and apply frame.md and design.md specifications.
- Provides reusable frame presets with palette, type, layout, and caption guidance.
- Guides narration pacing, beat planning, and scene density decisions.
- Includes helper scripts for contrast checks and audio-reactive data extraction.
- Offers an interactive design picker template for selecting a visual direction.

## Use Cases

- Shape a Product Launch Video: Choose a frame preset, typography system, palette, and pacing plan before building a HyperFrames promo video.
- Convert Brand Notes Into Video Style: Turn a design brief into frame-level rules for color, type, density, captions, and visual tone.
- Improve a Draft Composition: Audit a draft video for generic layout, weak hierarchy, poor caption styling, and missing produced-video details.

## Prompt Templates

### Pick a Visual Direction

```
Use hyperframes-creative to choose a visual direction for a 45-second HyperFrames video about my product. Ask for missing brand details first.
```

### Create a Frame Spec

```
Use hyperframes-creative to draft a frame.md design spec from this brand brief. Include colors, typography, layout, elevation, and caption style.
```

### Plan Scene Beats

```
Use hyperframes-creative to plan scene beats, pacing, narration tone, and visual density for a 60-second explainer video.
```

### Review a Composition Direction

```
Use hyperframes-creative to review this HyperFrames draft for design adherence, video-medium density, typography choices, and brand consistency.
```

## Limitations

- It does not provide core HyperFrames rendering rules or CLI documentation.
- It intentionally defers animation primitives to the hyperframes-animation skill.
- Some helper scripts execute local tools and should be reviewed before use.
- Generated picker previews must be sanitized before insertion into the HTML template.

## Best Practices

- Read house-style.md and video-composition.md before making non-trivial design decisions.
- Use exact brand tokens from frame.md or design.md instead of inventing nearby values.
- Validate generated HTML previews and captions before rendering or sharing outputs.

## Anti Patterns

- Do not treat a video frame like a responsive web landing page.
- Do not run helper scripts or dependency bootstrapping without reviewing commands first.
- Do not inject untrusted preview\_html into the design picker without sanitization.

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-27T09:04:07.171\+00:00
- - Summary: The static scanner reported many critical and high findings, but most are false positives from design-language keywords, Markdown examples, and harmless words such as SAME. Real concerns remain: local helper scripts can execute npm, Node, and ffmpeg, and the design picker injects generated preview HTML with innerHTML.

## Stats

- - Views: 0
- - Downloads: 0
- - Favorites: 0
- - Popularity score: 0