skill
Hyperframes Core
نبذة
**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](../hyperframes/references/plugin-installation.md) when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below.
# HyperFrames Core
**Agent pitfalls (read first):**
- Center with flex/`inset`, not CSS `transform: translate(-50%,-50%)` on a node you then GSAP `x`/`y`. Lint: `gsap_css_transform_conflict`. Use `fromTo` or `xPercent`/`yPercent`. - Do not add a scene-exit `tl.set(..., {visibility:"hidden"})`. The runtime already hides timed clips. Opacity fades on inner nodes (or `opacity` on `.clip`) are enough. Caption hard-kills are a different rule. - `window.__timelines["id"]` must match the root `data-composition-id`. - After `render`, read the summary's second line: `beginframe` vs `screenshot`, GPU mode, stage timings. `screenshot` + `software gpu` on Linux is the slow path.
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. Process docs (brief, storyboard, review, production, dispatch, frame-worker) live in `/hyperframes` → `references/`. Other concerns live in the sibling domain skills — `hyperframes-animation`, `hyperframes-creative`, `media-use`, `hyperframes-cli`, `hyperframes-registry`. The capability map in `/hyperframes` says what each one covers.
## References
| 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` | understand what `data-track-index` does (and does not) control, z-index, time a clip relative to another; list every track and clip with `npx hyperframes timeline` | | `references/creator-editing-recipes.md` | copy truthful cut/trim/reorder/retime/freeze/camera/mask/crossfade/audio editing recipes and their limits | | `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; layout / text fit | | `references/full-screen-motion.md` | author full-frame motion with shared backgrounds | | `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`.
## Building a composition
### Two root forms (not interchangeable)
- **Standalone** (top-level `index.html`): root `<div data-composition-id="…">` sits directly in `<body>`, **no `<template>` wrapper**. Wrapping a standalone root hides all content and `lint` rejects it (`standalone_composition_wrapped_in_template`, error). - **Sub-composition** (loaded via `data-composition-src`): wrap the root in `<template>`. This is the shape to write: the loader also accepts a plain full document and falls back to its `<body>`, but the templated form is what the examples and tooling assume.
> ⚠ Transport rule: for a **templated** sub-composition the assembler drops the file's own `<h
التثبيت
شغل هذا الأمر
npx skills add heygen-com/hyperframesيعمل مع
خطوات التثبيت
Install with `npx skills add heygen-com/hyperframes`, or clone the repository and copy the `skills/hyperframes-core` folder into your Claude skills directory.
أسئلة شائعة
كيف أثبت Hyperframes Core؟
شغل هذا الأمر في الطرفية:
npx skills add heygen-com/hyperframesمع أي أدوات ذكاء اصطناعي تعمل Hyperframes Core؟
تعمل مع claude_app، claude_code، claude_api، cursor، codex، windsurf، cline، zed.
من طور Hyperframes Core؟
طورها heygen-com.
هل Hyperframes Core مجانية؟
نعم، يمكنك استخدامها مجانا.
npx skills add mattpocock/skills
npx skills add mattpocock/skills
npx skills add heygen-com/hyperframes
npx skills add mattpocock/skills
npx skills add microsoft/azure-skills
npx skills add mattpocock/skills
افحص قبل التثبيت
شغل أي مصدر عبر فحوصاتنا - الظهور في الذكاء الاصطناعي والأمان والأداء واكتشاف التقنيات.
فحص أمني تلقائي للموقع
الأمان
محلل سرعة الصفحة
الأداء
اختبار جودة المحتوى العربي بالذكاء الاصطناعي
جودة المحتوى
مختبر وكلاء الذكاء الاصطناعي
اختبار الذكاء الاصطناعي
كاشف منصة الموقع
الترحيل
تدقيق الظهور في محركات الذكاء الاصطناعي
الظهور في الذكاء الاصطناعي
مولد ملف llms.txt
الظهور في الذكاء الاصطناعي
مقياس سهولة القراءة بالعربية
جودة المحتوى
منشئ البيانات المنظمة
الظهور في الذكاء الاصطناعي
حاسبة تكاليف الذكاء الاصطناعي
اختبار الذكاء الاصطناعي
محلل العناوين العربية
جودة المحتوى