メニュー
The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class='clip'`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Improve an agent system by holding the worker constant and testing focused changes to context, tools, instructions, authority, or proof. Use for controlled baseline/treatment comparisons, repository harness reviews, prompt or tool-routing optimization, agent reliability work, context-usage audits, and evidence-backed retain/revise/remove decisions.
Use when recalling, writing, correcting, or evolving HivemindOS typed Shared Brain Memory for durable preferences, decisions, instructions, commitments, goals, credential status, project context, lessons, artifacts, or reusable operational facts.
Operate an already-created Zero Human Company in HivemindOS through a strict highest-leverage triage order — clear setup blockers first, decide pending and expiring spend approvals, answer genuine ACTION NEEDED asks through the Work Board answer rail, park retryable infrastructure noise instead of treating it as decisions, review budgets and burn, prune duplicate standing directives, and manage launch, pause, and freeze posture with approval-count backpressure instead of a raw stop. Use whenever the user asks to operate, run, triage, check on, catch up on, unblock, review, or clean up a Zero Human Company, its alerts, notifications, Needs You queue, approvals, budgets, deliverables, or directives. Do not use for creating a new company (use create-zero-human-company) or for merely explaining Zero Human Companies.
Design, audit, or operate an ethical Apple Search Ads + RevenueCat growth loop for iOS subscription apps. Use when the user mentions Apple Ads, Apple Search Ads, ASA, AdServices, RevenueCat attribution, App Store screenshots, competitor keyword campaigns, iOS subscription paywalls, or wants to find profitable country/campaign/keyword pockets from Apple ad spend and RevenueCat exports.
Audit a local business's PUBLIC Google Business Profile against its top 3 map-pack competitors (categories, attributes, review velocity, posts, photos, services, description, NAP) using public data only, and emit a structured weak-signal report that sharpens your lead-gen pipeline's lead diagnosis and truthful cold-message personalization. Use for "GBP audit", "local SEO gap check", "map-pack visibility", "competitor GBP teardown", or enriching outbound lead scoring. Read-only — never edits any GBP.
Build an 8-week Google Business Profile posting calendar for a local business — 2-3 posts/week mixing seasonal offers, before/after showcases, neighborhood-specific updates, review highlights, team spotlights, and educational posts — with full copy for weeks 1-4 (100-150 words, one target keyword, CTA button, image shot suggestion) and outlines for weeks 5-8. Pure copy generation, no privileged data, no auto-posting. Use for "GBP posts", "Google Business Profile posting calendar", "local content calendar", "GBP updates/offers/events", or as the Bucket-B deliverable that fixes a "no posts in 90 days" signal from google-business-profile-public-audit.
| name | hyperframes-core |
| description | The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class='clip'`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML. |
| license | Apache-2.0 |
packaged-skills/auto-install/<slug>/SKILL.md and the Shared Brain skill shelf.packaged-skills/hyperframes/<slug> path, and never run npx skills add, npx skills update, or a curl-to-shell installer to obtain a bundled workflow.HyperFrames renders video from HTML. A composition is an HTML file whose DOM declares timing with data-* attributes, whose animation runtime is seekable, and whose media playback is owned by the framework.
This skill is the technical contract — how to build one hyperframes project. The body below is the build guide; per-topic detail lives in references/ (index next), read on demand. Other concerns live in the sibling domain skills — hyperframes-animation, hyperframes-creative, hyperframes-media, hyperframes-cli, hyperframes-registry. The capability map in /hyperframes says what each one covers.
| File | Read it to… |
|---|---|
references/minimal-composition.md | start from the smallest renderable composition skeleton |
references/composition-patterns.md | choose monolithic vs modular; structure a modular index.html; pick a sub-comp archetype |
references/data-attributes.md | look up any data-* (root / clip / sub-comp host / legacy aliases); use class="clip" |
references/tracks-and-clips.md | pick data-track-index, handle same-track overlap / z-index, time a clip relative to another |
references/sub-compositions.md | wire a sub-composition (host attrs, <template>, per-instance vars) and animate inside it |
references/variables-and-media.md | declare variables; place <video>/<audio>, set volume, trim |
references/determinism-rules.md | build a seekable timeline; determinism bans; the animatable-property allowlist; layout / text fit |
references/full-screen-motion.md | author full-frame motion with shared backgrounds |
references/storyboard-format.md | author a STORYBOARD.md plan (+ the parsed manifest) |
references/script-format.md | author the optional SCRIPT.md locked narration |
references/subagent-dispatch.md | map subagent dispatch verbs (parallel fan-out / background / wait) to your harness |
references/tailwind.md | work in a Tailwind v4 project (init --tailwind; runtime contract differs from Studio's v3) |
For animation runtime specifics (GSAP API, Lottie, Three.js, etc.) go to hyperframes-animation → adapters/<runtime>.md.
index.html) — root <div data-composition-id="…"> sits directly in <body>, no <template> wrapper (wrapping it hides all content and breaks rendering).data-composition-src) — root must be wrapped in <template>.⚠ Transport rule: the runtime only clones
<template>contents; everything outside (incl.<head>styles/scripts) is discarded — put<style>/<script>inside the template. ⚠ Host-id rule: the host slot'sdata-composition-idmust exactly equal the inner template'sdata-composition-idand thewindow.__timelines["<id>"]key — no-mount/-slot/-hostsuffix.
File shape, host wiring, and the pre-render checklist → references/sub-compositions.md.
The standalone root needs an explicit sized box (width/height in px), and every ancestor down to a height:100% element must have a resolved height — otherwise a flex/100% child collapses to ~0 and content piles into the top-left corner. lint/validate/inspect do not catch this. Skeleton → references/minimal-composition.md.
Each composition registers exactly one gsap.timeline({ paused: true }) at window.__timelines["<id>"] (key = root data-composition-id), built synchronously at page load. Render duration = root data-duration, not timeline length. Don't manually nest sub-timelines into the host. Full contract (incl. non-GSAP runtimes) → references/determinism-rules.md + hyperframes-animation/adapters/.
lint/validate/inspect won't catch)Surfaced here; full rationale in the linked reference. Do not violate:
Math.random / network / input-state; no repeat: -1 (use a finite count). → determinism-rules.mddisplay/visibility; no gsap.set on later-scene clips. → determinism-rules.md<br> in body text; transformed elements must be block-level + sized; pulsing absolute decoratives need peak clearance. → determinism-rules.md<video>/<audio> must be a direct child of the host root (never inside a sub-comp <template>/wrapper); the framework owns playback. → variables-and-media.mdid must be unique across the assembled page; inside a sub-comp, prefix ids with the composition id (#<id>-hero). Duplicate <video>/<img> ids render blank — the producer injects frames by getElementById, and cross-file dupes slip past lint. → composition-patterns.mdposition:absolute; inset:0), never on the composition root itself — the producer's frame compositing can drop the root element's own background (the frame renders black) even though preview/snapshot show it correctly. → composition-patterns.mddata-track-index or adjust surrounding timing intentionally.data-composition-id before wiring the host.Use hyperframes-cli for command details
npx hyperframes lint passes (0 errors)npx hyperframes validate passes (0 console errors)npx hyperframes inspect passes (0 errors)npx hyperframes snapshot --at <midpoints> and eyeball each framenpx hyperframes preview for review (the user can edit anything in Studio's timeline)npx hyperframes render only after the user approves