helios

In the author's own words, from each skill's SKILL.md — showing the first 30 of 41 files.

• helios-skills

  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.

  skills/SKILL.md on GitHub (opens in a new tab)

• helios-core

  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.

  skills/core/SKILL.md on GitHub (opens in a new tab)

• helios-getting-started

  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.

  skills/getting-started/SKILL.md on GitHub (opens in a new tab)

• helios-player

  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.

  skills/player/SKILL.md on GitHub (opens in a new tab)

• helios-renderer

  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.

  skills/renderer/SKILL.md on GitHub (opens in a new tab)

• helios-studio

  Studio tool for developing and previewing Helios compositions. Use when you want to launch the interactive development environment or manage assets.

  skills/studio/SKILL.md on GitHub (opens in a new tab)

• skill-creator

  Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.

  .agents/skills/skill-creator/SKILL.md on GitHub (opens in a new tab)

• animated-video-philosophy

  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…

  skills/design/animated-video-philosophy/SKILL.md on GitHub (opens in a new tab)

• cinematic-product-promo-plan

  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 c…

  skills/design/cinematic-product-promo-plan/SKILL.md on GitHub (opens in a new tab)

• motion-styles

  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 moveme…

  skills/design/motion-styles/SKILL.md on GitHub (opens in a new tab)

• example-canvas

  Patterns for using Helios with Vanilla Canvas API. Use when building high-performance 2D/3D animations without frameworks.

  skills/examples/canvas/SKILL.md on GitHub (opens in a new tab)

• example-chartjs

  Chart.js integration patterns for Helios. Use when creating animated data visualizations with Chart.js.

  skills/examples/chartjs/SKILL.md on GitHub (opens in a new tab)

• example-d3-animation

  Learn how to use D3.js with Helios for data visualization. Use when creating charts, graphs, or data-driven animations.

  skills/examples/d3/SKILL.md on GitHub (opens in a new tab)

• example-framer-motion

  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.

  skills/examples/framer-motion/SKILL.md on GitHub (opens in a new tab)

• example-gsap

  Patterns for using Helios with GSAP (GreenSock). Use when integrating GSAP timelines with the Helios timeline for precise scrubbing and rendering.

  skills/examples/gsap/SKILL.md on GitHub (opens in a new tab)

• example-lottie

  Lottie integration patterns for Helios. Use when rendering Lottie (Bodymovin) JSON animations synchronously with Helios.

  skills/examples/lottie/SKILL.md on GitHub (opens in a new tab)

• example-p5-animation

  Learn how to use P5.js with Helios. Use when creating creative coding sketches or generative art.

  skills/examples/p5/SKILL.md on GitHub (opens in a new tab)

• example-pixi

  PixiJS integration patterns for Helios. Use when creating high-performance WebGL 2D animations with PixiJS.

  skills/examples/pixi/SKILL.md on GitHub (opens in a new tab)

• example-podcast-visualizer

  Workflow for creating a podcast visualizer with multi-track audio mixing and DOM-based synchronization. Use when building audio-reactive compositions.

  skills/examples/podcast-visualizer/SKILL.md on GitHub (opens in a new tab)

• example-react

  Patterns for using Helios with React. Use when building compositions in a React environment.

  skills/examples/react/SKILL.md on GitHub (opens in a new tab)

• example-signals-animation

  Learn how to use Helios Signals for high-performance, fine-grained reactivity. Use for complex dependency graphs or when optimizing performance.

  skills/examples/signals/SKILL.md on GitHub (opens in a new tab)

• example-solid

  Patterns for using Helios with SolidJS. Use when building compositions in a SolidJS environment, utilizing signals for fine-grained reactivity.

  skills/examples/solid/SKILL.md on GitHub (opens in a new tab)

• example-svelte

  Patterns for using Helios with Svelte. Use when building compositions in a Svelte environment, utilizing Svelte stores for reactive frame updates.

  skills/examples/svelte/SKILL.md on GitHub (opens in a new tab)

• example-tailwind-animation

  Learn how to use Tailwind CSS with Helios. Use for styling compositions and animating with utility classes.

  skills/examples/tailwind/SKILL.md on GitHub (opens in a new tab)

• example-threejs

  Patterns for using Helios with Three.js and React Three Fiber. Use when creating 3D animations or integrating WebGL scenes.

  skills/examples/threejs/SKILL.md on GitHub (opens in a new tab)

• example-vanilla

  Patterns for using Helios with Vanilla JavaScript/TypeScript. Use when building compositions without a framework, or for simple DOM/Canvas manipulations.

  skills/examples/vanilla/SKILL.md on GitHub (opens in a new tab)

• example-vue

  Patterns for using Helios with Vue. Use when building compositions in a Vue environment.

  skills/examples/vue/SKILL.md on GitHub (opens in a new tab)

• guided-cartoon-short

  Cartoon shorts drawn in code: a character you design, acted emotions, drawn turnarounds and boiling linework, as one Helios renderAt(t) page. Covers storyboarding by reads, the character rig, the emotion timeline, closed-form acting helpers (jump, take, spring), transitions and the review loop. Use for animated shorts, mascot-style explainers, story-driven cartoons and character loops.

  skills/guided/cartoon-short/SKILL.md on GitHub (opens in a new tab)

• guided-explainer-video

  End-to-end guided workflow for creating an explainer or walkthrough video. Extracts brand identity from the repo, generates a measured soundtrack, and produces a narrative-driven motion.dev composition rendered via Helios CLI. Use when making how-it-works, feature walkthrough, or educational videos.

  skills/guided/explainer-video/SKILL.md on GitHub (opens in a new tab)

• guided-launch-announcement

  End-to-end guided workflow for creating a product launch or release announcement video. Extracts brand identity from the repo, generates a cinematic soundtrack, and produces a reveal-driven motion.dev composition rendered via Helios CLI. Use when making launch announcements, release videos, or product reveals.

  skills/guided/launch-announcement/SKILL.md on GitHub (opens in a new tab)

No skill matches that filter.

Similar skills

• SkillSpectorby NVIDIA Security scanner for AI agent skills. Detect vulnerabilities, malicious patterns, security risks, prompt injection, data exfiltration, and… 21k stars · 27 skills
• reaby morluto Reverse engineer anything with agents, from app behavior down to native binaries. 366k stars · 1 skill
• ponytailby DietrichGebert Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote. 173k stars · 6 skills
• agent-skillsby addyosmani Production-grade engineering skills for AI coding agents. 110k stars · 25 skills
• taste-skillby Leonxlnx Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages 101k stars · 13 skills
• archifyby tt-a1i Turn any idea, plan, or codebase into a beautiful interactive diagram. An agent skill for Claude Code, Codex, and more. 87.6k stars · 2 skills