본문으로 건너뛰기
cccskills
무료GitHub에 공개

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

BintzGavin/helios스타 123(GitHub 123 + cccskills 0)

실행 점수 미검증

설치 방법 보기

포함된 파일(122)

  • SKILL.md7.5 KB
  • core/SKILL.md11.9 KB
  • design/animated-video-philosophy/philosophy.md14.4 KB
  • design/animated-video-philosophy/SKILL.md1.3 KB
  • design/cinematic-product-promo-plan/production-plan.md15.3 KB
  • design/cinematic-product-promo-plan/SKILL.md1.2 KB
  • design/motion-styles/references/catalog.md4.2 KB
  • design/motion-styles/references/finishing.md25.5 KB
  • design/motion-styles/references/styles/art-deco.html13.2 KB
  • design/motion-styles/references/styles/art-deco.md8.3 KB
  • design/motion-styles/references/styles/ascii-crt.html14.2 KB
  • design/motion-styles/references/styles/ascii-crt.md7.9 KB
  • design/motion-styles/references/styles/aurora-glass.html9.1 KB
  • design/motion-styles/references/styles/aurora-glass.md7.5 KB
  • design/motion-styles/references/styles/bauhaus-poster.html10.8 KB
  • design/motion-styles/references/styles/bauhaus-poster.md8.1 KB
  • design/motion-styles/references/styles/blueprint.html16.4 KB
  • design/motion-styles/references/styles/blueprint.md8.9 KB
  • design/motion-styles/references/styles/cel-boil.html14.5 KB
  • design/motion-styles/references/styles/cel-boil.md7.7 KB
  • design/motion-styles/references/styles/dark-keynote.html12.4 KB
  • design/motion-styles/references/styles/dark-keynote.md8.4 KB
  • design/motion-styles/references/styles/flat-vector.html13.0 KB
  • design/motion-styles/references/styles/flat-vector.md7.9 KB
  • design/motion-styles/references/styles/halftone-dossier.html15.6 KB
  • design/motion-styles/references/styles/halftone-dossier.md7.6 KB
  • design/motion-styles/references/styles/hud-fui.html14.5 KB
  • design/motion-styles/references/styles/hud-fui.md7.7 KB
  • design/motion-styles/references/styles/isometric.html13.8 KB
  • design/motion-styles/references/styles/isometric.md9.7 KB
  • design/motion-styles/references/styles/one-line.html11.0 KB
  • design/motion-styles/references/styles/one-line.md7.4 KB
  • design/motion-styles/references/styles/pixel-art.html13.4 KB
  • design/motion-styles/references/styles/pixel-art.md8.4 KB
  • design/motion-styles/references/styles/risograph.html12.4 KB
  • design/motion-styles/references/styles/risograph.md8.0 KB
  • design/motion-styles/references/styles/shape-morph.html12.3 KB
  • design/motion-styles/references/styles/shape-morph.md7.1 KB
  • design/motion-styles/references/styles/silkscreen.html13.6 KB
  • design/motion-styles/references/styles/silkscreen.md7.2 KB
  • design/motion-styles/references/styles/spy-titles.html16.8 KB
  • design/motion-styles/references/styles/spy-titles.md8.3 KB
  • design/motion-styles/references/styles/sticker-explainer.html14.7 KB
  • design/motion-styles/references/styles/sticker-explainer.md9.6 KB
  • design/motion-styles/references/styles/swiss-grid.html9.8 KB
  • design/motion-styles/references/styles/swiss-grid.md9.2 KB
  • design/motion-styles/references/styles/synthwave-vhs.html17.7 KB
  • design/motion-styles/references/styles/synthwave-vhs.md10.7 KB
  • design/motion-styles/references/styles/ukiyo-e.html18.9 KB
  • design/motion-styles/references/styles/ukiyo-e.md7.5 KB
  • design/motion-styles/references/styles/variety-captions.html13.3 KB
  • design/motion-styles/references/styles/variety-captions.md9.7 KB
  • design/motion-styles/references/styles/watercolor-ink.html20.0 KB
  • design/motion-styles/references/styles/watercolor-ink.md10.2 KB
  • design/motion-styles/references/styles/woodcut.html14.9 KB
  • design/motion-styles/references/styles/woodcut.md7.2 KB
  • design/motion-styles/references/time-tricks.md17.7 KB
  • design/motion-styles/SKILL.md8.7 KB
  • examples/canvas/SKILL.md1.7 KB
  • examples/chartjs/SKILL.md1.5 KB
  • examples/d3/SKILL.md1.7 KB
  • examples/framer-motion/SKILL.md2.1 KB
  • examples/gsap/SKILL.md1.9 KB
  • examples/lottie/SKILL.md1.5 KB
  • examples/p5/SKILL.md1.7 KB
  • examples/pixi/SKILL.md1.8 KB
  • examples/podcast-visualizer/SKILL.md3.0 KB
  • examples/react/SKILL.md2.4 KB
  • examples/signals/SKILL.md1.6 KB
  • examples/solid/SKILL.md4.0 KB
  • examples/svelte/SKILL.md5.0 KB
  • examples/tailwind/SKILL.md1.5 KB
  • examples/threejs/SKILL.md3.7 KB
  • examples/vanilla/SKILL.md2.1 KB
  • examples/vue/SKILL.md2.8 KB
  • getting-started/SKILL.md7.2 KB
  • guided/brand-video/references/direction-deck.json16.7 KB
  • guided/brand-video/references/formats.md3.8 KB
  • guided/brand-video/references/look-ideation.md4.2 KB
  • guided/brand-video/scripts/roll-direction.mjs7.8 KB
  • guided/brand-video/SKILL.md7.4 KB
  • guided/cartoon-short/references/acting.md5.9 KB
  • guided/cartoon-short/references/look.md6.6 KB
  • guided/cartoon-short/references/rig.md7.2 KB
  • guided/cartoon-short/SKILL.md11.5 KB
  • guided/cartoon-short/starter.html15.5 KB
  • guided/motion-design-rules/SKILL.md8.2 KB
  • guided/music-video/karaoke.html7.3 KB
  • guided/music-video/lyrics.example.json1.6 KB
  • guided/music-video/references/lyrics.md10.2 KB
  • guided/music-video/references/treatment.md5.4 KB
  • guided/music-video/SKILL.md9.6 KB
  • guided/video-recipes/references/brief.md6.3 KB
  • guided/video-recipes/references/genres/era-timeline.html13.7 KB
  • guided/video-recipes/references/genres/era-timeline.md7.7 KB
  • guided/video-recipes/references/genres/kinetic-type.cues.json285 B
  • guided/video-recipes/references/genres/kinetic-type.html12.3 KB
  • guided/video-recipes/references/genres/kinetic-type.md11.0 KB
  • guided/video-recipes/references/genres/mechanism-proof.html11.9 KB
  • guided/video-recipes/references/genres/mechanism-proof.md8.2 KB
  • guided/video-recipes/references/genres/pixel-sprite.html13.3 KB
  • guided/video-recipes/references/genres/pixel-sprite.md9.3 KB
  • guided/video-recipes/references/genres/process-recipe.html15.4 KB
  • guided/video-recipes/references/genres/process-recipe.md7.7 KB
  • guided/video-recipes/references/genres/scale-dive.html19.9 KB
  • guided/video-recipes/references/genres/scale-dive.md9.5 KB
  • guided/video-recipes/references/genres/ui-morph-loop.html16.1 KB
  • guided/video-recipes/references/genres/ui-morph-loop.md10.1 KB
  • guided/video-recipes/references/techniques.md9.9 KB
  • guided/video-recipes/SKILL.md6.9 KB
  • LICENSE11.1 KB
  • package.json829 B
  • player/SKILL.md7.1 KB
  • README.md8.4 KB
  • renderer/SKILL.md7.0 KB
  • studio/SKILL.md3.4 KB
  • THIRD_PARTY.md3.2 KB
  • workflows/archive-broll/scripts/archive-broll.mjs12.0 KB
  • workflows/archive-broll/SKILL.md4.4 KB
  • workflows/create-composition/SKILL.md3.4 KB
  • workflows/render-video/SKILL.md3.7 KB
  • workflows/visualize-data/SKILL.md1.8 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Helios Skills Collection

