マーカースケッチ は何をしますか？
アイデアをマーカースケッチに変換します。太くて少し震えた黒い線、ずれたストライプ入りのグレーの塗りつぶし、グレーのドロップシャドウ、短い手書きテキスト、ドット方眼紙が特徴です。スタイルは固定コア（assets/template.svg、assets/glyphes.svg）に存在し、思考は常に同じプロトコルに従うため、毎回同じレンダリング結果が得られます。記憶に頼って再描画することはなく、すべてを組み立てます。
パスと依存関係
コマンド内では、${CLAUDE_SKILL_DIR} はこのスキルのディレクトリです（Claude Codeが自動で置き換えます）。claude.aiで変数がそのまま表示される場合は、スキルディレクトリから実行環境にコピーされた相対パス（scripts/compose.py）を使用します。作業ファイル（draft.svg、croquis.svg）は作業ディレクトリに書き込まれ、スキルディレクトリには決して書き込まれません。
依存関係：compose.pyを実行するにはPython 3で十分です（テキストは埋め込みフォント付きの<text>として保持）。fonttools はテキストをパスに変換し（--outline、どこでも同じレンダリング）、playwright とChromiumはコントロール用のPNGを生成します（render.py）。インストール：pip install fonttools playwright && playwright install chromium。依存関係が不足していてインストールできない場合は、SVGを提供し、ビジュアルチェックが行われなかったことを伝えてください。
1. 10秒でモードを選択
| 状況 | モード | 出力 | 目標時間 |
|---|---|---|---|
| 質問や図解の要求、回答を図解 | スケッチ（デフォルト） | 1つのSVG | 1回の生成 |
| 会議、ワークショップ、口頭でのやり取り、「今言ったことを見せて」 | ライブ | 非常に読みやすい16:9のSVG、やり取りのたびに修正 | 修正ごとに数秒 |
| 高密度な図（10オブジェクト以上）、多数のリンク、レンダリングの制御が必要 | ワークショップ | スクリプトで構築されたSVG、コントロール用PNG | 約1分 |
| 「今、次、後で」、「現在、未来」、進化、トレンド、ドラッグ可能な要素 | インタラクティブ | 自己完結型のHTMLページ | 1つのJSON設定 |
迷った場合は、スケッチモードから始めてください。デフォルトでthree.jsを使用しないでください。ワークショップモードでのみ、不足しているシンボルを遠近法で作成するために使用します（references/glyphes.md、3Dセクション参照）。
2. 常に同じメンタルプロトコル（描画前）
以下の6つの質問に、順番に心の中で答えてください。これにより、才能ではなく一貫性が保証されます。
- 一言メッセージ。 読者は3秒で何を理解すべきか？このフレーズがタイトルまたは青色の注釈になります。
- 図のファミリー。
references/familles-diagrammes.mdから選択（15のファミリー：フロー、ループ、ツリー、集合、レイヤー、ハブ、ホイール、カーブ、マトリックス、ネットワーク、シーン、ワイヤーフレーム、ビフォー/アフター、タイムライン、ファネル）。 - 必要に応じてメタファー。 アイデアが抽象的（緊張、成長、負債、摩擦）な場合、その緊張を伝え、10程度のストロークで描ける物理的なオブジェクトを探します（
references/metaphores.md）。それ以外は、ファミリーに従います。 - 予算。 5～9オブジェクト、40％の余白、1～3語のテキスト（最大で1文のキャプション）。ライブモード：最大7オブジェクト。
- インクの階層。 黒＝メッセージの核心（最大1オブジェクトのみを黒で塗りつぶし）。グレー＝コンテキスト。青ペン＝注釈、コメント矢印、番号。描画ごとに1つの塗りつぶしアクセントカラー（イエローのハイライター、オレンジ、赤、スカイブルー、またはサンド）、表面積の10％未満、装飾目的では使用禁止。
- 構図。 左から右、上から下への読み取り、1つの焦点、ゆるやかなグリッド上での整列、注釈用のスペース確保。
その後、描画します。その後、チェックします（セクション8）。
3. 譲れないスタイルルール
- グラデーション、細く規則正しい輪郭、ぼやけた影は絶対に使用禁止。影＝グレーのコピーを(-7, 10)シフト。
- 3つのグレー＋黒＋紙：
f1明るい、f2中間、f3濃い、f4黒塗り。 - V字型の開いた矢印（クラス
arr、arrb、arrg）、角張った直角カーブの代わりにS字カーブ。 - グレーの太い点線フロー（
flow）、黒の小さな点線の境界線（dotk）、破線（dash）。 - テキスト：Patrick Handフォント、クラス
t(36)、tl(52、タイトル)、ts(27、ミニ)、tb(青)、tg(グレー)、tw(黒地に白)。フランス語は丁寧に：大文字のアクセント、œ、引用符「 」、長いダッシュは不使用、カーブしたアポストロフィ ’ 。 - 単語は読者の言葉。作り上げた専門用語や文は不使用。
- 絵文字、ブランドロゴ、著作権で保護されたキャラクターは不使用。
正確な数値、色、特殊なケースについては references/grammaire-visuelle.md を参照。
4. スケッチモード：直接描画
生の描画には内容のみが含まれます。スタイルコアは compose.py によって追加されます。
オブジェクトのパターン（4つのレイヤー、同じ id を共有）：
<use href="#a1" x="-7" y="10" class="sh"/> <!-- 影 -->
<use href="#a1" class="pp"/> <!-- 不透明な紙 -->
<use href="#a1" x="-2.5" y="2.5" class="f1"/> <!-- ずれた塗りつぶし -->
<g class="ink"><path id="a1" d="M300 300 L560 296 L556 420 L296 424 L302 296"/></g>
<text class="t" x="430" y="372">Idée</text>
角はわずかに突き出し（パスは正確には閉じません）、辺はピクセル単位で平行になることはありません。シンボル（人、窓、データベース、クラウド、虫眼鏡など）については、ライブラリを使用：
<use href="#g-person" x="540" y="260" class="cb"/> <!-- 色合いクラス: cb co cr cs ch c1 c3 c4 -->
カタログ：python3 ${CLAUDE_SKILL_DIR}/scripts/compose.py --catalog または references/glyphes.md。ビジュアルボード：references/planche-symboles.png。
組み立てとチェック：
python3 ${CLAUDE_SKILL_DIR}/scripts/compose.py draft.svg -o croquis.svg --outline # 紙、ドット、フィルター、テキストをパスに
python3 ${CLAUDE_SKILL_DIR}/scripts/check.py draft.svg # 予算、アクセント、シンボル、カラーアクセント
python3 ${CLAUDE_SKILL_DIR}/scripts/render.py croquis.svg # コントロール用PNG (Chromium)
compose.py のオプション：--paper cream|white|kraft|yellow|blue、--no-dots、--transparent（スライドに貼り付ける場合）、--size 1200x1200、--embed-font（テキストを編集可能に保つ）、--title。
コード実行なし（claude.ai でのシンプルな会話）の場合：assets/template.svg から <defs> ブロックをそのままコピーし、使用するシンボルのみを assets/glyphes.svg から貼り付け、次にコンテンツを <g id="drawing" filter="url(#wob)"> 内に配置します。ビジュアルチェックができなかったことを明示的に伝えてください。
5. ライブモード：会議、ワークショップ、口頭
最初の修正前に references/mode-live.md を読んでください。要点：
- 聞く、書き留めない。やり取りから3～7の要素を抽出：名詞はオブジェクト、動詞は矢印、「しかし」と「そうでなければ」は分岐、「前/後」は2列、「まず、次に」はフロー。
- 16:9フォーマット、テキストは最低36px (
t)、タイトル52px (tl)、tsは不使用。4メートル離れても読めること。 - 安定した位置。 修正のたびに、変更されたものだけを移動。同じIDと座標を再利用。チームが方向感覚を失わないようにする。
- 口頭での修正：「追加」、「接続」、「取り消し線」、「強調」（黒塗りまたはハイライター）、「クリーンバージョン」（再整列、最後に1回だけ）。
- プロジェクション：
python3 ${CLAUDE_SKILL_DIR}/scripts/live.py draft.svgは、ファイルが書き換えられるたびに自動更新されるページを開きます（fキーで全画面）。claude.aiでは、同じアーティファクトを再公開するか、修正のたびにSVGをPNGにレンダリングします。 - ライブでのワイヤーフレームとフロー：
references/wireframes-flows.mdのレシピを参照。
6. ワークショップモード：スクリプトで構築する高密度な図
10オブジェクト以上または多数のリンクがある場合は、scripts/sketch.py を使用して数行記述します。リンクはオブジェクトの端に自動計算され、S字カーブと開いた矢印が含まれます。
import sys; sys.path.insert(0, "${CLAUDE_SKILL_DIR}/scripts")
from sketch import Sketch
s = Sketch()
s.box("a", 260, 420, "Explorer", fill="f1") # (id, 中心x, 中心y, テキスト)
s.box("b", 800, 420, "Définir", fill="fh")
s.glyph("c", "g-flag", 1340, 400, "Livrer")
s.link("a", "b"); s.link("b", "c", label="valider")
s.perimeter(["a", "b"], "Discovery")
s.note(1330, 640, "on mesure ici", target="c")
s.save("draft.svg")
オブジェクト：box（形状 box、pill、oval、重なり合う集合にはオプション solid=False）、glyph、text、label、wf（ワイヤーフレーム要素）、badge（青い番号）。リンク：link(kind="ink|gray|flow|dash|blue|line")、arrow、perimeter、note、highlight、raw（自由なSVG）。完全な例は examples/build_examples.py にあります。
大規模なグラフを自動レイアウトするには、ELKまたはdagre（npm）で位置を計算し、その座標を sketch.py に渡します。
7. インタラクティブモード：時間の経過に伴う進化
リクエストが進化、連続する状態、「今、次、後で」、トレンドの変化、変革する組織、ドラッグ可能な部品について言及する場合：自己完結型のHTMLページを生成します。references/interactif.md（6つのパターン、設定のスキーマ、落とし穴）を読んでください。
原則：生の描画（要素に id がある）+ JSON設定（状態、要素ごとのキーフレーム：x y s r o d draw txt、レイヤー、ノート）：
python3 ${CLAUDE_SKILL_DIR}/scripts/compose.py draft.svg --interactive scenes.json -o page.html
python3 ${CLAUDE_SKILL_DIR}/scripts/render.py page.html --state 1 # 各状態をチェック
ページの機能：状態ボタン、タイムスライダー、再生、表示/非表示レイヤー、drag とマークされた要素のドラッグ＆ドロップ、テキストの名前変更のダブルクリック、要素に追従するリンク、状態のSVGエクスポート、レイアウトのJSONコピー、キーボード（矢印、スペース、f）。依存関係なし、オフラインで動作。例：examples/migration-organisation.html、examples/tendance-adoption.html。
8. 回答前のチェック
check.pyがエラーなし（既知のシンボル、長いダッシュなし、1つのカラーアクセントのみ）。- PNGレンダリングを確認：テキストが読める、重なりがない、影が見える、焦点が明確、十分な余白。
- テキストを読まなくても、図を見てメッセージが一文で理解できる。
- ビジュアルチェックが不可能な場合は、そのことを伝える。
9. 環境に応じて提供
- Claude Code:
croquis.svg（とPNG）を作業ディレクトリに書き込み、パスを伝える。ライブモードでは、live.pyを起動する。 - コード実行可能なclaude.ai: 生成、チェック、SVGとPNGを送信。インタラクティブページや保存・共有する図の場合は、アーティファクトとして公開する（最初にスキル
artifact-designを読み込み、タイトルは2～4語）。compose.py --interactiveで生成されたHTMLは既に自己完結型。 - コード実行なし: セクション4に従って完全なSVGを手書きし、チェックされていないことを明記する。
回答は常に日本語で行います。図のラベルも周囲のテキストも日本語で記述します。
10. リファレンス一覧
| ファイル | いつ読むか |
|---|---|
references/grammaire-visuelle.md | スタイルの正確な値、クラス、紙、限界ケース |
references/familles-diagrammes.md | 15のファミリーの選択と構成 |
references/metaphores.md | 抽象的なアイデアを可視化 |
references/glyphes.md | 47のシンボルカタログ、シンボルの追加、オプションの3D |
references/mode-live.md | 会議、ワークショップ、口頭 |
references/wireframes-flows.md | ワイヤーフレーム、ユーザーフロー、画面状態 |
references/interactif.md | アニメーションページ、状態、ドラッグ可能な要素 |
references/planche-symboles.png | 全シンボルのプレビュー |
examples/ | 6つのスケッチ（SVGとPNG）、2つのインタラクティブページ、brut/（ソース図と設定）、build_examples.py |