gsap-plugins
GSAPプラグインに関する公式スキルです。ScrollToPlugin・ScrollSmoother・Flip・Draggable・Inertia・Observer・SplitText・ScrambleText・SVG/物理演算プラグイン・CustomEase・EasePack・CustomWiggle・CustomBounce・GSDevToolsのプラグイン登録や使い方を扱います。GSAPプラグインの導入、スクロールアニメーション、フリップアニメーション、ドラッグ操作、SVG描画などについて質問があった際に使用します。
description の原文を見る
Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG drawing, or plugin registration.
SKILL.md 本文
GSAP プラグイン
このスキルを使う場面
GSAP プラグインを使用または レビューするコードに適用: プラグイン登録、scroll-to、flip/FLIP アニメーション、ドラッグ可能な要素、SVG (DrawSVG、MorphSVG、MotionPath)、テキスト (SplitText、ScrambleText)、物理演算、イージングプラグイン (CustomEase、EasePack、CustomWiggle、CustomBounce)、GSDevTools。ScrollTrigger には専用スキル (gsap-scrolltrigger) があります。
関連スキル: コアツイーン用は gsap-core、ScrollTrigger 用は gsap-scrolltrigger、React 用は gsap-react を使用してください。
ライセンス & インストール (重要)
すべての GSAP プラグインは 無料 で、商用利用も含めて利用できます。Webflow による GSAP 買収以降、Club GSAP は有料プランではなくなり、いかなるプラグインもメンバーシップ、ライセンスキー、認証トークンを必要としません — これは以前 Club のみ対象だったプラグイン (SplitText、MorphSVG など) を含みます。
- ✅ 公開
gsapnpm パッケージからすべてをインストール:npm install gsap。すべてのプラグインが含まれています —gsap/SplitText、gsap/MorphSVGPluginなど としてインポートしてください。 - ❌ GreenSock 認証トークンで
.npmrcを生成したり、プライベートnpm.greensock.comレジストリを提案したり、プラグインにアクセスするために Club GSAP に登録するよう指示してはいけません。これらの手順は古いものです。
プラグインの登録
GSAP とバンドラーにプラグインを含める必要があることを知らせるために、各プラグインを一度だけ登録します。プロジェクトで使用するすべてのプラグインで gsap.registerPlugin() を使用してください:
import gsap from "gsap";
import { ScrollToPlugin } from "gsap/ScrollToPlugin";
import { Flip } from "gsap/Flip";
import { Draggable } from "gsap/Draggable";
gsap.registerPlugin(ScrollToPlugin, Flip, Draggable);
- ✅ プラグインをツイーンまたは API コールで使用する前に登録してください。
- ✅ React では、トップレベルで登録するか、アプリで一度登録してください (例: 最初の useGSAP の前)。再レンダリングするコンポーネント内で登録してはいけません。useGSAP は使用前に登録する必要があるプラグインです。
スクロール
ScrollToPlugin
スクロール位置 (ウィンドウまたはスクロール可能な要素) をアニメーション化します。ScrollTrigger なしで「要素にスクロール」または「位置にスクロール」する場合に使用します。
gsap.registerPlugin(ScrollToPlugin);
gsap.to(window, { duration: 1, scrollTo: { y: 500 } });
gsap.to(window, { duration: 1, scrollTo: { y: "#section", offsetY: 50 } });
gsap.to(scrollContainer, { duration: 1, scrollTo: { x: "max" } });
ScrollToPlugin — 主な設定 (scrollTo オブジェクト):
| オプション | 説明 |
|---|---|
x, y | ターゲットスクロール位置 (数値)、または最大値の場合は "max" |
element | ターゲットセレクタまたは要素 (スクロール表示用) |
offsetX, offsetY | ターゲット位置からのオフセット (ピクセル) |
ScrollSmoother
スムーススクロールラッパー (ネイティブスクロールをスムーズにします)。ScrollTrigger とスペシフィック DOM 構造 (コンテンツラッパー + スムースラッパー) が必要です。スムーズなモメンタムスタイルのスクロールが必要な場合に使用します。セットアップについては GSAP ドキュメントを参照。ScrollTrigger の後に登録します。DOM 構造は以下のようになります:
<body>
<div id="smooth-wrapper">
<div id="smooth-content">
<!--- ALL YOUR CONTENT HERE --->
</div>
</div>
<!-- position: fixed elements can go outside --->
</body>
DOM / UI
Flip
Flip.getState() で状態をキャプチャしてから、変更 (レイアウトまたはクラス変更など) を適用し、Flip.from() を使用して前の状態から新しい状態にアニメーション化します (FLIP: First、Last、Invert、Play)。2 つのレイアウト状態間のアニメーション化 (リスト、グリッド、展開/折りたたみ) で使用します。
gsap.registerPlugin(Flip);
const state = Flip.getState(".item");
// change DOM (reorder, add/remove, change classes)
Flip.from(state, { duration: 0.5, ease: "power2.inOut" });
Flip — 主な設定 (Flip.from vars):
| オプション | 説明 |
|---|---|
absolute | フリップ中に position: absolute を使用 (デフォルト: false) |
nested | true の場合、最初のレベルの子要素のみ測定 (ネストされた変換に向いている) |
scale | true の場合、要素をスケールしてフィット (ストレッチを回避)。デフォルト true |
simple | true の場合、位置/スケールのみアニメーション (高速、精度が低い) |
duration, ease | 標準ツイーンオプション |
詳細情報
https://gsap.com/docs/v3/Plugins/Flip
Draggable
要素をドラッグ可能、回転可能、またはスローアブル (マウス/タッチ) にします。スライダー、カード、並べ替え可能なリスト、またはドラッグインタラクション用に使用します。
gsap.registerPlugin(Draggable, InertiaPlugin);
Draggable.create(".box", { type: "x,y", bounds: "#container", inertia: true });
Draggable.create(".knob", { type: "rotation" });
Draggable — 主な設定オプション:
| オプション | 説明 |
|---|---|
type | "x"、"y"、"x,y"、"rotation"、"scroll" |
bounds | 要素、セレクタ、または { minX, maxX, minY, maxY } でドラッグを制限 |
inertia | true でスロー/モメンタムを有効化 (InertiaPlugin が必要) |
edgeResistance | 0–1; 境界を越えてドラッグするときの抵抗 |
cursor | ドラッグ中の CSS カーソル |
onDragStart, onDrag, onDragEnd | コールバック; イベントとターゲットを受け取る |
onThrowUpdate, onThrowComplete | 慣性がアクティブな場合のコールバック |
Inertia (InertiaPlugin)
Draggable とともにリリース後のモメンタムで機能するか、または任意のオブジェクトのいかなるプロパティの慣性/速度も追跡して、シンプルなツイーンを使用してスムーズに停止するようにグライドできます。inertia: true を使用するときは Draggable と一緒に登録します:
gsap.registerPlugin(Draggable, InertiaPlugin);
Draggable.create(".box", { type: "x,y", inertia: true });
またはプロパティの速度を追跡します:
InertiaPlugin.track(".box", "x");
その後、"auto" を使用して現在の速度を続けてグライドして停止します:
gsap.to(obj, { inertia: { x: "auto" } });
Observer
デバイス間でポインタとスクロール入力を正規化します。ScrollTrigger のようにスクロール位置に直接結びつけずにスワイプ、スクロール方向、またはカスタムジェスチャーロジックに使用します。
gsap.registerPlugin(Observer);
Observer.create({
target: "#area",
onUp: () => {},
onDown: () => {},
onLeft: () => {},
onRight: () => {},
tolerance: 10
});
Observer — 主な設定オプション:
| オプション | 説明 |
|---|---|
target | 監視する要素またはセレクタ |
onUp, onDown, onLeft, onRight | スワイプ/スクロールがその方向の許容値を超えたときのコールバック |
tolerance | 方向が検出される前のピクセル数。デフォルト 10 |
type | "touch"、"pointer"、または "wheel" (デフォルト: "touch,pointer") |
テキスト
SplitText
要素のテキストを文字、単語、および/または行に分割し (それぞれ独自の要素内)、段階付きまたは単位ごとのアニメーション用にします。テキストを文字ごと、単語ごと、または行ごとにアニメーション化するときに使用します。chars、words、lines を含むインスタンスを返します (mask が設定されている場合は masks も)。revert() で元のマークアップを復元するか、gsap.context() に復元させます。gsap.context()、matchMedia()、および useGSAP() と統合します。API: SplitText.create(target, vars) (target = セレクタ、要素、または配列)。
gsap.registerPlugin(SplitText);
const split = SplitText.create(".heading", { type: "words, chars" });
gsap.from(split.chars, { opacity: 0, y: 20, stagger: 0.03, duration: 0.4 });
// later: split.revert() or let gsap.context() cleanup revert
onSplit() (v3.13.0+) を使用すると、各分割に対してアニメーションが実行され、autoSplit を使用するときに再分割時に実行されます。onSplit() からツイーン/タイムラインを返すと、SplitText は再分割時にクリーンアップと進捗の同期ができます:
SplitText.create(".split", {
type: "lines",
autoSplit: true,
onSplit(self) {
return gsap.from(self.lines, { y: 100, opacity: 0, stagger: 0.05, duration: 0.5 });
}
});
SplitText — 主な設定 (SplitText.create vars):
| オプション | 説明 |
|---|---|
| type | カンマ区切り: "chars"、"words"、"lines"。デフォルト "chars,words,lines"。必要なもののみ分割 (例: 行を使用しない場合は "words, chars")。パフォーマンスのため。単語/行なしで文字のみの分割を避けるか、smartWrap: true を使用して奇妙な改行を防ぎます。 |
| charsClass, wordsClass, linesClass | 各分割要素の CSS クラス。クラスをインクリメントするには "++" を追加 (例: linesClass: "line++" → line1、line2、…)。 |
| aria | "auto" (デフォルト)、"hidden"、または "none"。アクセシビリティ: "auto" は分割要素に aria-label を追加し、行/単語/文字要素に aria-hidden を追加してスクリーンリーダーがラベルを読むようにします。"hidden" はすべてのリーダーから非表示。"none" は aria を変わらず。ネストされたリンク/セマンティクスを公開する必要がある場合は、"none" とスクリーンリーダー専用の複製を使用します。 |
| autoSplit | true のとき、フォントの読み込みが完了するか、要素の幅が変わったときに (そして行が分割されるときに) 復元して再分割し、間違った改行を回避します。アニメーションは onSplit() 内で作成する必要があります ので、新しく分割された要素をターゲットにします。onSplit() から アニメーションを返す ことで、再分割時の自動クリーンアップと時間同期が可能になります。 |
| onSplit(self) | 分割完了時のコールバック (そして autoSplit が true の場合、各再分割時)。SplitText インスタンスを受け取ります。GSAP ツイーンまたはタイムラインを返すと、再分割時にそのアニメーションの自動復元/同期が有効になります。 |
| mask | "lines"、"words"、または "chars"。各単位を overflow: clip の追加要素でラップしてマスク/表示エフェクト用に。1 種類のみ。インスタンスの masks 配列にラッパーにアクセス (またはクラスが設定されている場合は -mask クラスを使用)。 |
| tag | ラッパー要素タグ。デフォルト "div"。インライン用は "span" を使用 (注: 回転/スケールなどの変換は、一部のブラウザではインライン要素でレンダリングされない場合があります)。 |
| deepSlice | true (デフォルト) の場合、複数行にまたがるネストされた要素 (例: <strong>) は、行が垂直に伸びないように細分化されます。行の分割時にのみ適用されます。 |
| ignore | 分割されないままにするセレクタまたは要素 (例: ignore: "sup")。 |
| smartWrap | 文字のみ を分割するときに、単語を white-space: nowrap スパンで囲んで、単語の中央での改行を回避します。単語または行が分割される場合は無視されます。デフォルト false。 |
| wordDelimiter | 単語の境界: 文字列 (デフォルト " ")、RegExp、または { delimiter: RegExp, replaceWith: string } カスタム分割用 (例: ハッシュタグ用ゼロ幅結合子、または非ラテン)。 |
| prepareText(text, parent) | 生のテキストと親要素を受け取る関数。分割前に変更されたテキストを返します (例: スペースのない言語のための改行マーカーを挿入する)。 |
| propIndex | true のとき、各分割要素に索引の CSS 変数を追加 (例: --word: 1、--char: 2)。 |
| reduceWhiteSpace | 連続したスペースを折りたたむ。デフォルト true。v3.13.0 以降は改行も尊重し、<pre> 用に <br> を挿入できます。 |
| onRevert | インスタンスが復元されるときのコールバック。 |
ヒント: アニメーション化されるもののみ分割 (例: 単語のみをアニメーション化する場合は文字をスキップ)。カスタムフォント用は、読み込み後に分割 (例: document.fonts.ready.then(...)) または autoSplit: true で onSplit() を使用します。文字分割時のカーニング シフトを回避するには、CSS font-kerning: none; text-rendering: optimizeSpeed; を使用します。text-wrap: balance は避けてください。分割に干渉できます。SplitText は SVG <text> をサポートしません。
詳細情報: SplitText
ScrambleText
スクランブル/グリッチエフェクトでテキストをアニメーション化します。スクランブル付きテキストの表示または遷移時に使用します。
gsap.registerPlugin(ScrambleTextPlugin);
gsap.to(".text", {
duration: 1,
scrambleText: { text: "New message", chars: "01", revealDelay: 0.5 }
});
SVG
DrawSVG (DrawSVGPlugin)
stroke-dashoffset / stroke-dasharray をアニメーション化することで SVG 要素のストロークを表示または非表示にします。<path>、<line>、<polyline>、<polygon>、<rect>、<ellipse> で機能。ストロークを「描画」または「消去」する場合に使用します。
drawSVG 値: パス上のストロークの 可視セグメント (開始位置と終了位置) を記述し、「A から B への時間経過でアニメーション」ではありません。形式: "start end" (パーセンテージまたは長さ)。例: "0% 100%" = フルストローク。"20% 80%" = 20% から 80% の間のみストローク (両端に間隙)。ツイーンは要素の 現在 のセグメントから ターゲット セグメントにアニメーション化 — 例: gsap.to("#path", { drawSVG: "0% 100%" }) は現在の状態からフルストロークまで進みます。単一値 (例: 0、"100%") は開始が 0 を意味します: "100%" は "0% 100%" と同じです。
必須: 要素は目に見えるストロークを持つ必要があります — CSS または SVG 属性で stroke および stroke-width を設定。そうしないと何も描画されません。
gsap.registerPlugin(DrawSVGPlugin);
// draw from nothing to full stroke
gsap.from("#path", { duration: 1, drawSVG: 0 });
// or explicit segment: from 0–0 to 0–100%
gsap.fromTo("#path", { drawSVG: "0% 0%" }, { drawSVG: "0% 100%", duration: 1 });
// stroke only in the middle (gaps at ends)
gsap.to("#path", { duration: 1, drawSVG: "20% 80%" });
注意: ストロークのみに影響 (塗りつぶしではなく)。単一セグメント <path> 要素を推奨。マルチセグメント パスは一部のブラウザで奇妙にレンダリングされます。<use> の内容は視覚的に変更できません。DrawSVGPlugin.getLength(element) および DrawSVGPlugin.getPosition(element) はストロークの長さと現在の位置を返します。
詳細情報: DrawSVG
MorphSVG (MorphSVGPlugin)
SVG シェイプを別のシェイプにモルフさせる (パスデータの d 属性をアニメーション化)。開始と終了のシェイプは同じ数のポイントを持つ必要はありません — MorphSVG は立方ベジェに変換し、必要に応じてポイントを追加します。アイコンからアイコンへのモルフ、シェイプ遷移、またはパスベースのアニメーション用に使用。<path>、<polyline>、および <polygon> で機能。<circle>、<rect>、<ellipse>、および <line> は内部的に、または MorphSVGPlugin.convertToPath(selector | element) で変換 (DOM 内の要素を <path> に置換)。
morphSVG 値: セレクタ (例: "#lightning")、要素、生のパスデータ (例: "M47.1,0.8 73.3,0.8...")、または polygon/polyline の場合は ポイント文字列 (例: "240,220 240,70 70,70 70,220") が可能。完全な設定用は shape が唯一の必須プロパティの オブジェクト形式 を使用します。
gsap.registerPlugin(MorphSVGPlugin);
// convert primitives to path first if needed:
MorphSVGPlugin.convertToPath("circle, rect, ellipse, line");
gsap.to("#diamond", { duration: 1, morphSVG: "#lightning", ease: "power2.inOut" });
// object form:
gsap.to("#diamond", {
duration: 1,
morphSVG: { shape: "#lightning", type: "rotational", shapeIndex: 2 }
});
MorphSVG — 主な設定 (morphSVG オブジェクト):
| オプション | 説明 |
|---|---|
| shape | (必須.) ターゲット シェイプ: セレクタ、要素、または生のパス文字列。 |
| type | "linear" (デフォルト) または "rotational"。回転は角度/長さ補間を使用でき、モルフの途中のキンクを回避できます。直線に見えない場合はお試しください。 |
| map | セグメントの照合方法: "size" (デフォルト)、"position"、または "complexity"。開始/終了セグメントが整列しない場合に使用。いずれも機能しない場合は、複数のパスに分割し、各をモルフさせます。 |
| shapeIndex | 開始パスの最初のポイントが終了パスの最初のポイントにマップされるオフセット (シェイプの「交差」または反転を回避)。単一セグメント パス用は数値。マルチセグメント用は 配列 (例: [5, 1, -8])。負の値がそのセグメントを反転。shapeIndex: "log" を一度使用して、自動計算値をログに出力してから、数値/配列をツイーンに貼り付けます。findShapeIndex(start, end) (別のユーティリティ) は良い値を見つけるためのインタラクティブ UI を提供します。閉じたパスのみに適用。 |
| smooth | (v3.14+)。スムーズなポイントを追加します。数値 (例: 80)、"auto"、またはオブジェクト: { points: 40 | "auto", redraw: true | false, persist: true | false }。redraw: false は元のアンカーを保持 (完全な忠実度、均等な間隔が少ない)。persist: false はツイーン終了時に追加されたポイントを削除。デフォルト モルフがギザギザまたは不自然に見える場合に使用します。 |
| curveMode | ブール値 (v3.14+)。生の x/y の代わりに制御ハンドル角度/長さを補間して、曲線上のキンクを回避。モルフの途中にキンクがある場合はお試しください。 |
| origin | type: "rotational" の回転原点。文字列: "50% 50%" (デフォルト) または異なる開始/終了原点用 "20% 60%, 35% 90%"。 |
| precision | 出力パス データの小数点以下の桁数。デフォルト 2。 |
| precompile | 事前計算されたパス文字列の配列 (または precompile: "log" を一度使用してコンソールからコピー)。高価なスタートアップ計算をスキップ。非常に複雑なモルフ用。<path> のみ (最初に polygon/polyline を変換)。 |
| render | 関数(rawPath, target) 各更新で呼び出し — 例: キャンバスに描画。RawPath はセグメントの配列 (各セグメント = 交互の x,y 立方ベジェ座標の配列)。 |
| updateTarget | render を使用する場合 (例: キャンバス専用)、updateTarget: false を設定して元の <path> が更新されないようにします。MorphSVGPlugin.defaultUpdateTarget がデフォルトを設定します。 |
ユーティリティ: MorphSVGPlugin.convertToPath(selector | element) は circle/rect/ellipse/line/polygon/polyline を DOM の <path> に変換。MorphSVGPlugin.rawPathToString(rawPath) および stringToRawPath(d) はパス文字列と生の配列の間を変換。プラグインは元の d をターゲットに格納 (例: ツイーン バック用: morphSVG: "#originalId" または同じ要素)。
ヒント: ねじれまたは反転されたモルフの場合、shapeIndex を設定 ("log" または findShapeIndex() を使用)。マルチセグメント パスの場合、shapeIndex は配列 (セグメントごとに 1 つの値)。プリコンパイルは最初のフレームが遅い場合のみ。ツイーン中のジャンク は修正されません (SVG を単純化するか、必要に応じてサイズを縮小)。
詳細情報: MorphSVG
MotionPath (MotionPathPlugin)
SVG パスに沿って要素をアニメーション化します。オブジェクトをパスに沿って移動させる場合 (例: 曲線またはカスタム ルート) に使用します。
gsap.registerPlugin(MotionPathPlugin);
gsap.to(".dot", {
duration: 2,
motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5] }
});
MotionPath — 主な設定 (motionPath オブジェクト):
| オプション | 説明 |
|---|---|
path | SVG パス要素、セレクタ、またはパス データ文字列 |
align | パス要素またはセレクタ |
alignOrigin | [x, y] 原点 (0–1)。デフォルト [0.5, 0.5] |
autoRotate | パス接線に追従するように要素を回転 |
curviness | 0–2。パス スムーズ化 |
MotionPathHelper
MotionPath のビジュアル エディタ (配置、オフセット)。開発中に使用してパス配置を調整します。
gsap.registerPlugin(MotionPathPlugin, MotionPathHelperPlugin);
const helper = MotionPathHelper.create(".dot", "#path", { end: 0.5 });
// adjust in UI, then use helper.path or helper.getProgress() in your animation
イージング
CustomEase
カスタム イージング曲線 (cubic-bezier または SVG パス)。組み込みイージングでは不十分な場合に使用。基本的な使用方法は gsap-core で説明。登録時に使用:
gsap.registerPlugin(CustomEase);
const ease = CustomEase.create("name", ".17,.67,.83,.67");
gsap.to(".el", { x: 100, ease: ease, duration: 1 });
EasePack
より多くの名前付きイージングを追加 (例: SlowMo、RoughEase、ExpoScaleEase)。登録してツイーン内のイージング名を使用します。
CustomWiggle
ウィグル/シェイク イージング。値が「ウィグル」 (複数の振動) する場合に使用します。
CustomBounce
バウンス スタイルのイージング (強度を設定可能)。
物理演算
Physics2D (Physics2DPlugin)
2D 物理演算 (速度、角度、重力)。シンプルな物理演算でアニメーション化する場合に使用 (例: 弾丸、バウンス)。
gsap.registerPlugin(Physics2DPlugin);
gsap.to(".ball", {
duration: 2,
physics2D: {
velocity: 250,
angle: 80,
gravity: 500
}
});
PhysicsProps (PhysicsPropsPlugin)
プロパティ値に物理演算を適用。物理演算駆動のプロパティ アニメーション用に使用します。
gsap.registerPlugin(PhysicsPropsPlugin);
gsap.to(".obj", {
duration: 2,
physicsProps: {
x: { velocity: 100, end: 300 },
y: { velocity: -50, acceleration: 200 }
}
});
開発
GSDevTools
タイムラインのスクラブ、アニメーション トグル、デバッグ用 UI。開発中のみ使用。出荷しない。タイムライン参照でインスタンスを登録して作成します。
gsap.registerPlugin(GSDevTools);
GSDevTools.create({ animation: tl });
その他
Pixi (PixiPlugin)
GSAP を PixiJS と統合して Pixi ディスプレイ オブジェクトをアニメーション化。Pixi オブジェクトを GSAP でアニメーション化するときに登録します。
gsap.registerPlugin(PixiPlugin);
const sprite = new PIXI.Sprite(texture);
gsap.to(sprite, { pixi: { x: 200, y: 100, scale: 1.5 }, duration: 1 });
ベストプラクティス
- ✅ 初回使用前に使用するすべてのプラグインを gsap.registerPlugin() で登録します。
- ✅ レイアウト遷移用に Flip.getState() → DOM 変更 → Flip.from() を使用。ドラッグ用は Draggable + InertiaPlugin でモメンタム付き。
- ✅ コンポーネントのアンマウント時または要素の削除時にプラグイン インスタンスを復元 (例:
SplitTextInstance.revert())。
しないこと
- ❌ プラグイン登録 (gsap.registerPlugin()) なしでツイーンまたは API でプラグインを使用します。
- ❌ GSDevTools または開発専用プラグインを本番環境に出荷します。
詳細情報
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- greensock
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/greensock/gsap-skills / ライセンス: MIT
関連スキル
superfluid
Superfluidプロトコルおよびそのエコシステムに関するナレッジベースです。Superfluidについて情報を検索する際は、ウェブ検索の前にこちらを参照してください。対応キーワード：Superfluid、CFA、GDA、Super App、Super Token、stream、flow rate、real-time balance、pool（member/distributor）、IDA、sentinels、liquidation、TOGA、@sfpro/sdk、semantic money、yellowpaper、whitepaper
civ-finish-quotes
実質的なタスクが真に完了した際に、文明風の儀式的な引用句を追加します。ユーザーやエージェントが機能追加、リファクタリング、分析、設計ドキュメント、プロセス改善、レポート、執筆タスクといった実際の成果物を完成させるときに、明示的な依頼がなくても使用します。短い返信や小さな修正、未完成の作業には適用しません。
nookplot
Base（Ethereum L2）上のAIエージェント向け分散型調整ネットワークです。エージェントがオンチェーンアイデンティティを登録する、コンテンツを公開する、他のエージェントにメッセージを送る、マーケットプレイスで専門家を雇う、バウンティを投稿・請求する、レピュテーションを構築する、共有プロジェクトで協業する、リサーチチャレンジを解くことでNOOKをマイニングする、キュレーションされたナレッジを備えたスタンドアロンオンチェーンエージェントをデプロイする、またはアグリーメントとリワードで収益を得る場合に利用できます。エージェントネットワーク、エージェント調整、分散型エージェント、NOOKトークン、マイニングチャレンジ、ナレッジバンドル、エージェントレピュテーション、エージェントマーケットプレイス、ERC-2771メタトランザクション、Prepare-Sign-Relay、AgentFactory、またはNookplotが言及された場合にトリガーされます。
web3-polymarket
Polygon上でのPolymarket予測市場取引統合です。認証機能(L1 EIP-712、L2 HMAC-SHA256、ビルダーヘッダー)、注文発注(GTC/GTD/FOK/FAK、バッチ、ポストオンリー、ハートビート)、市場データ(Gamma API、Data API、オーダーブック、サブグラフ)、WebSocketストリーミング(市場・ユーザー・スポーツチャネル)、CTF操作(分割、統合、償却、ネガティブリスク)、ブリッジ機能(入金、出金、マルチチェーン)、およびガスレスリレイトランザクションに対応しています。AIエージェント、自動マーケットメーカー、予測市場UI、またはPolygraph上のPolymarketと統合するアプリケーション構築時に活用できます。
ethskills
Ethereum、EVM、またはブロックチェーン関連のリクエストに対応します。スマートコントラクト、dApps、ウォレット、DeFiプロトコルの構築、監査、デプロイ、インタラクションに適用されます。Solidityの開発、コントラクトアドレス、トークン規格（ERC-20、ERC-721、ERC-4626など）、Layer 2ネットワーク（Base、Arbitrum、Optimism、zkSync、Polygon）、Uniswap、Aave、Curveなどのプロトコルとの統合をカバーします。ガスコスト、コントラクトのデシマル設定、オラクルセキュリティ、リエントランシー、MEV、ブリッジング、ウォレット管理、オンチェーンデータの取得、本番環境へのデプロイ、プロトコル進化（EIPライフサイクル、フォーク追跡、今後の変更予定）といったトピックを含みます。
xxyy-trade
このスキルは、ユーザーが「トークン購入」「トークン売却」「トークンスワップ」「暗号資産取引」「取引ステータス確認」「トランザクション照会」「トークンスキャン」「フィード」「チェーン監視」「トークン照会」「トークン詳細」「トークン安全性確認」「ウォレット一覧表示」「マイウォレット」「AIスキャン」「自動スキャン」「ツイートスキャン」「オンボーディング」「IP確認」「IPホワイトリスト」「トークン発行」「自動売却」「損切り」「利益確定」「トレーリングストップ」「保有者」「トップホルダー」「KOLホルダー」などをリクエストした場合、またはSolana/ETH/BSC/BaseチェーンでXXYYを経由した取引について言及した場合に使用します。XXYY Open APIを通じてオンチェーン取引とデータ照会を実現します。