This catalog contains agent skills for Helios, a browser-native video engine for programmatic animation and rendering. It lives in skills/ of the Helios repository.

Installation

This is a collection of skills. To use them, install individual skills by their path:

# Make a video (the entry skill, also shipped in the Helios agent plugin)
npx skills add BintzGavin/helios/plugins/helios/skills/make-video

# Getting started
npx skills add BintzGavin/helios/skills/getting-started

# Core skills
npx skills add BintzGavin/helios/skills/core
npx skills add BintzGavin/helios/skills/renderer
npx skills add BintzGavin/helios/skills/player
npx skills add BintzGavin/helios/skills/studio

# Workflows
npx skills add BintzGavin/helios/skills/workflows/create-composition
npx skills add BintzGavin/helios/skills/workflows/render-video
npx skills add BintzGavin/helios/skills/workflows/visualize-data
npx skills add BintzGavin/helios/skills/workflows/archive-broll

# Design / motion
npx skills add BintzGavin/helios/skills/design/animated-video-philosophy
npx skills add BintzGavin/helios/skills/design/cinematic-product-promo-plan
npx skills add BintzGavin/helios/skills/design/motion-styles

# Guided video creation
npx skills add BintzGavin/helios/skills/guided/motion-design-rules
npx skills add BintzGavin/helios/skills/guided/brand-video
npx skills add BintzGavin/helios/skills/guided/cartoon-short
npx skills add BintzGavin/helios/skills/guided/music-video
npx skills add BintzGavin/helios/skills/guided/video-recipes

