Web & Frontendlow risk
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.
nexu-io/open-design·skills/8-bit-orbit-video-template/SKILL.md
59/ 100推薦值
匯入這個 Skill
選擇你的 coding agent，複製專案級或個人級安裝指令。
匯入目前專案.agents/skills/8-bit-orbit-video-template
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/skills/8-bit-orbit-video-template -a codex -y匯入個人環境~/.agents/skills/8-bit-orbit-video-template
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/skills/8-bit-orbit-video-template -a codex -g -y匯入目前專案.claude/skills/8-bit-orbit-video-template
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/skills/8-bit-orbit-video-template -a claude-code -y匯入個人環境~/.claude/skills/8-bit-orbit-video-template
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/skills/8-bit-orbit-video-template -a claude-code -g -y匯入目前專案.agents/skills/8-bit-orbit-video-template
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/skills/8-bit-orbit-video-template -a github-copilot -y匯入個人環境~/.copilot/skills/8-bit-orbit-video-template
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/skills/8-bit-orbit-video-template -a github-copilot -g -y匯入目前專案.agents/skills/8-bit-orbit-video-template
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/skills/8-bit-orbit-video-template -a cursor -y匯入個人環境~/.cursor/skills/8-bit-orbit-video-template
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/skills/8-bit-orbit-video-template -a cursor -g -y匯入目前專案.agents/skills/8-bit-orbit-video-template
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/skills/8-bit-orbit-video-template -a gemini-cli -y匯入個人環境~/.gemini/skills/8-bit-orbit-video-template
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/skills/8-bit-orbit-video-template -a gemini-cli -g -yNative Gemini CLI
gemini skills install https://github.com/nexu-io/open-design.git --scope workspace --path skills/8-bit-orbit-video-template⚠ 安裝指令使用開源 skills CLI。執行前請檢查來源、腳本與權限。
Skill 指令
在 GitHub 查看原始檔案 ↗# Hyperframes Video Template Ship a premium template-mode Hyperframes composition with a ready default showcase and deterministic timeline behavior. ## Resource map ```text 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: ```xml <artifact identifier="8-bit-orbit-video-template" type="text/html" title="8-Bit Orbit Video Template"> <!doctype html> <html>...</html> </artifact> ```