8-bit-orbit-video-template — скилл для Claude Code: что делает
Скилл задаёт шаблон ретро-видео в стиле 8-bit для Hyperframes. Он пригодится, когда нужно собрать HTML-композицию из нескольких сцен с переходами и предпросмотром.
npx skills add nexu-io/open-design --skill 8-bit-orbit-video-template -a claude-codeЧто делает 8-bit-orbit-video-template
Скилл предлагает взять assets/template.html за основу и создать index.html. В композиции сохраняются три сцены и заданный ритм переходов; можно менять заголовки, подписи, метки и палитру, оставляя пиксельную эстетику. Каждая сцена должна длиться не больше трёх секунд.
Вся разметка, CSS и JavaScript остаются в одном HTML-файле. Для проверки предусмотрен references/checklist.md, а пример для предпросмотра — example.html. Скилл требует предсказуемой временной шкалы: случайность без фиксированного начального значения и бесконечные циклы GSAP нарушат это требование. На выходе агент сначала пишет короткое предложение, затем выдаёт один HTML-артефакт.
Какие задачи решает
- создать HTML-шаблон видео в ретро-пиксельном стиле
- разбить презентацию на три сцены с переходами
- персонализировать заголовки, подписи и палитру
- проверить длительность сцен и поведение временной шкалы
Примеры запросов агенту
- Создай видео-презентацию Hyperframes в ретро-стиле 8-bit по этому шаблону.
- Замени заголовки, подписи и палитру, сохранив три сцены и ритм переходов.
- Собери `index.html` по `assets/template.html` и проверь его по `references/checklist.md`.
Как установить 8-bit-orbit-video-template
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill 8-bit-orbit-video-template -a claude-code2Вручную: положить файлы
~/.claude/skills/8-bit-orbit-video-template/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/8-bit-orbit-video-template/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill 8-bit-orbit-video-template -a codex2Вручную: положить файлы
.agents/skills/8-bit-orbit-video-template/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill 8-bit-orbit-video-template -a cursor2Вручную: положить файлы
.cursor/skills/8-bit-orbit-video-template/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install nexu-io/open-design 8-bit-orbit-video-template2Вручную: положить файлы
.github/skills/8-bit-orbit-video-template/SKILL.md1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill 8-bit-orbit-video-template -a gemini-cli2Командой платформы
gemini skills install https://github.com/nexu-io/open-design --path skills/8-bit-orbit-video-templateВручную: положить файлы
.devin/skills/8-bit-orbit-video-template/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill 8-bit-orbit-video-template -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора106
Весь набор →Похожие
Вопросы о 8-bit-orbit-video-template
Как установить 8-bit-orbit-video-template в Claude Code?
Выполните npx skills add nexu-io/open-design --skill 8-bit-orbit-video-template -a claude-code, затем повторите эту же команду. Файл скилла находится по пути ~/.claude/skills/8-bit-orbit-video-template/SKILL.md.
Что делает 8-bit-orbit-video-template?
Он задаёт структуру HTML-видео в ретро-пиксельной стилистике: три сцены, переходы и правила для временной шкалы. Агент создаёт один HTML-артефакт.
Какие ограничения у шаблона сцен?
Каждая сцена должна длиться не больше трёх секунд. Также требуется сохранять предсказуемое поведение: без случайности без фиксированного начального значения и бесконечных циклов GSAP.
Исходный текст
SKILL.md · Apache-2.0
---
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_write
---
# 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>
```
© nexu-io · Apache-2.0 · nexu-io/open-design