# Framework examples
npx skills add BintzGavin/helios/skills/examples/react
npx skills add BintzGavin/helios/skills/examples/vue
npx skills add BintzGavin/helios/skills/examples/svelte

# Animation libraries
npx skills add BintzGavin/helios/skills/examples/gsap
npx skills add BintzGavin/helios/skills/examples/framer-motion
npx skills add BintzGavin/helios/skills/examples/threejs

Available Skills

Make a Video

  • plugins/helios/skills/make-video - The entry point, kept with the Helios agent plugin in plugins/helios/ (one level up from this catalog). One HTML page with window.renderAt(t), rendered to MP4 with npx @helios-project/cli render, checked with stills and contact sheets, with a soundtrack. Start here when asked for a video drawn with code.

Getting Started

  • skills/getting-started - Installation and quick start guide. Covers package installation, requirements (Node.js, FFmpeg), basic setup, and initial composition structure. Use when setting up a new Helios project.

Core Package Skills

  • skills/core - Core API for Helios video engine. Covers Helios class instantiation, signals, animation helpers, and DOM synchronization.
  • skills/renderer - Server-side rendering of Helios compositions to video files.
  • skills/player - Embeddable video player with composition playback and controls.
  • skills/studio - Visual editor for Helios compositions.

Workflow Skills

  • skills/workflows/create-composition - Workflow for creating a new Helios composition.
  • skills/workflows/render-video - Workflow for rendering compositions to video.
  • skills/workflows/visualize-data - Workflow for data visualization animations.
  • skills/workflows/archive-broll - Find, preview, cut and credit public-domain and Creative Commons B-roll from the Internet Archive.

Design Skills

  • skills/design/animated-video-philosophy - Working philosophy for animated video: story-first motion, pacing, shots, timing, composition, medium-specific grammar, technical commitments, and anti-patterns. Use when directing or critiquing motion and programmatic video.
  • skills/design/cinematic-product-promo-plan - Template plan for a ~45s feeling-first cinematic product promo: brief through ship, hero-element journey, look/motion/audio, deliverables matrix, accessibility. Adapt to any product category.
  • skills/design/motion-styles - Opt-in library of established visual styles, each a style card with colour rules, motion grammar and a checkable signature list, plus a tested renderAt(t) demo. Load only when the user names a specific style or asks for style options; otherwise design an original look.

