All authors
Claude Skills by BintzGavin
github.com/BintzGavin37 skills0 installs1 views
- Skill CreatorGuide 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.Votes: 0GitHub stars: 124
- Make VideoMake videos drawn with code: motion graphics, launch and explainer videos, animated shorts, animated charts and data, logo reveals, social clips, music visualizers, UI demos and GIF loops. Write one HTML page that draws any frame from its time t, render it frame-exact to MP4 with Helios, check stills and contact sheets, and add a soundtrack. Use when the user asks for one of these as an MP4, GIF or animation file. Not for live-action or AI-generated realistic footage or editing camera video.Votes: 0GitHub stars: 124
- helios-skillsCollection 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.Votes: 0GitHub stars: 124
- CoreCore 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.Votes: 0GitHub stars: 124
- Animated Video PhilosophyStory-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 programmat...Votes: 0GitHub stars: 124
- Cinematic Product Promo PlanEnd-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 ...Votes: 0GitHub stars: 124
- Motion StylesOpt-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 th...Votes: 0GitHub stars: 124
- CanvasPatterns for using Helios with Vanilla Canvas API. Use when building high-performance 2D/3D animations without frameworks.Votes: 0GitHub stars: 124
- ChartjsChart.js integration patterns for Helios. Use when creating animated data visualizations with Chart.js.Votes: 0GitHub stars: 124
- D3Learn how to use D3.js with Helios for data visualization. Use when creating charts, graphs, or data-driven animations.Votes: 0GitHub stars: 124
- Framer MotionPatterns 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.Votes: 0GitHub stars: 124
- GsapPatterns for using Helios with GSAP (GreenSock). Use when integrating GSAP timelines with the Helios timeline for precise scrubbing and rendering.Votes: 0GitHub stars: 124
- LottieLottie integration patterns for Helios. Use when rendering Lottie (Bodymovin) JSON animations synchronously with Helios.Votes: 0GitHub stars: 124
- P5Learn how to use P5.js with Helios. Use when creating creative coding sketches or generative art.Votes: 0GitHub stars: 124
- PixiPixiJS integration patterns for Helios. Use when creating high-performance WebGL 2D animations with PixiJS.Votes: 0GitHub stars: 124
- Podcast VisualizerWorkflow for creating a podcast visualizer with multi-track audio mixing and DOM-based synchronization. Use when building audio-reactive compositions.Votes: 0GitHub stars: 124
- ReactPatterns for using Helios with React. Use when building compositions in a React environment.Votes: 0GitHub stars: 124
- SignalsLearn how to use Helios Signals for high-performance, fine-grained reactivity. Use for complex dependency graphs or when optimizing performance.Votes: 0GitHub stars: 124
- SolidPatterns for using Helios with SolidJS. Use when building compositions in a SolidJS environment, utilizing signals for fine-grained reactivity.Votes: 0GitHub stars: 124
- SveltePatterns for using Helios with Svelte. Use when building compositions in a Svelte environment, utilizing Svelte stores for reactive frame updates.Votes: 0GitHub stars: 124
- TailwindLearn how to use Tailwind CSS with Helios. Use for styling compositions and animating with utility classes.Votes: 0GitHub stars: 124
- ThreejsPatterns for using Helios with Three.js and React Three Fiber. Use when creating 3D animations or integrating WebGL scenes.Votes: 0GitHub stars: 124
- VanillaPatterns for using Helios with Vanilla JavaScript/TypeScript. Use when building compositions without a framework, or for simple DOM/Canvas manipulations.Votes: 0GitHub stars: 124
- VuePatterns for using Helios with Vue. Use when building compositions in a Vue environment.Votes: 0GitHub stars: 124
- Getting StartedInstallation 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.Votes: 0GitHub stars: 124
- Brand VideoGuided, brand-aligned marketing videos rendered with Helios — promo or hype, explainer or walkthrough, product demo or feature showcase, testimonial or social proof, launch or release announcement, and vertical social clips (Reels, TikTok, Shorts). Extracts the brand from a repo or URL, locks the format, randomizes structure and staging, and designs an original look from a seed so videos don't look alike. Optional beat-synced music and Internet Archive B-roll.Votes: 0GitHub stars: 124
- Cartoon ShortCartoon 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.Votes: 0GitHub stars: 124
- Motion Design RulesMotion design framework for programmatic video. Defines anti-slideshow architecture, depth, one easing personality, choreography, the squint test, transitions, timing to music and voice, and checks a script can run. Stated so it holds in any look; a motion-styles card overrides it where they conflict. Reference this skill from any guided video skill.Votes: 0GitHub stars: 124
- Music VideoLyric and karaoke music videos drawn in code: get word- and syllable-level lyric timings (from a cue file, or by forced alignment on a vocal stem), write a treatment and a storyboard by song section, derive the edit from the lyrics and the beat map, and integrate the words into every scene instead of subtitling them. Renders one Helios renderAt(t) page with the song attached. Use for lyric videos, karaoke videos, visualizers with lyrics, and story-driven music videos.Votes: 0GitHub stars: 124
- Video RecipesOpt-in recipes for specific code-video genres, each with structure, technique, gotchas and a tested Helios renderAt(t) demo: scale dives (powers of ten), step-by-step process explainers, era timelines, mechanism and proof explainers, kinetic typography, one-shape UI morph loops and pixel-art sprite scenes, plus a video brief template and a gotcha list. Load it only when the user asks for one of these genres by description or name, or asks for genre options or a brief template. Don't load it f...Votes: 0GitHub stars: 124
- PlayerPlayer 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.Votes: 0GitHub stars: 124
- RendererRenderer API for generating video/image output from Helios compositions. Use when you need to programmatically render a composition to a file using Node.js.Votes: 0GitHub stars: 124
- StudioStudio tool for developing and previewing Helios compositions. Use when you want to launch the interactive development environment or manage assets.Votes: 0GitHub stars: 124
- Archive BrollFind, preview, cut and credit archival B-roll from the Internet Archive (archive.org) for a Helios video — public-domain, CC BY and CC BY-SA film plus Prelinger Archives. Use when a Helios composition needs real footage as a plate, cutaway, masked fill or texture. Not for generating footage or editing the user's own camera video.Votes: 0GitHub stars: 124
- Create CompositionWorkflow for creating a new Helios composition. Use when building a new animation project or converting an existing animation to run in Helios.Votes: 0GitHub stars: 124
- Render VideoWorkflow for rendering a Helios composition to a video file. Use when you need to automate video production or export a high-quality animation.Votes: 0GitHub stars: 124
- Visualize DataWorkflow for creating data-driven animations. Use when you need to visualize datasets using D3, P5, or other libraries.Votes: 0GitHub stars: 124