excalidraw-diagram

excalidraw-diagram

カタログのスタブ — スキルの完全版：coleam00/excalidraw-diagram-skill

判定ツリー

1. 完全版のスキルはすでにインストールされていますか？

   • グローバル：f=~/.agents/skills/excalidraw-diagram/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • プロジェクト：f=.agents/skills/excalidraw-diagram/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • installed → スキルは excalidraw-diagram としてインストールされています。スキルを呼び出して続行します
   • pointer → 手順 2 に進みます

2. スコープを検出してからインストールします：

   [ -e ~/.agents/skills/excalidraw-diagram ] && echo "global" || echo "project"
   

   グローバル：

   npx skills add coleam00/excalidraw-diagram-skill --skill excalidraw-diagram -g -y
   

   プロジェクト：

   npx skills add coleam00/excalidraw-diagram-skill --skill excalidraw-diagram -y
   

   Claude Code： 会話を離れずにコマンドを実行するには、先頭に ! を付けたコマンドをチャットメッセージとして送信します。

注意事項

• 必要なもの： 必須のレンダリング・検証ループを実行するための uv（Python）と Playwright Chromium（cd .claude/skills/excalidraw-diagram/references && uv sync && uv run playwright install chromium）。このスキルではプロジェクトパス .claude/skills/excalidraw-diagram/references がハードコードされているため、レンダリング手順を機能させるにはプロジェクトスコープにインストールしてください（-g は使わないでください）
• ライセンス： リポジトリに LICENSE ファイルはありません

インストール後の呼び出し

• スキル名：excalidraw-diagram
• 起動フレーズ：「excalidraw diagram」、「excalidraw」、「diagram from description」

機能

自然言語の説明から .excalidraw JSON ファイルを生成します。図は「視覚的に論証する」ように設計されており、図形は表現する概念を反映します（1 対多には扇状の分岐、順序にはタイムラインなど）。また、実際のコードスニペットやペイロードなど、根拠となる成果物も含みます。レンダリング・表示・修正のループ（Playwright でファイルを PNG にレンダリングし、エージェントが確認してレイアウトの問題を修正する）を通じて、各図を納品前に検証します。色とブランドスタイルはすべて references/color-palette.md にまとめられているため、このファイルを編集するだけで、すべての図の外観を変更できます。出力は編集可能な .excalidraw ファイルです。

使用しない場合

• uv と Playwright のツールチェーンを使わない手軽なアイデア出しのスケッチには、より軽量な hand-drawn-diagrams または excalidraw-agents365 を使用してください
• コンセプト図ではなく画面のワイヤーフレームには、wireframe-skill を使用してください