Skill Claude CodeCodex
Convert articles, blog posts, changelogs, docs, reports, release notes, and briefs into HyperFrames explainer or social videos with scripts, captions, scenes, citations, renders, and QC.
Skill Claude CodeCodex
Turn CSV, JSON, spreadsheet extracts, tables, metrics, and report data into HyperFrames animated chart videos with data validation, chart recipes, labels, timing, renders, and QC.
Skill Claude CodeCodex
Author deterministic HyperFrames HTML/CSS/JS video compositions with scenes, dimensions, timelines, animations, subtitles, titles, transitions, charts, and brand-controlled layouts. Use for local or CI HTML-to-video rendering, not for prompt-to-video model calls.
Skill Claude CodeCodex
Validate HyperFrames video outputs, render manifests, source files, dimensions, duration, frame readability, subtitle timing, asset references, audio presence, rights notes, and rerender readiness.
Skill Claude CodeCodex
Convert a website, landing page, product page, docs page, or captured URL context into a HyperFrames video with page hierarchy, screenshots, scroll/reveal scenes, captions, CTA, render manifest, and QC.
Skill Claude CodeCodex
Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.
Skill Claude CodeCodex
CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.
Skill Claude CodeCodex
GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.
Skill Claude CodeCodex
Lottie and dotLottie adapter patterns for HyperFrames. Use when embedding lottie-web JSON animations, .lottie files, @lottiefiles/dotlottie-web players, registering instances on window.hfLottie, or making After Effects exports deterministic in HyperFrames.
Skill Claude CodeCodex
Tailwind CSS v4.2 browser-runtime patterns for HyperFrames compositions. Use when scaffolding or editing projects created with hyperframes init --tailwind, writing Tailwind utility classes in composition HTML, adding CSS-first Tailwind v4 theme tokens, debugging v3 vs v4 syntax, or deciding when to compile Tailwind to…
Skill Claude CodeCodex
Three.js and WebGL adapter patterns for HyperFrames. Use when creating deterministic Three.js scenes, WebGL canvas layers, AnimationMixer timelines, camera motion, shader-driven visuals, or canvas renders that respond to HyperFrames hf-seek events.
Skill Claude CodeCodex
Web Animations API adapter patterns for HyperFrames. Use when authoring element.animate() motion, Animation currentTime seeking, document.getAnimations(), KeyframeEffect timing, fill modes, or native browser animations that must render deterministically in HyperFrames.
Skill Claude CodeCodex
HyperFrames CLI dev loop — npx hyperframes for scaffolding (init), validation (lint, inspect), preview, render, and environment troubleshooting (doctor, browser, info, upgrade). Use when running any of these commands or troubleshooting the HyperFrames build/render environment. For asset preprocessing commands (tts…
Skill Claude CodeCodex
Asset preprocessing for HyperFrames compositions — text-to-speech narration (Kokoro), audio/video transcription (Whisper), and background removal for transparent overlays (u2net). Use when generating voiceover from text, transcribing speech for captions, removing the background from a video or image to use as a…
Skill Claude CodeCodex
Install and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add, installing a block or component, wiring an installed item into index.html, or working with hyperframes.json. Covers the add command, install locations, block sub-composition wiring, component snippet…
Skill Claude CodeCodex
Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation…
Skill Claude CodeCodex
Capture a website and create a HyperFrames video from it. Use when: (1) a user provides a URL and wants a video, (2) someone says "capture this site", "turn this into a video", "make a promo from my site", (3) the user wants a social ad, product tour, or any video based on an existing website, (4) the user shares a…
Skill Claude CodeCodex
Translate an existing Remotion (React-based) video composition into a HyperFrames HTML composition. Use ONLY when the user explicitly asks to port, convert, migrate, translate, or rewrite a Remotion composition as HyperFrames — for example "port my Remotion project to HyperFrames", "convert this Remotion code to…
Skill Claude CodeCodex
Consume Infermesh / AI Media Studio generated image, video, audio, TTS, and STT assets in Remotion while preserving asset lineage.
Skill Claude CodeCodex
Manage Remotion caption workflows including transcription, SRT import, display timing, TikTok-style captions, and word highlighting.
Skill Claude CodeCodex
Plan and author Remotion React/TSX compositions with dimensions, fps, duration, props schemas, scene maps, and media ownership.
Skill Claude CodeCodex
Plan Remotion Lambda workflows, AWS requirements, deployment guardrails, and cloud render handoff without deploying by default.
Skill Claude CodeCodex
Embed Remotion Player in React, Vite, Next, or product surfaces with parameterized props, bundle boundaries, and preview controls.
Skill Claude CodeCodex
Bootstrap or normalize a Remotion project inside a ContextGo workspace, including package manager choice, scripts, folder layout, and workspace recording.