Collection of agent skills for Helios video engine. Use when working with programmatic video creation, browser-native animations, or Helios compositions. Install individual skills by path for specific capabilities.
The English summary is being prepared. Showing the original description.
Core API for Helios video engine. Use when creating compositions, managing timeline state, controlling playback, or subscribing to frame updates. Covers Helios class instantiation, signals, animation helpers, and DOM synchronization.
The English summary is being prepared. Showing the original description.
Installation and quick start guide for Helios video engine. Use when setting up a new Helios project, installing packages, or creating your first composition. Covers package installation, requirements, basic setup, and initial composition structure.
The English summary is being prepared. Showing the original description.
Player API for embedding Helios compositions in web pages. Use when you need to display a composition with playback controls, enable client-side exporting, or support Picture-in-Picture.
The English summary is being prepared. Showing the original description.
Renderer API for generating video/image output from Helios compositions. Use when you need to programmatically render a composition to a file using Node.js.
The English summary is being prepared. Showing the original description.
Studio tool for developing and previewing Helios compositions. Use when you want to launch the interactive development environment or manage assets.
The English summary is being prepared. Showing the original description.
Story-first motion design philosophy for animated video: motion must earn its place; arc (establish, complicate, resolve); show vs tell; shots as units of thought; quiet vs loud motion; Disney principles with restraint; timing heuristics; composition; grammar by medium (product demos, logos, data viz, explainers); technical commitments (deterministic time, scrubbability, refs); cutting discipline; explicit anti-patterns. Use when planning, storyboarding, critiquing, or implementing programmatic or motion-driven video (Helios, Remotion, explainers, loops, UI capture, logo reveals), or when the user asks for motion direction, pacing, or visual-story structure.
The English summary is being prepared. Showing the original description.
End-to-end production plan template for feeling-first cinematic product promos: brief interrogation, 45s beat structure (cold open through brand), hero-element metaphor, storyboard fidelity ladder, visual system (palette, type, camera, texture), motion mix and easing vocabulary, audio and captions, tooling (animatic through HTML or AE), deliverables matrix, accessibility, review milestones, and compromises to accept or refuse. Use when planning, pitching, storyboarding, or producing polished brand films for any SaaS or consumer product—not category-specific; pair with skills/design/animated-video-philosophy for broader motion principles.
The English summary is being prepared. Showing the original description.
Opt-in library of established visual styles for code-drawn Helios videos: style cards (colour rules, type, motion grammar, a checkable signature list, the core rendering trick) with tested renderAt(t) demo pages, plus finishing passes and time tricks. Load it only when the user names a specific established style or medium they want reproduced (a print process, a retro screen look, a design movement), or asks to see Helios's style options. Do not load it to choose a look for a video request that names no style: design an original look instead, and at most offer this library.
The English summary is being prepared. Showing the original description.
Patterns for using Helios with Vanilla Canvas API. Use when building high-performance 2D/3D animations without frameworks.
The English summary is being prepared. Showing the original description.
Chart.js integration patterns for Helios. Use when creating animated data visualizations with Chart.js.
The English summary is being prepared. Showing the original description.
Learn how to use D3.js with Helios for data visualization. Use when creating charts, graphs, or data-driven animations.
The English summary is being prepared. Showing the original description.
Patterns for using Helios with Framer Motion. Use when you want to use Framer Motion's physics and transitions but need frame-perfect synchronization with Helios.
The English summary is being prepared. Showing the original description.
Patterns for using Helios with GSAP (GreenSock). Use when integrating GSAP timelines with the Helios timeline for precise scrubbing and rendering.
The English summary is being prepared. Showing the original description.
Lottie integration patterns for Helios. Use when rendering Lottie (Bodymovin) JSON animations synchronously with Helios.
The English summary is being prepared. Showing the original description.
Learn how to use P5.js with Helios. Use when creating creative coding sketches or generative art.
The English summary is being prepared. Showing the original description.
PixiJS integration patterns for Helios. Use when creating high-performance WebGL 2D animations with PixiJS.
The English summary is being prepared. Showing the original description.
Workflow for creating a podcast visualizer with multi-track audio mixing and DOM-based synchronization. Use when building audio-reactive compositions.
The English summary is being prepared. Showing the original description.
Patterns for using Helios with React. Use when building compositions in a React environment.
The English summary is being prepared. Showing the original description.
Learn how to use Helios Signals for high-performance, fine-grained reactivity. Use for complex dependency graphs or when optimizing performance.
The English summary is being prepared. Showing the original description.
Patterns for using Helios with SolidJS. Use when building compositions in a SolidJS environment, utilizing signals for fine-grained reactivity.
The English summary is being prepared. Showing the original description.
Patterns for using Helios with Svelte. Use when building compositions in a Svelte environment, utilizing Svelte stores for reactive frame updates.
The English summary is being prepared. Showing the original description.
Learn how to use Tailwind CSS with Helios. Use for styling compositions and animating with utility classes.
The English summary is being prepared. Showing the original description.
Patterns for using Helios with Three.js and React Three Fiber. Use when creating 3D animations or integrating WebGL scenes.
The English summary is being prepared. Showing the original description.
Is this your account? Link GitHub to bring it onto your creator page (Japanese)