8-bit-orbit-video-template

nexu-io/open-design · skills/8-bit-orbit-video-template/SKILL.md

Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced transitions, interactive preview controls, and ready-to-render default style.

Design & CreativeNo license★ 91788⑂ 10564commit 9881cff

Install skillView source on GitHub

What this skill does

Hyperframes Video Template

Ship a premium template-mode Hyperframes composition with a ready default showcase and deterministic timeline behavior.

Resource map

8-bit-orbit-video-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

The rendered MP4 showcase used by example.html is hosted at https://repo-assets.open-design.ai/resources/videos/skills/8-bit-orbit-video-template/default-showcase.mp4.

Workflow

Copy assets/template.html to index.html.
Keep the 3-scene structure and transition rhythm intact unless the user explicitly asks to change pacing.
Personalize titles, subtitle lines, labels, and palette while preserving the retro pixel aesthetic.
Keep timing constraint: every scene hold should stay within 3 seconds.
Preserve deterministic behavior in generated compositions (no unseeded randomness, no infinite GSAP loops).
Keep all code self-contained in one HTML file with inline CSS/JS.
Validate against references/checklist.md before emitting the artifact.

Output contract

Emit one short sentence before the artifact, then a single HTML artifact:

<artifact identifier="8-bit-orbit-video-template" type="text/html" title="8-Bit Orbit Video Template">
<!doctype html>
<html>...</html>
</artifact>

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/8-bit-orbit-video-template · pinned to the source commit

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/skills/8-bit-orbit-video-template" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/skills/8-bit-orbit-video-template" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/8-bit-orbit-video-template

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so 8-bit-orbit-video-template is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

No static rules matched. This is not a safety guarantee.

8-bit-orbit-video-template

nexu-io/open-design · skills/8-bit-orbit-video-template/SKILL.md

Design & CreativeNo license★ 91788⑂ 10564commit 9881cff

Install skillView source on GitHub

What this skill does

Hyperframes Video Template

Ship a premium template-mode Hyperframes composition with a ready default showcase and deterministic timeline behavior.

Resource map

8-bit-orbit-video-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

The rendered MP4 showcase used by example.html is hosted at https://repo-assets.open-design.ai/resources/videos/skills/8-bit-orbit-video-template/default-showcase.mp4.

Workflow

Copy assets/template.html to index.html.
Keep the 3-scene structure and transition rhythm intact unless the user explicitly asks to change pacing.
Personalize titles, subtitle lines, labels, and palette while preserving the retro pixel aesthetic.
Keep timing constraint: every scene hold should stay within 3 seconds.
Preserve deterministic behavior in generated compositions (no unseeded randomness, no infinite GSAP loops).
Keep all code self-contained in one HTML file with inline CSS/JS.
Validate against references/checklist.md before emitting the artifact.

Output contract

Emit one short sentence before the artifact, then a single HTML artifact:

<artifact identifier="8-bit-orbit-video-template" type="text/html" title="8-Bit Orbit Video Template">
<!doctype html>
<html>...</html>
</artifact>

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/8-bit-orbit-video-template · pinned to the source commit

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/skills/8-bit-orbit-video-template" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/skills/8-bit-orbit-video-template" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/8-bit-orbit-video-template

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so 8-bit-orbit-video-template is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

No static rules matched. This is not a safety guarantee.

8-bit-orbit-video-template

What this skill does

Hyperframes Video Template

Resource map

Workflow

Output contract

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits

8-bit-orbit-video-template

What this skill does

Hyperframes Video Template

Resource map

Workflow

Output contract

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits