Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

8-bit-orbit-video-template — Claude Code skill: what it does

This skill provides a retro 8-bit video template for Hyperframes. Use it to build a multi-scene HTML composition with transitions and an interactive preview.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add nexu-io/open-design --skill 8-bit-orbit-video-template -a claude-code
Open on GitHub

What 8-bit-orbit-video-template does

The skill uses assets/template.html as the starting point for index.html. Keep its three-scene structure and transition rhythm, then adapt the titles, subtitle lines, labels, and palette to the project. Each scene hold must stay within three seconds.

The composition keeps its markup, CSS, and JavaScript in one HTML file. example.html serves as the preview entry, and references/checklist.md is used to validate the result. The timeline must remain deterministic: unseeded randomness or infinite GSAP loops break that requirement. The output contract calls for one short sentence followed by a single HTML artifact.

What it helps with

  • build a retro pixel-style video template in HTML
  • structure a presentation as three scenes with transitions
  • adapt titles, labels, and palette in a Hyperframes composition
  • check scene timing and deterministic timeline behavior

Example prompts for the agent

  • Create a retro 8-bit Hyperframes video deck from this template.
  • Update the titles, subtitle lines, labels, and palette while keeping the three scenes and transition rhythm.
  • Build `index.html` from `assets/template.html` and validate it with `references/checklist.md`.

How to install 8-bit-orbit-video-template

1Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill 8-bit-orbit-video-template -a claude-code

2Manually: put the files in place

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

Copy the whole skill folder; for one project use .claude/skills/8-bit-orbit-video-template/

From the same set106

The whole set →
ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs threejs nexu-io Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js. Claude Code CX Codex Cursor +1 3,400installs creative-director nexu-io This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique. Claude Code CX Codex Cursor +1 3,400installs design-brief nexu-io Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional." Claude Code CX Codex Cursor +1 3,400installs apple-hig nexu-io Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning. Claude Code CX Codex Cursor +1 3,200installs hatch-pet nexu-io Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions. Claude Code CX Codex Cursor +1 3,100installs design-md nexu-io Creates and maintains DESIGN.md with design direction, tokens, and visual rules. Useful when an agent needs one source of truth for a project’s design system. Claude Code CX Codex Cursor +1 3,100installs

Similar

event-store-design Seth Hobson This skill guides event store design for event-sourced systems and helps compare storage technologies. Use it when building event persistence infrastructure or choosing a store. Claude Code CX Codex Cursor 10,800installs answer-me-with-html QingYunA This skill turns selected answers into one-page HTML explainers. Use it to show a flow, compare options, or lay out findings from an investigation. Claude Code CX Codex Cursor +1 5,200installs antislop miqdadbadjuber A rule-based filter for generic AI output in interfaces and code. Use it when an agent needs explicit checks for UI, copy, accessibility, or mobile layout. Claude Code CX Codex Cursor +1 7,300installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. Claude Code 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. Claude Code 979,543installs

Questions about 8-bit-orbit-video-template

How do I install 8-bit-orbit-video-template in Claude Code?

Run npx skills add nexu-io/open-design --skill 8-bit-orbit-video-template -a claude-code, then run the same command again. The skill file is at ~/.claude/skills/8-bit-orbit-video-template/SKILL.md.

What does 8-bit-orbit-video-template do?

It provides a retro pixel-style HTML video structure for Hyperframes, with three scenes and transition guidance. The agent emits a single HTML artifact.

What timing and animation constraints does the template use?

Each scene hold must stay within three seconds. The timeline must avoid unseeded randomness and infinite GSAP loops to remain deterministic.

Source text

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

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor