Agent Skills by ALSEL
Anthropic ClaudeLLM・AI開発⭐ リポ 0品質スコア 50/100

draw-io-diagram-generator

draw.ioの図ファイル（.drawio / .drawio.svg / .drawio.png）を作成・編集・生成する際に使用するスキルです。mxGraph XMLの記述、シェイプライブラリ、スタイル文字列、フローチャート、システムアーキテクチャ、シーケンス図、ER図、UMLクラス図、ネットワークトポロジー、レイアウト戦略、hediet.vscode-drawio拡張機能など幅広い領域をカバーし、リクエストからすぐに開けるファイルの生成まで一連のワークフローを担います。

description の原文を見る

Use when creating, editing, or generating draw.io diagram files (.drawio, .drawio.svg, .drawio.png). Covers mxGraph XML authoring, shape libraries, style strings, flowcharts, system architecture, sequence diagrams, ER diagrams, UML class diagrams, network topology, layout strategy, the hediet.vscode-drawio VS Code extension, and the full agent workflow from request to a ready-to-open file.

SKILL.md 本文

Draw.io Diagram Generator

このスキルを使うと、正しい mxGraph XML 構造を持つ draw.io (.drawio) ダイアグラムファイルを生成、編集、検証できます。生成されたファイルはすべて、 Draw.io VS Code extension (hediet.vscode-drawio) で即座に開くことができ、手動での修正は一切必要ありません。必要に応じて、draw.io の Web アプリやデスクトップアプリで開くこともできます。

1. このスキルを使う場合

トリガーフレーズ (以下のフレーズを見たときにこのスキルを読み込みます)

  • 「ダイアグラムを作成する」「フローチャートを描く」「アーキテクチャダイアグラムを生成する」
  • 「シーケンスダイアグラムを設計する」「UML クラスダイアグラムを作成する」「ER ダイアグラムを構築する」
  • 「.drawio ファイルを追加する」「ダイアグラムを更新する」「フローを可視化する」
  • 「アーキテクチャを文書化する」「データモデルを表示する」「サービス間の相互作用を図示する」
  • .drawio、.drawio.svg、または .drawio.png ファイルの作成または変更の依頼

対応するダイアグラムタイプ

ダイアグラムタイプテンプレート説明
フローチャートassets/templates/flowchart.drawio決定と分岐を伴うプロセスフロー
システムアーキテクチャassets/templates/architecture.drawioマルチティア / レイヤードサービスアーキテクチャ
シーケンスダイアグラムassets/templates/sequence.drawioアクターのライフラインとタイミング付きメッセージフロー
ER ダイアグラムassets/templates/er-diagram.drawioリレーションシップ付きデータベーステーブル
UML クラスダイアグラムassets/templates/uml-class.drawioクラス、インターフェース、列挙型、リレーションシップ
ネットワークトポロジー(シェイプライブラリを使用)ルーター、サーバー、ファイアウォール、サブネット
BPMN ワークフロー(シェイプライブラリを使用)ビジネスプロセスのイベント、タスク、ゲートウェイ
マインドマップ(手動)中心トピックから放射状に広がる分岐

2. 前提条件

  • VS Code 統合が有効な場合は、drawio 拡張機能をインストールします: draw.io VS Code extension — hediet.vscode-drawio (拡張機能 id)。以下でインストール: 
    ext install hediet.vscode-drawio
  • 対応するファイル拡張子: .drawio、.drawio.svg、.drawio.png
  • Python 3.8+ (オプション) — scripts/ の検証およびシェイプ挿入スクリプト用

3. ステップバイステップエージェントワークフロー

ダイアグラム生成タスクごとに、これらのステップを順番に従います。

ステップ 1 — リクエストを理解する

以下を質問または推測します:

  1. ダイアグラムタイプ — どのような種類のダイアグラム? (フローチャート、アーキテクチャ、UML、ER、シーケンス、ネットワーク...)
  2. エンティティ / アクター — 主なコンポーネント、アクター、クラス、またはテーブルは何か?
  3. リレーションシップ — どのように接続されているか? 方向は? 基数は?
  4. 出力パス — .drawio ファイルをどこに保存するか?
  5. 既存ファイル — 新規作成か既存ファイルの編集か?

リクエストが曖昧な場合は、コンテキストから最も適切なダイアグラムタイプを推測します (例: 「テーブルを表示する」→ ER ダイアグラム、「API 呼び出しがどのようにフローするかを表示する」→ シーケンスダイアグラム)。

ステップ 2 — テンプレートを選択するか、新規作成する

  • テンプレートを使用 — ダイアグラムタイプが assets/templates/ のものと一致する場合。テンプレート構造をコピーしてプレースホルダー値を置き換えます。
  • 新規作成 — 新しいレイアウトの場合。最小限の有効なスケルトンから開始:
<!-- modified=""を生成時の現在の ISO 8601 タイムスタンプに設定 -->
<mxfile host="Electron" modified="" version="26.0.0">
  <diagram id="page-1" name="Page-1">
    <mxGraphModel dx="1422" dy="762" grid="1" gridSize="10" guides="1"
                  tooltips="1" connect="1" arrows="1" fold="1"
                  page="1" pageScale="1" pageWidth="1169" pageHeight="827"
                  math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <!-- セルをここに配置 -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

ルール: id 0 と 1 は常に必須で、最初の 2 つのセルでなければなりません。決して再利用しないでください。

ステップ 3 — レイアウトを計画する

XML を生成する前に、論理的な配置をスケッチします:

  • 行またはティアに整理 (レイアーに対してスイムレーンを使用)
  • 水平スペース: 同じ行のシェイプ間で 40–60px
  • 垂直スペース: ティア行間で 80–120px
  • 標準シェイプサイズ: プロセスボックスは 120x60 px、スイムレーンは 160x80 px
  • デフォルトキャンバス: A4 横向き = 1169 x 827 px

ステップ 4 — mxGraph XML を生成する

頂点セル (すべてのシェイプ):

<mxCell id="unique-id" value="Label"
        style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;"
        vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
</mxCell>

エッジセル (すべてのコネクター):

<mxCell id="edge-id" value="Label (オプション)"
        style="edgeStyle=orthogonalEdgeStyle;html=1;"
        edge="1" source="source-id" target="target-id" parent="1">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

重要なルール:

  • すべてのセル id はファイル内でグローバルに一意である必要があります
  • すべての頂点には mxGeometry 子要素が必要で、x、y、width、height、as="geometry" を持つ必要があります
  • すべてのエッジには既存の頂点 id と一致する source と target が必要です — 例外: フローティングエッジ (例: シーケンスダイアグラムのライフライン) は <mxGeometry> 内の sourcePoint/targetPoint を使用します; §4 シーケンスダイアグラムを参照
  • すべてのセルの parent は既存のセル id を参照する必要があります
  • ラベルが HTML を含む場合 (<b>、<i>、<br>)、スタイルで html=1 を使用します
  • ラベルで XML 特殊文字をエスケープ: & => &amp;、< => &lt;、> => &gt;

ステップ 5 — 正しいスタイルを適用する

一貫性を保つため、標準的なセマンティックカラーパレットを使用します:

目的fillColorstrokeColor
プライマリ / 情報#dae8fc#6c8ebf
成功 / 開始#d5e8d4#82b366
警告 / 決定#fff2cc#d6b656
エラー / 終了#f8cecc#b85450
ニュートラル#f5f5f5#666666
外部 / パートナー#e1d5e7#9673a6

ダイアグラムタイプ別の一般的なスタイル文字列:

# 丸いプロセスボックス (フローチャート)
rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;

# 決定ダイアモンド
rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;

# 開始/終了ターミナル
ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;

# データベースシリンダー
shape=mxgraph.flowchart.database;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;

# スイムレーンコンテナ (ティア)
swimlane;startSize=30;fillColor=#dae8fc;strokeColor=#6c8ebf;fontStyle=1;

# UML クラスボックス
swimlane;fontStyle=1;align=center;startSize=40;fillColor=#dae8fc;strokeColor=#6c8ebf;

# インターフェース / ステレオタイプボックス
swimlane;fontStyle=3;align=center;startSize=40;fillColor=#f5f5f5;strokeColor=#666666;

# ER テーブルコンテナ
shape=table;startSize=30;container=1;collapsible=1;childLayout=tableLayout;

# 直交コネクター
edgeStyle=orthogonalEdgeStyle;html=1;

# ER リレーションシップ (カラスの脚)
edgeStyle=entityRelationEdgeStyle;html=1;endArrow=ERmany;startArrow=ERone;

references/style-reference.md で完全なスタイルキーカタログを、references/shape-libraries.md ですべてのシェイプライブラリ名を参照してください。

ステップ 6 — 保存と検証

  1. ファイルを書き込む リクエストされたパスに .drawio 拡張子で
  2. バリデーターを実行 (オプション推奨): 
    python .github/skills/draw-io-diagram-generator/scripts/validate-drawio.py <path-to-file.drawio>
  3. ユーザーに説明 ファイルの開き方:

    「<filename> を VS Code で開く — draw.io 拡張機能が自動的にレンダリングします。必要に応じて draw.io の Web アプリまたはデスクトップアプリで開くこともできます。」

  4. ダイアグラムの簡単な説明を提供 ユーザーが何を期待するかわかるように。

4. ダイアグラムタイプ別レシピ

フローチャート

主要要素: 開始 (楕円) => プロセス (丸い長方形) => 決定 (ダイアモンド) => 終了 (楕円)

<!-- 開始ノード -->
<mxCell id="start" value="Start"
        style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;"
        vertex="1" parent="1">
  <mxGeometry x="500" y="80" width="120" height="60" as="geometry" />
</mxCell>

<!-- プロセス -->
<mxCell id="p1" value="Process Step"
        style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;"
        vertex="1" parent="1">
  <mxGeometry x="500" y="200" width="120" height="60" as="geometry" />
</mxCell>

<!-- 決定 -->
<mxCell id="d1" value="Condition?"
        style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;"
        vertex="1" parent="1">
  <mxGeometry x="460" y="320" width="200" height="100" as="geometry" />
</mxCell>

<!-- 矢印: 開始から p1 へ -->
<mxCell id="e1" value=""
        style="edgeStyle=orthogonalEdgeStyle;html=1;"
        edge="1" source="start" target="p1" parent="1">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

アーキテクチャダイアグラム (3 ティア)

各ティア用にスイムレーンコンテナを使用します。すべてのサービスボックスはそのスイムレーンの子です。

<!-- ティアスイムレーン -->
<mxCell id="tier1" value="Client Layer"
        style="swimlane;startSize=30;fillColor=#dae8fc;strokeColor=#6c8ebf;fontStyle=1;"
        vertex="1" parent="1">
  <mxGeometry x="60" y="100" width="1050" height="130" as="geometry" />
</mxCell>

<!-- ティア内のサービス (parent="tier1"、座標はティアに相対) -->
<mxCell id="webapp" value="Web App"
        style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;"
        vertex="1" parent="tier1">
  <mxGeometry x="80" y="40" width="120" height="60" as="geometry" />
</mxCell>

ティア間のコネクターは絶対座標で parent="1" を使用します。

シーケンスダイアグラム

主要要素: アクター (上部)、ライフライン (破線の縦線)、アクティベーションボックス、メッセージ矢印。

  • ライフライン: edge="1" に endArrow=none と dashed=1、source/target なし — ジオメトリ内で sourcePoint/targetPoint を使用; §4 シーケンスダイアグラムを参照
  • 同期メッセージ: endArrow=block;endFill=1
  • リターンメッセージ: endArrow=open;endFill=0;dashed=1
  • 自己呼び出し: 右への 2 つの配列ポイントと戻りを通じてエッジをループ

最小限の XML スニペット:

<!-- アクター (スティック図) -->
<mxCell id="actorA" value="Client"
        style="shape=mxgraph.uml.actor;pointerEvents=1;dashed=0;whiteSpace=wrap;html=1;aspect=fixed;"
        vertex="1" parent="1">
  <mxGeometry x="110" y="80" width="60" height="80" as="geometry" />
</mxCell>

<!-- サービスボックス -->
<mxCell id="actorB" value="API Server"
        style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;"
        vertex="1" parent="1">
  <mxGeometry x="480" y="100" width="160" height="60" as="geometry" />
</mxCell>

<!-- ライフライン — フローティングエッジ: sourcePoint/targetPoint を使用、source/target 属性ではない -->
<mxCell id="lifA" value=""
        style="edgeStyle=none;dashed=1;endArrow=none;"
        edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="140" y="160" as="sourcePoint" />
    <mxPoint x="140" y="700" as="targetPoint" />
  </mxGeometry>
</mxCell>

<!-- アクティベーションボックス (ライフライン上の細い長方形) -->
<mxCell id="actA1" value=""
        style="fillColor=#dae8fc;strokeColor=#6c8ebf;"
        vertex="1" parent="1">
  <mxGeometry x="130" y="220" width="20" height="180" as="geometry" />
</mxCell>

<!-- 同期メッセージ -->
<mxCell id="msg1" value="POST /orders"
        style="edgeStyle=elbowEdgeStyle;elbow=vertical;html=1;endArrow=block;endFill=1;"
        edge="1" source="actA1" target="actorB" parent="1">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

<!-- リターンメッセージ (破線) -->
<mxCell id="msg2" value="201 Created"
        style="edgeStyle=elbowEdgeStyle;elbow=vertical;dashed=1;html=1;endArrow=open;endFill=0;"
        edge="1" source="actorB" target="actA1" parent="1">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

注: ライフラインはフローティングエッジで、source/target 属性の代わりに <mxGeometry> 内の sourcePoint/targetPoint を使用します。これは、シーケンスダイアグラムの標準 draw.io パターンです。

ER ダイアグラム

shape=table コンテナを使用し、childLayout=tableLayout を指定。行は shape=tableRow セルで portConstraint=eastwest。各行内の列は shape=partialRectangle。

リレーションシップ矢印は edgeStyle=entityRelationEdgeStyle を使用:

  • 一対一: startArrow=ERone;endArrow=ERone
  • 一対多: startArrow=ERone;endArrow=ERmany
  • 多対多: startArrow=ERmany;endArrow=ERmany
  • 必須: ERmandOne、オプション: ERzeroToOne

UML クラスダイアグラム

クラスボックスはスイムレーンコンテナ。属性とメソッドは通常のテキストセル。分割線はゼロ高さのスイムレーン子。

リレーションシップタイプ別の矢印スタイル:

リレーションシップスタイル文字列
継承 (extends)edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=0;
実現 (implements)edgeStyle=orthogonalEdgeStyle;dashed=1;html=1;endArrow=block;endFill=0;
コンポジションedgeStyle=orthogonalEdgeStyle;html=1;startArrow=diamond;startFill=1;endArrow=none;
アグリゲーションedgeStyle=orthogonalEdgeStyle;html=1;startArrow=diamond;startFill=0;endArrow=none;
依存edgeStyle=orthogonalEdgeStyle;dashed=1;html=1;endArrow=open;endFill=0;
関連edgeStyle=orthogonalEdgeStyle;html=1;endArrow=open;endFill=0;

5. 複数ページダイアグラム

複雑なシステムの場合は複数の <diagram> 要素を追加:

<mxfile host="Electron" version="26.0.0">
  <diagram id="overview" name="Overview">
    <!-- 概要 mxGraphModel -->
  </diagram>
  <diagram id="detail" name="Detail View">
    <!-- 詳細 mxGraphModel -->
  </diagram>
</mxfile>

各ページは独立したセル id 名前空間を持ちます。同じ id 値は異なるページに表示されても競合しません。

6. 既存ダイアグラムの編集

既存の .drawio ファイルを変更する場合:

  1. ファイルを読む 最初に既存のセル id、位置、親階層を理解するため
  2. ターゲットダイアグラムページを特定 インデックスまたは name 属性で
  3. 新しい一意の id を割り当てる 既存 id と競合しない
  4. コンテナ階層を尊重 スイムレーンの子は親に相対的な座標を使用
  5. エッジを確認 ノードの位置変更後、エッジ source/target id が有効なままか確認

scripts/add-shape.py を使用して、生 XML を編集せずに 1 つのシェイプを安全に追加:

python .github/skills/draw-io-diagram-generator/scripts/add-shape.py docs/arch.drawio "New Service" 700 380

7. ベストプラクティス

レイアウト

  • 10px グリッドに形を配置 (すべての座標を 10 で割り切れる)
  • 関連するシェイプをスイムレーンコンテナ内にグループ化
  • 1 ページ 1 ダイアグラムトピック; 複雑なシステムには複数ページファイルを使用
  • ページあたり 40 以下のセルを目指して可読性を確保

ラベル

  • すべてのページの上部にタイトルテキストセルを追加 (text;strokeColor=none;fillColor=none;fontSize=18;fontStyle=1)
  • 頂点シェイプで常に whiteSpace=wrap;html=1 を設定
  • ラベルを簡潔に — シェイプあたり 3 語以下を目指す

スタイルの一貫性

  • セクション 3 ステップ 5 のセマンティックカラーパレットをプロジェクト全体で一貫して使用
  • クリーンな直角コネクターには edgeStyle=orthogonalEdgeStyle を優先
  • 必要な場合を除き、ラベルに任意の HTML をインライン化しない

ファイル命名

  • ケバブケースを使用: order-service-flow.drawio、database-schema.drawio
  • ダイアグラムをドキュメント化するコードの横に配置: docs/ または architecture/

8. トラブルシューティング

問題考えられる原因修正
ファイルが VS Code で空白で開くid=0 または id=1 セルが欠落他のセルの前に両方のルートセルを追加
シェイプが間違った位置コンテナ内の子 — 座標は相対的parent を確認; x/y をコンテナに相対的に調整
エッジが表示されないsource または target id が頂点と一致しない両方の id が完全に存在することを確認
ダイアグラムが「Compressed」と表示mxGraphModel が base64 エンコードdraw.io Web で開く、File > Export > XML (非圧縮)
シェイプスタイルがレンダリングされないshape= 名の誤字references/shape-libraries.md で正確なスタイル文字列を確認
ラベルにエスケープされた HTML が表示html=0 で HTML ラベルを持つセルセルスタイルに html=1; を追加
コンテナの子がコンテナエッジに重なるコンテナの高さが小さすぎるmxGeometry のコンテナ高さを増加

9. 検証チェックリスト

生成された .drawio ファイルを提供する前に、以下を確認:

  • ファイルが <mxfile> ルート要素で開始
  • すべての <diagram> が空でない id 属性を持つ
  • <mxCell id="0" /> がすべてのダイアグラムの最初のセル
  • <mxCell id="1" parent="0" /> がすべてのダイアグラムの 2 番目のセル
  • すべてのセル id 値が各ダイアグラム内で一意
  • すべての頂点セルが vertex="1" と <mxGeometry as="geometry"> 子を持つ
  • すべてのエッジセルが edge="1" と (a) 既存の頂点 id を指す source/target、または (b) <mxGeometry> 内の <mxPoint as="sourcePoint"> と <mxPoint as="targetPoint"> (フローティングエッジ — シーケンスダイアグラムのライフライン用) を持つ
  • すべてのセル (id=0 を除く) が既存の id を指す parent を持つ
  • HTML タグを含むラベルの場合、スタイルで html=1 を使用
  • XML は良形式 (閉じられていないタグなし、属性値の中に未エスケープの &、<、> なし)
  • タイトルラベルセルが各ページの上部に存在

自動バリデーターを実行:

python .github/skills/draw-io-diagram-generator/scripts/validate-drawio.py <file.drawio>

10. 出力形式

ダイアグラムを提供する場合、常に以下を提供:

  1. .drawio ファイル をリクエストされたパスに書き込み
  2. 1 文の要約 ダイアグラムが何を示すか
  3. 開き方:

    「<filename> を VS Code で開く — draw.io 拡張機能が自動的にレンダリングします。また、必要に応じて draw.io の Web アプリまたはデスクトップアプリで開くこともできます。」

  4. 編集方法 (ユーザーがカスタマイズする可能性がある場合):

    「任意のシェイプをクリックして選択します。ダブルクリックしてラベルを編集します。ドラッグして位置を変更します。」

  5. 検証ステータス — バリデータースクリプトが実行され、合格したかどうか

11. 参照

すべての付属ファイルは .github/skills/draw-io-diagram-generator/ にあります:

ファイル内容
references/drawio-xml-schema.mdmxfile / mxGraphModel / mxCell 属性の完全参照、座標系、予約セル、検証ルール
references/style-reference.mdすべてのスタイルキーと許可値、頂点とエッジスタイルキー、シェイプカタログ、セマンティックカラーパレット
references/shape-libraries.mdすべてのシェイプライブラリカテゴリー (General、Flowchart、UML、ER、Network、BPMN、Mockup、K8s) とスタイル文字列
assets/templates/flowchart.drawioすぐに使えるフローチャートテンプレート
assets/templates/architecture.drawio4 ティアシステムアーキテクチャテンプレート
assets/templates/sequence.drawio3 アクターシーケンスダイアグラムテンプレート
assets/templates/er-diagram.drawioカラスの脚リレーションシップ付き 3 テーブル ER ダイアグラム
assets/templates/uml-class.drawioインターフェース + 2 クラス + リレーションシップ矢印付き列挙型
scripts/validate-drawio.py任意の .drawio ファイルの XML 構造を検証する Python スクリプト
scripts/add-shape.py既存のダイアグラムに新しいシェイプを追加する Python CLI
scripts/README.mdスクリプトの使用方法と例

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者
github
リポジトリ
github/awesome-copilot
ライセンス
MIT
最終更新
不明
GitHubで原本を見る →フィードバックを送る

Source: https://github.com/github/awesome-copilot / ライセンス: MIT

関連スキル

OpenAILLM・AI開発⭐ リポ 6,054

agent-browser

AI エージェント向けのブラウザ自動化 CLI です。ウェブサイトとの対話が必要な場合に使用します。ページ遷移、フォーム入力、ボタンクリック、スクリーンショット取得、データ抽出、ウェブアプリのテスト、ブラウザ操作の自動化など、あらゆるブラウザタスクに対応できます。「ウェブサイトを開く」「フォームに記入する」「ボタンをクリックする」「スクリーンショットを取得する」「ページからデータを抽出する」「このウェブアプリをテストする」「サイトにログインする」「ブラウザ操作を自動化する」といった要求や、プログラマティックなウェブ操作が必要なタスクで起動します。

by JimmyLv
汎用LLM・AI開発⭐ リポ 1,982

anyskill

AnySkill — あなたのプライベート・スキルクラウド。GitHubを基盤としたリポジトリからエージェントスキルを管理、同期、動的にロードできます。自然言語でクラウドスキルを検索し、オンデマンドでプロンプトを自動ロード、カスタムスキルのアップロードと共有、スキルバンドルの一括インストールが可能です。OpenClaw、Antigravity、Claude Code、Cursorに対応しています。

by LeoYeAI
汎用LLM・AI開発⭐ リポ 1,982

engram

AIエージェント向けの永続的なメモリシステムです。バグ修正、意思決定、発見、設定変更の後はmem_saveを使用してください。ユーザーが「覚えている」「記憶している」と言及した場合、または以前のセッションと重複する作業を開始する際はmem_searchを使用します。セッション終了前にmem_session_summaryを使用して、コンテキストを保持してください。

by LeoYeAI
汎用LLM・AI開発⭐ リポ 21,584

skyvern

AI駆動のブラウザ自動化により、任意のウェブサイトを自動化できます。フォーム入力、データ抽出、ファイルダウンロード、ログイン、複数ステップのワークフロー実行など、ユーザーがウェブサイトと連携する必要があるときに使用します。Skyvernは、LLMとコンピュータビジョンを活用して、未知のサイトも自動操作可能です。Python SDK、TypeScript SDK、REST API、MCPサーバー、またはCLIを通じて統合できます。

by Skyvern-AI
汎用LLM・AI開発⭐ リポ 1,149

pinchbench

PinchBenchベンチマークを実行して、OpenClawエージェントの実世界タスクにおけるパフォーマンスを評価できます。モデルの機能テスト、モデル間の比較、ベンチマーク結果のリーダーボード提出、またはOpenClawのセットアップがカレンダー、メール、リサーチ、コーディング、複数ステップのワークフローにどの程度対応しているかを確認する際に使用します。

by pinchbench
汎用LLM・AI開発⭐ リポ 4,693

openui

OpenUIとOpenUI Langを使用してジェネレーティブUIアプリを構築できます。これらはLLM生成インターフェースのためのトークン効率的なオープン標準です。OpenUI、@openuidev、ジェネレーティブUI、LLMからのストリーミングUI、AI向けコンポーネントライブラリ、またはjson-render/A2UIの置き換えについて述べる際に使用します。スキャフォルディング、defineComponent、システムプロンプト、Renderer、およびOpenUI Lang出力のデバッグに対応しています。

by thesysdev
本サイトは GitHub 上で公開されているオープンソースの SKILL.md ファイルをクロール・インデックス化したものです。 各スキルの著作権は原作者に帰属します。掲載に問題がある場合は info@alsel.co.jp または /takedown フォームよりご連絡ください。
原作者: github · github/awesome-copilot · ライセンス: MIT