mcpField
H
helios-skills

helios-skills

github.com/bintzgavinクリエイティブ・メディア0101 回インストール3 週間前に更新
リポジトリ

helios-skills について

helios-skillsは、プログラムによるアニメーションとレンダリングを行うブラウザネイティブな動画エンジン、Helios向けのエージェントスキル集です。セットアップ、制作ワークフロー、デザイン指針、各種連携を扱います。

主な機能

  1. 01HeliosのセットアップとコアAPIの案内
  2. 02コンポジション作成とレンダリングの手順
  3. 03プレーヤーとStudioの利用案内
  4. 04形式別の動画制作ガイド
  5. 05フレームワークとアニメーションライブラリ連携
  6. 06データ可視化とレンダリング技法

活用シーン

  1. 01Heliosプロジェクトのセットアップ
  2. 02動画コンポジションの作成とレンダリング
  3. 03フレームワークを使ったHelios連携の構築
  4. 04プロモーション動画や解説動画の企画

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/bintzgavin/helios-skills --skill helios-skills

インストール後、Claude Code で/helios-skillsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LICENSE
README.md
package.json
.gitignore
.agents/plugins/
marketplace.json
.claude-plugin/
marketplace.json
plugins/helios/
.mcp.json
mcp.json
plugin.json
plugins/helios/.claude-plugin/
plugin.json
plugins/helios/.codex-plugin/
plugin.json
plugins/helios/skills/make-video/references/
music.md
pages.md
skills/design/animated-video-philosophy/
philosophy.md
skills/design/cinematic-product-promo-plan/
production-plan.md

詳細

Helios スキルコレクション

このリポジトリには、プログラムによるアニメーションとレンダリングのためのブラウザーネイティブな動画エンジンである Helios 用のエージェントスキルが含まれています。

インストール

これは複数のスキルを含むコレクションリポジトリです。これらのスキルを使用するには、パスを指定して個別にインストールしてください。

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

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

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

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

# Guided video creation
npx skills add BintzGavin/helios-skills/skills/guided/motion-design-rules
npx skills add BintzGavin/helios-skills/skills/guided/promo-video
npx skills add BintzGavin/helios-skills/skills/guided/explainer-video
npx skills add BintzGavin/helios-skills/skills/guided/product-demo
npx skills add BintzGavin/helios-skills/skills/guided/testimonial-video
npx skills add BintzGavin/helios-skills/skills/guided/launch-announcement
npx skills add BintzGavin/helios-skills/skills/guided/social-clip

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

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

利用可能なスキル

はじめに
  • skills/getting-started - インストールとクイックスタートガイドです。パッケージのインストール、要件（Node.js、FFmpeg）、基本設定、初期コンポジションの構成について説明します。新しい Helios プロジェクトをセットアップするときに使用します。
コアパッケージのスキル
  • skills/core - Helios 動画エンジンのコア API です。Helios クラスのインスタンス化、シグナル、アニメーションヘルパー、DOM の同期について説明します。
  • skills/renderer - Helios コンポジションを動画ファイルにサーバーサイドレンダリングします。
  • skills/player - コンポジションの再生と操作機能を備えた埋め込み可能な動画プレーヤーです。
  • skills/studio - Helios コンポジション用のビジュアルエディターです。
ワークフローのスキル
  • skills/workflows/create-composition - 新しい Helios コンポジションを作成するワークフローです。
  • skills/workflows/render-video - コンポジションを動画にレンダリングするワークフローです。
  • skills/workflows/visualize-data - データビジュアライゼーションのアニメーションを作成するワークフローです。
デザインのスキル
  • skills/design/animated-video-philosophy - アニメーション動画制作の基本理念です。ストーリーを軸にした動き、ペース配分、ショット、タイミング、構図、メディア固有の文法、技術面での取り組み、アンチパターンを扱います。動きやプログラムによる動画の演出・批評に使用します。
  • skills/design/cinematic-product-promo-plan - 約45秒の、感情を重視したシネマティックな製品プロモーション向けの計画テンプレートです。企画概要から公開までの流れ、主役となる要素の展開、ルック・動き・音声、成果物マトリックス、アクセシビリティを扱います。あらゆる製品カテゴリに合わせて調整できます。
ガイド付き動画制作のスキル
  • skills/guided/motion-design-rules - モーションデザインのフレームワークです。スライドショーに頼らない構成、視覚的なレイヤリング、物理ベースのイージング、振り付け、品質検証を扱います。すべてのガイド付き動画スキルから参照されます。
  • skills/guided/promo-video - エンドツーエンドのプロモーション／ハイプ動画です。高エネルギーで、ビートに同期し、CTA を重視します。
  • skills/guided/explainer-video - 解説／ウォークスルー動画です。物語の展開、セクション見出し、落ち着いたペース配分を扱います。
  • skills/guided/product-demo - 製品のデモ／紹介動画です。機能の説明、UI のズームイン、段階的な表示を扱います。
  • skills/guided/testimonial-video - ソーシャルプルーフ／お客様の声を紹介する動画です。引用文のタイポグラフィ、顧客のブランディング、信頼のシグナルを扱います。
  • skills/guided/launch-announcement - 製品の発売／リリース告知です。カウントダウンのモチーフとドラマチックな発表を扱います。
  • skills/guided/social-clip - 短尺のソーシャル動画（Reels/TikTok/Shorts）です。縦型9:16で、テンポがよく、ループ再生に適しています。
フレームワーク連携のスキル
  • skills/examples/react - React の連携パターン
  • skills/examples/vue - Vue の連携パターン
  • skills/examples/svelte - Svelte の連携パターン
  • skills/examples/solid - Solid.js の連携パターン
  • skills/examples/vanilla - Vanilla JavaScript のパターン
アニメーションライブラリのスキル
  • skills/examples/gsap - GSAP のアニメーション連携
  • skills/examples/framer-motion - Framer Motion の連携
  • skills/examples/lottie - Lottie アニメーションの再生
  • skills/examples/threejs - Three.js の3Dシーン
  • skills/examples/pixi - PixiJS の2Dグラフィックス
  • skills/examples/p5 - p5.js によるクリエイティブコーディング
データビジュアライゼーションのスキル
  • skills/examples/d3 - D3.js によるビジュアライゼーション
  • skills/examples/chartjs - Chart.js によるアニメーション付きグラフ
レンダリング技法のスキル
  • skills/examples/canvas - Canvas 2D レンダリング
  • skills/examples/signals - リアクティブシグナルのパターン
  • skills/examples/tailwind - Tailwind CSS のスタイリング
  • skills/examples/podcast-visualizer - 音声のビジュアライゼーション

使用する場面

次のような場合に、これらのスキルを使用してください。

  • プログラムによる動画コンポジションの作成
  • ブラウザー標準のアニメーション（CSS、WAAPI）の操作
  • 動画レンダリングパイプラインの構築
  • Helios と React、Vue、Svelte などのフレームワークの統合
  • GSAP、Framer Motion、Three.js などのアニメーションライブラリの使用
  • データビジュアライゼーションの動画化
  • Helios の開発ワークフローの設定
  • 動画における動き、ペース配分、ビジュアルストーリーテリングに一貫した考え方を適用
  • 感情を第一にしたシネマティックな製品プロモーションの企画または制作（design/cinematic-product-promo-plan を参照）

リポジトリ

すべてのスキルとソースコードは、次の場所で確認できます：https://github.com/BintzGavin/helios-skills

コメント

Markdown 対応