К основному содержанию
скилл Claude Code CX Codex Cursor GitHub Copilot

8-bit-orbit-video-template — скилл для Claude Code: что делает

Скилл задаёт шаблон ретро-видео в стиле 8-bit для Hyperframes. Он пригодится, когда нужно собрать HTML-композицию из нескольких сцен с переходами и предпросмотром.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add nexu-io/open-design --skill 8-bit-orbit-video-template -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/8-bit-orbit-video-template/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/8-bit-orbit-video-template/

Из того же набора106

Весь набор →
ui-ux-pro-max nexu-io Каталожная карточка для обнаружения скилла UI/UX Pro Max в репозитории OpenDesign. Помогает агенту распознавать запросы к паттернам интерфейсов и эвристикам юзабилити. Claude Code CX Codex Cursor +1 5 400установок frontend-design nexu-io Скилл для создания фронтенд-интерфейсов с продуманной типографикой, цветом и вёрсткой — от лендингов до дашбордов. Claude Code CX Codex Cursor +1 4 800установок threejs nexu-io Помогает ассистенту создавать 3D-сцены, настраивать материалы, камеру и пост-обработку на Three.js прямо в браузере. Claude Code CX Codex Cursor +1 3 400установок creative-director nexu-io Скилл ведёт разработку креативной концепции от брифа до презентации и проверяет идеи по трём осям. Нужен для кампаний и критики концепций. Claude Code CX Codex Cursor +1 3 400установок design-brief nexu-io Преобразует дизайн-бриф в формате I-Lang в конкретную спецификацию с палитрой, типографикой, плотностью и ограничениями. Устраняет неопределённость из фраз вроде «сделай профессионально». Claude Code CX Codex Cursor +1 3 400установок apple-hig nexu-io Подключает базу Apple Human Interface Guidelines для iOS, macOS, visionOS, watchOS и tvOS к агенту при проектировании интерфейсов. Claude Code CX Codex Cursor +1 3 200установок hatch-pet nexu-io Создаёт и упаковывает спрайтшиты анимированных питомцев для Codex в формате 8×9. Пригодится для сборки пиксельного компаньона по концепту или картинке-референсу. Claude Code CX Codex Cursor +1 3 100установок design-md nexu-io Создаёт и ведёт DESIGN.md с направлением дизайна, токенами и визуальными правилами. Пригодится, когда агенту нужен единый документ по дизайн-системе. Claude Code CX Codex Cursor +1 3 100установок

Похожие

event-store-design Seth Hobson Скилл помогает спроектировать хранилище событий для event-sourced системы и выбрать подходящую технологию. Пригодится, когда вы строите инфраструктуру хранения событий. Claude Code CX Codex Cursor 10 800установок answer-me-with-html QingYunA Скилл превращает сложный ответ в одностраничное HTML-объяснение. Пригодится, когда нужно показать схему, сравнение или ход разбора. Claude Code CX Codex Cursor +1 5 200установок antislop miqdadbadjuber Фильтрует шаблонные решения ИИ при работе с интерфейсами и кодом. Нужен, когда агент должен следовать заданным правилам оформления и текста. Claude Code CX Codex Cursor +1 7 300установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок grill-me Matt Pocock Скилл проводит жёсткое интервью по плану или дизайну, чтобы найти пробелы и уточнить решения. Подойдёт перед началом разработки. Claude Code 1 424 476установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. Claude Code 986 201установок grilling Matt Pocock Стресс-тестирует план, решение или идею сериями уточняющих вопросов. Подходит, когда нужно вскрыть допущения до начала работы. Claude Code 979 543установок

Вопросы о 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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой