chalk-talk: 描いて説明する
あなたは手描きの説明を作成します。それは、短いテキスト（.chalk）で記述されたレシピであり、このスキルのプレイヤーがそれをストロークごとに、チャプターごとに、短いナレーションとともに描画します。また、実際の数量がある場合には、ユーザーが操作できる値も含まれます。あなたはレシピだけを書きます。scripts/build.mjsがそれをチェックし、すべてを内包した1つのHTMLファイルをビルドします。プレイヤー自身を書いたりコピーしたりしてはいけません。以下のパスは、このスキルのフォルダーからの相対パスです。
1. まず描く
一般的なリクエスト（「Xを描いて説明して」「Yの仕組みを描いて」）の場合、質問したり概要を示したりせず、描き始めてください。 描画に必要な3つのことを自分で決定し、それらを納品時に伝えてください。
- フック: アイデアを結びつける、日常の事物。観客が見たことややったことがあり、少数の図形で描けるもの（カードの請求書、バス停、カフェの行列）。
- 対象者: リクエストに指定されている場合、そうでなければ好奇心旺盛な大人。
- ユーザーが操作する値: アイデア内の実際の数量（月利、1分あたりの到着人数）、またはなし。
プレゼンテーション、説得、意思決定、ドキュメント化、または出来事の報告のための描画（ピッチ、クライアント向けアーキテクチャ、ポストモーテム）は、back-of-napkin（インストールされている場合）の担当です。このスキルは教えるためのものです。
授業、学生、講演、コースのための場合（「クラスのため」を参照）、リクエストが2つの異なる意味に取れる場合、またはユーザーが最初に計画を見たいと言った場合にのみ、まとめて一度だけ、不足しているものだけを尋ねてください。
描画は4つのパート（各チャプター1つ）で構成されます: フックを質問として（「なぜR$1,000がR$1,974になるのか？」）;分解する（実際のものをシンプルに、そしてその中に隠されているもの）;アイデア（ルール、フロー、または議論、そして動く値を添えて）;クロージング（結果のハイライトと、比較がどこで終わるか）。
2. レシピを書く
以下の行を含む <id>.chalk を書きます — これで通常の描画はカバーされます。事前に他のものを読む必要はありません。 用紙サイズは900×560（size 900x780でより高いボードになります）、xは右に、yは下に増加します。プロップの at はその位置（下端中央）を示します。端から30pxの余白を保ってください。# Title はチャプターを開き、> sentence はナレーションです。どちらも次のステップに進みます。ポイントは x,y（スペースなし）で、式は引用符で囲み、パラメーターや変数を使用できます。
これは1つのボードです: チャプターは決して用紙をクリアしません。 描かれたものはすべて残り、黒板のチョークのように、書く前にボード全体を計画し、各部分に独自の場所を与えてください — タイトルは上部に一度だけ、フックと実際のものは上半分に、アイデアはその下または横に、クロージングは残りのスペースに。同じ場所に2つのものを描かないでください。通常、12〜25ステップで十分です。
トップ:
title Juros compostos ↔ a fatura do cartão
locale pt-BR
size 900x560
param taxa "juros ao mês (%)" 1..15 step=1 = 8
switch atraso "pagar com atraso" off
var f = "1 + taxa/100"
learning goal "Ver o juro sobre o juro crescer mês a mês."
4つの learning 行 — goal（目標）、question（考えるための質問）、answer（根拠のある答え）、caveat（簡略化した点） — をすべて書き、locale をユーザーの言語に設定し、すべてのテキストをその言語にしてください。
人や物はプロップです: person（人）、person-sitting（座っている人）、person-pointing（指さす人）、house（家）、car（車）、bus（バス）、coin（コイン）、phone（電話）、document（書類）、server（サーバー）、bank（銀行）、cloud（雲）、queue（列）、desk（机）、computer（コンピューター）、clock（時計）、lock（鍵）、money-arrow（お金の矢印）、tree（木）、school（学校）、hospital（病院）、factory（工場）、truck（トラック）、cart（カート）、safe（金庫）、bulb（電球）、gear（歯車）、database（データベース）、robot（ロボット）、ship（船）、container（コンテナ）、warehouse（倉庫）、box（箱）、pallet（パレット）、shop（店）、shelf（棚）、field（フィールド）、cup（カップ）、function（関数）、api-gateway（APIゲートウェイ）、cache（キャッシュ）、cluster（クラスター）、board（ボード）、book（本）、pencil（鉛筆）。personは mood= として happy（幸せ）、sad（悲しい）、surprised（驚いた）、worried（心配）、idea（アイデア）を取ります。
person ana at 150,330 "Ana" mood=worried
text "R$ 1.000 viram quanto?" at 40,64 size=36
text "paga só o mínimo" right-of ana gap 16 align=start
ana thinks "e se eu atrasar?" side=above width=200
ana -> banco "paga" -> loja "repassa"
arrow 60,350 -> 840,350 color=#2E8F62 stroke=3
highlight 90,500 -> 810,500 thickness=24
座標を計算せずに配置する — アイテムが並んだり、連なったりする場合は、これらを優先してください。chain は何かを渡していくものです: 用紙全体に広がり、それぞれが次のものに結合され、必要に応じて長い矢印が付きます。
chain at 40,190 forward="o café desce" back="pedidos sobem"
field fazenda "fazenda"
truck caminhao "transporte"
cup cafe "cafeteria"
person voce "você"
row at 470,150 gap 14
repeat 3: coin size 44
repeat 3: coin at "100 + i*60",400 size 40
そのステップ以降、その場で動き続けるもの — spin（回転）、drive（ドライブ）、steam（湯気）、talk（話す）、pulse（パルス）、float（浮遊）、そして stop（停止）。動きが何かを伝える場合のみ（トラックが出発する、カップの上の湯気）、描画につき1〜2つ:。
animate caminhao drive
既製のアニメーション絵文字 — ユーザーが明示的に要求した場合のみ、かつ1レッスンにつき最大1つ（チョークではなく、洗練されたものです）: celebrate（祝う）、think（考える）、surprised（驚く）、ok、idea（アイデア）、time（時間）。at で中央配置。または ./file.json（ユーザーが提供したLottieファイル）をレシピの隣に置きます。ビルド時にファイル内に埋め込まれ、クレジットが付与されます。ファイルサイズは約340 KBから約610 KBに増加します（プレイヤーとアニメーションのため）。
lottie celebrate at 720,180 size=120
値に従う数値:
counter at 470,270 "1000*f^6" "R$ {v:0} em seis meses" size=34
bars box 90,320,440,180 values 1000,"1000*f^3","1000*f^6" labels hoje,"3 meses","6 meses" format="R$ {v:0}"
plot "1000*(1+taxa/100)^x" domain 0..12 range 0..4000 box 480,120,360,240
when atraso:
text "multa de 2%" at 600,100 color=#C8442C
プロップで描けないもの: 0～100のグリッド（整数、yは下向き。50,100に配置）で作成し、その名前を使用します:
define xicara
polygon 24,48 76,48 70,90 30,90 fill=#FFFFFF
curve 74,56 90,62 72,80
xicara minha at 450,300 "minha xícara"
ユーザーの待機、およびクイズ（クラス向け）:
pause ask "Quanto vai virar a fatura em seis meses?"
quiz "Se a taxa dobra, a fatura em seis meses…"
* mais que dobra o juro -- é juro sobre juro
- só dobra -- isso seria juro simples
守ること: 1つのボードに8〜40ステップ。アイデアが変わるときだけ短いナレーション。タイトルは36〜44、ラベルは24〜34、22未満は不可。色はグラファイト（デフォルト）、#2F5BEA、#C8442C、#2E8F62、#8C8578、マーカー #FFE45C、アクセントは最大3つ。事実と数値は正確に — 引用や数字をでっち上げないこと。その他のステップ（円、曲線、カード、テーブル、軸、タイムライン、ブレース、ノート、移動…）は references/text.md にあります。それぞれの描画内容は references/recipe.md にあります。上記にないステップが必要な場合、またはビルドのメッセージでエラーが解決できない場合にのみ、それらを開いてください。
ユーザーが Mermaidダイアグラム を提供した場合、それをそのまま保持し、%% title …、%% # chapter、%% > narration 行を追加して <id>.mmd として保存します（references/text.md に方法が示されています）。レシピはユーザーが作業しているフォルダーに保存するか、ユーザーがダウンロードするファイル用の出力フォルダーが存在する場合（claude.aiでは /mnt/user-data/outputs）、そこに保存します。
3. ビルドとチェック
node scripts/build.mjs <id>.chalk
これにより、レシピの隣に <id>.html が書き込まれ、以下のメッセージが出力されます:
✗ text: line N …または✗ contract: …（exit 1、何も書き込まれない）: メッセージに従ってその行を修正します。その下にある例を参考にしてください。! review …（exit 3）: 描画されましたが、何かが用紙からはみ出している、テキストが別のテキストを覆っている、または線がテキストと交差しています。修正し、--snapshotsフラグを付けて 再度ビルドします。これにより<id>.snapshots/<id>.contact-sheet.pngも書き込まれます。これはすべての値の設定における各チャプターのスクリーンショットです。その画像を開き、レビューで指摘された箇所と、読みにくい箇所（認識できない図、混雑したコーナー、小さすぎるテキスト）を修正します。✓ review、または• review … the page checks itself when opened（ここにブラウザはありません）: 完了。• figures … defined: レシピがdefineでフィギュアを作成しており、レビューはそれを測定しただけです。コンタクトシートを一度開き、フィギュアが意図したものとして読めるか確認してください。✗ review not checked: …: 完了しましたが、描画がチェックされていないことをユーザーに伝えてください。
修正は最大 2 ラウンドまで。その後、納品し、残っている問題を平易な言葉で伝えてください（「15% でラベルがタイトルに触れています」）。
複数のレッスン（コース）: 各レッスンに1つのレシピを作成し、まとめてビルドします — node scripts/build.mjs one.chalk two.chalk --out course.html --title "The course"。README用（画像のみが必要な場合）: リクエストがあれば、node scripts/build.mjs <id>.chalk --svg で <id>.svg（自己描画する画像）を生成します。レッスン自体は .html のままです。
4. 納品
.html のパス（または、ユーザーがファイルをダウンロードする環境ではファイル自体）を提示し、1行で あなたが選んだものと変更の提案 を伝えてください: 「私はこれをクレジットカードの請求書に結び付けました。金利を勉強したことのない人を対象に、月利を操作できるようにしています。別のフック、別の対象者、または何か変更はありますか？」 その後、1文で何を見るべきかを伝えてください（「Nextを押してください。チャプター3で、レートを動かしてみてください」）。ファイルはオフラインで開き、チャプター、用紙の横に値が表示され、PNG、SVG、GIF、WebMのダウンロードが可能です。メールやプロジェクターで使用できます。
プレゼンテーション用（講演、プロジェクターを使用する授業）: --present フラグを付けてビルドします。ページは1チャプターずつ全画面で開き、最初のキーとともにスピーカーノートが表示されます。クリッカーのPageDownで次に進みます。PowerPoint用（リクエストがあった場合）: --pptx フラグを付けます（チャプターごとに1スライド。steps は描画をクリックごとに成長させ、video は各チャプターの描画アニメーションを埋め込みます）。ナレーションはスピーカーノートとして埋め込まれます。
クラスのため
描画がクラス、学生、講演、またはコースのためのものである場合、1つのメッセージで最初に尋ねてください: 最大3つのフック（効果的な順に）、それぞれにその理由（references/hooks.md）、正確な対象者、そして学生が操作できる可能性のある数値を示します。既に言われたことは尋ねないでください。その後、4部構成のアウトラインを数行で示し、ゴーサインを待ちます（「pode」、「go」）。レシピには theme chalkboard、質問に答えるパートを開く pause ask、そして最後に quiz が追加されます。
コード実行なし（代わりにアーティファクトを使用）
コードは実行できないがHTMLアーティファクトを表示できる場合、レシピをこの小さなページに配置し — それ以外は何も入れずに — 表示します。プレイヤーはCDNからロードされ、レシピ自体をチェックします:
<!doctype html>
<meta charset="utf-8">
<title>LESSON TITLE</title>
<script type="text/chalk-talk" id="chalk-recipe">
THE RECIPE AS TEXT
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/player.js"></script>
ページがレシピを開けなかったと言った場合、指定された行を修正します。
後で変更する
「矢印を青くして」、「2人目の人を追加して」、「代わりに5%を使って」: 要求されたものだけを変更し、残りはそのままにして、再度ビルドし、何が変わったかを伝えてください。異なるフックや対象者は新しい描画になります。
絶対にしてはいけないこと
assets/やscripts/contract.mjsを決して編集しないでください。これらは生成されます。- レシピにHTML、リンク、スクリプト、画像を決して入れないでください。テキストはプレーンテキスト、色は16進数または名前です。
- レシピを生成するスクリプトを決して書かないでください。自分で書いてください（式と
repeatが算術を処理します）。 - コード実行がない場合、プレイヤー、SVG、または描画の画像を決して手書きしないでください。上記の小さなページを使用してください。コードを実行できず、アーティファクトも表示できない場合は、その旨を伝えてレシピを提供してください。