Auto-invokedSkill
od-contribute
One-click contribution flow for OpenDesign (nexu-io/open-design) — even for non-coders. Pick one of four cards (ship a Skill or Design System you made with OD;…
@nexu-ioView Skill/8-bit-orbit-video-template
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.
Install
$ npx -y skills add nexu-io/open-design --skill 8-bit-orbit-video-template --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/8-bit-orbit-video-template
Context preview
The summary Claude sees to decide when to auto-load this skill.
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.
SKILL.md
8-bit-orbit-video-template.SKILL.mdname: 8-bit-orbit-video-template
description: |
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.
triggers:
- "hyperframes video template"
- "video template"
- "pixel motion deck"
- "retro presentation video"
- "Hyperframes 模板"
- "视频模板"
- "像素风动效"
od:
mode: template
surface: video
type: hyperframes
platform: desktop
preview:
type: html
entry: example.html
reload: debounce-100
design_system:
requires: false
outputs:
primary: index.html
secondary:
- template.html
- example.html
example_prompt: "Create a 3-page Hyperframes video deck in 8-bit retro style with advanced transitions, rich motion, and each page under 3 seconds."
capabilities_required:
- file_writeHyperframes 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
1. Copy `assets/template.html` to `index.html`. 2. Keep the 3-scene structure and transition rhythm intact unless the user explicitly asks to change pacing. 3. Personalize titles, subtitle lines, labels, and palette while preserving the retro pixel aesthetic. 4. Keep timing constraint: every scene hold should stay within 3 seconds. 5. Preserve deterministic behavior in generated compositions (no unseeded randomness, no infinite GSAP loops). 6. Keep all code self-contained in one HTML file with inline CSS/JS. 7. 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>
Read more
name: 8-bit-orbit-video-template
description: |
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.
triggers:
- "hyperframes video template"
- "video template"
- "pixel motion deck"
- "retro presentation video"
- "Hyperframes 模板"
- "视频模板"
- "像素风动效"
od:
mode: template
surface: video
type: hyperframes
platform: desktop
preview:
type: html
entry: example.html
reload: debounce-100
design_system:
requires: false
outputs:
primary: index.html
secondary:
- template.html
- example.html
example_prompt: "Create a 3-page Hyperframes video deck in 8-bit retro style with advanced transitions, rich motion, and each page under 3 seconds."
capabilities_required:
- file_writeHyperframes 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
1. Copy `assets/template.html` to `index.html`. 2. Keep the 3-scene structure and transition rhythm intact unless the user explicitly asks to change pacing. 3. Personalize titles, subtitle lines, labels, and palette while preserving the retro pixel aesthetic. 4. Keep timing constraint: every scene hold should stay within 3 seconds. 5. Preserve deterministic behavior in generated compositions (no unseeded randomness, no infinite GSAP loops). 6. Keep all code self-contained in one HTML file with inline CSS/JS. 7. 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>
Ships withopen-design
🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLIs via BYOK.
Get the whole plugin, auto-invoked
Stats
95,466
Stars
11,063
Forks
Active
Maintenance
TypeScript
Language
Apache-2.0
License
3d ago
Last commit
4mo ago
Created
Repo: nexu-io/open-design
Other skills on open-design.
@nexu-ioView SkillAuto-invokedSkill
ad-creative
Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad iteration.
@nexu-ioView SkillAuto-invokedSkill
after-hours-editorial-…
Luxury dark-editorial HyperFrames template for three-page cinematic storyboards, inspired by haute couture title cards and magazine chapter spreads. Use when…
@nexu-ioView SkillAuto-invokedSkill
agent-browser
Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages, filling forms, clicking…
@nexu-ioView SkillAuto-invokedSkill
ai-music-album
Full-lifecycle AI music album production — concept, lyric drafting, track sequencing, and export. Useful for indie album experiments and brand soundtracks.
@nexu-ioView SkillAuto-invokedSkill
algorithmic-art
Create generative art using p5.js with seeded randomness so every render is reproducible. Useful for procedural posters, motion-style stills, and artistic…
@nexu-ioView Skill