contextgo

Project architecture and file structure conventions for all process types. Use when: (1) Creating new files or modules, (2) Deciding where code should go, (3) Converting single-file components to directories, (4) Reviewing code for structure compliance, (5) Adding new bridges, services, agents, or workers.

Auto-fix high-frequency Sentry issues: fetch issues > N occurrences, analyze stack traces, fix code, create GitHub issues, and submit PRs. Use when: (1) User says "/fix-sentry", (2) User asks to fix Sentry issues.

Internationalization (i18n) workflow and standards for managing translations. Use when: (1) Adding new user-facing text, (2) Creating new components with user-facing text, (3) Reviewing code for i18n compliance, (4) Adding a new translation module.

PR Review Fix: automatically fix all issues identified in a pr-review report. Use when: (1) User says "fix all review issues", (2) User says "/pr-fix", (3) After pr-review skill has produced a report, (4) User wants to address PR review feedback.

PR Code Review (Local): perform a thorough local code review with full project context. Use when: (1) User asks to review a PR, (2) User says "/pr-review", (3) User wants to review code changes before merging.

Pull request workflow: ensure issue exists, push branch, open PR with issue link. Use when: (1) User asks to create a pull request, (2) User says "PR" or "open PR", (3) User invokes /oss-pr after committing, (4) After completing a commit workflow.

Compose AI Media Studio or Infermesh-generated images/videos into final HyperFrames videos with source manifest lineage, subtitles, title cards, transitions, brand wrappers, renders, and QC.

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.

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.

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.

Validate HyperFrames video outputs, render manifests, source files, dimensions, duration, frame readability, subtitle timing, asset references, audio presence, rights notes, and rerender readiness.

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.

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.

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.

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.

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.

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 CSS instead of using the browser runtime.

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.

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.

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 transparent overlay, choosing a TTS voice or whisper model, or chaining these (TTS → transcribe → captions). Each command downloads its own model on first run.

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 merging, and registry discovery.

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 (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For dev-loop CLI commands (init, lint, inspect, preview, render) see the hyperframes-cli skill; for asset preprocessing commands (tts, transcribe, remove-background) see the hyperframes-media skill.

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 link and asks for any kind of video content. Even if the user just pastes a URL — this is the skill to use.

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 HyperFrames", "migrate from Remotion", "translate this Remotion comp", or "rewrite this as HyperFrames HTML". Do NOT use when (a) the user is authoring a NEW HyperFrames composition, even if they have or are A/B-testing a similar Remotion video; (b) the user mentions Remotion in passing without asking for migration; (c) the user shares Remotion code as reference material rather than asking for a translation; (d) the user asks for "the same video as my Remotion one" without explicitly asking to migrate the source — treat that as a fresh HyperFrames build. When in doubt, default to authoring a native HyperFrames composition with the `hyperframes` skill instead. Skill detects unsupported patterns (useSta

Consume Infermesh / AI Media Studio generated image, video, audio, TTS, and STT assets in Remotion while preserving asset lineage.

Manage Remotion caption workflows including transcription, SRT import, display timing, TikTok-style captions, and word highlighting.

Plan and author Remotion React/TSX compositions with dimensions, fps, duration, props schemas, scene maps, and media ownership.

Plan Remotion Lambda workflows, AWS requirements, deployment guardrails, and cloud render handoff without deploying by default.

Embed Remotion Player in React, Vite, Next, or product surfaces with parameterized props, bundle boundaries, and preview controls.

Bootstrap or normalize a Remotion project inside a ContextGo workspace, including package manager choice, scripts, folder layout, and workspace recording.

Validate Remotion outputs for render integrity, dimensions, fps, duration, audio, captions, visible text, asset lineage, licensing, and rerender instructions.

Run Remotion Studio, still checks, local renders, SSR renders, output naming, logs, and render manifest handoff.

Best practices for Remotion - Video creation in React

Run quality checks on a produced visual artifact, generate the build note, asset inventory, and failure-page list, and surface any theme drift.

Turn a structured brief into a deck artifact with normalized inputs, a chosen layout recipe, an applied theme, and a build note plus QC results.

Distill a long-form report into a summary deck with section-aware extraction, a chosen layout recipe, an applied theme, and reproducible build outputs.

Apply or refresh a visual theme on an existing artifact spec without changing its layout recipe or content structure.

Convert a PDF input into a deck artifact, choosing between summary distillation and visual reconstruction with explicit traceability and QC.

Turn a report or structured data input into an infographic artifact, choosing the right infographic recipe and chart family per data shape.

Project DESIGN.md, token files, and theme variables into Figma design system rules with minimal-diff strategy and explicit conflict surfacing.