Guided Video Creation Skills

  • skills/guided/motion-design-rules - Motion design framework that holds in any style: anti-slideshow architecture, depth, one easing personality, choreography, transitions, timing to sound, and scripted checks. Style cards override it. Referenced by all guided video skills.
  • skills/guided/brand-video - Promo, explainer, product demo, testimonial, launch and vertical social videos in one guided pipeline. Locks the format, randomizes the staging and designs an original look from a seed so videos don't repeat; known styles only on request. Optional beat-synced music and Internet Archive B-roll.
  • skills/guided/cartoon-short - Hand-drawn cartoon short: a character rig you design, acted emotion changes, boiling ink-and-paint linework, storyboarding by reads. Includes a tested starter page.
  • skills/guided/music-video - Lyric and karaoke music video: word timings by forced alignment, treatment and section storyboard, a timeline derived from lyrics and beats, karaoke recipes. Includes a tested karaoke page.
  • skills/guided/video-recipes - Opt-in genre recipes with tested demos (scale dive, process explainer, era timeline, mechanism/proof, kinetic type, UI morph loop, pixel sprite), plus the video brief template and a gotcha list. Load only when the request is one of these genres.

Framework Integration Skills

  • skills/examples/react - React integration patterns
  • skills/examples/vue - Vue integration patterns
  • skills/examples/svelte - Svelte integration patterns
  • skills/examples/solid - Solid.js integration patterns
  • skills/examples/vanilla - Vanilla JavaScript patterns

Animation Library Skills

  • skills/examples/gsap - GSAP animation integration
  • skills/examples/framer-motion - Framer Motion integration
  • skills/examples/lottie - Lottie animation playback
  • skills/examples/threejs - Three.js 3D scenes
  • skills/examples/pixi - PixiJS 2D graphics
  • skills/examples/p5 - p5.js creative coding

Data Visualization Skills

  • skills/examples/d3 - D3.js visualizations
  • skills/examples/chartjs - Chart.js animated charts

Rendering Technique Skills

  • skills/examples/canvas - Canvas 2D rendering
  • skills/examples/signals - Reactive signals patterns
  • skills/examples/tailwind - Tailwind CSS styling
  • skills/examples/podcast-visualizer - Audio visualization

When to Use

Use these skills when:

  • Creating programmatic video compositions
  • Working with browser-native animations (CSS, WAAPI)
  • Building video rendering pipelines
  • Integrating Helios with React, Vue, Svelte, or other frameworks
  • Using animation libraries like GSAP, Framer Motion, or Three.js
  • Creating data visualizations as video
  • Setting up Helios development workflows
  • Applying a consistent philosophy to motion, pacing, and visual storytelling in video
  • Planning or producing feeling-first cinematic product promos (see design/cinematic-product-promo-plan)

Repository

View all skills at https://github.com/BintzGavin/helios/tree/main/skills and the plugin at https://github.com/BintzGavin/helios/tree/main/plugins/helios

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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; 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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

BintzGavin/helios1232026년 10월 26일 업데이트

archive-broll

무료

Find, 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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

BintzGavin/helios1232026년 10월 26일 업데이트

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 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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

BintzGavin/helios1232026년 10월 26일 업데이트

create-composition

무료

Workflow for creating a new Helios composition. Use when building a new animation project or converting an existing animation to run in Helios.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

BintzGavin/helios1232026년 10월 26일 업데이트

example-canvas

무료

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

BintzGavin/helios1232026년 10월 26일 업데이트

example-chartjs

무료

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

BintzGavin/helios1232026년 10월 26일 업데이트

BintzGavin의 스킬 모두 보기

이 스킬의 문제 신고