reimagine-it

/reimagine-it

バンク： references/notes.md · references/forms.md · references/webpage-craft.md (ウェブページフォームの場合のみ) · references/craft-floor.md (すべてのウェブページ出力が満たすべきインタラクション契約です。実行のたびに読み込んでください) · references/review.md (§5.d の名前付きオブジェクトの正確性とクローンスキャンです。検証のたびに読み込んでください) · references/forms/ (ウェブページ以外のフォーム用パック：pdf、document、slides、universal) · references/domains/ (ユーザーがドメイントークン（artistic / dashboard / photography / cinematic（別名 3d、webgl） / ecommerce / landing / portfolio / infographic）を指定した場合のみ) · references/modifiers/ (ユーザーがモディファイア（glassmorphism / bento / neon / brutalism / neumorphism / handdrawn）を指定した場合のみ) · references/locks/ (--ref <name> の指定時に読み込み) · references/research/web-craft-2025.md (詳細なソースパック — Awwwards SOTY のスタックスキャン、Rauno/Emil のクラフトフロア、Lupi/Fragapane のデータヒューマニズム、Feixen/Weingart/Troxler の印刷文法、Apple AIDA のシネマティック表現、ビュー遷移、スクロール駆動アニメーション、キネティックタイポグラフィ、サウンド、ネオブルータリズム — 一度読み込み、レポートで引用してください) · references/research/infographic-craft.md (15 のソースからなるインフォグラフィック用パック — Cleveland–McGill、Tufte、Bertin、ISOTYPE、Minard/Snow、Cairo、Lupi、FT Visual Vocabulary、USWDS、WCAG charts、InfoAlign layouts — フォームまたはドメインが infographic の場合に読み込み) · examples.md

/reimagine-it は コンテンツ由来のデザイン エンジンです。提供される製品は HTML を読み込み、HTML を出力します。ファイル内にすでにある見出し、事実、名前、日付、数値、リンク、メールアドレス、色を抽出し、17 個のトークンのいずれか（または --auto）を使ってスタンドアロンのページを生成します。デフォルトではオフラインで出力します。

CLI が PDF、PPTX、DOCX、MOBI、または「どんなファイルでも」再デザインすると主張してはいけません。ユーザーが別の形式を指定した場合は、まず HTML に変換するか、HTML でラップしてからエンジンを実行します。その後、ユーザーが依頼し、ツールチェーンが利用可能な場合に限り、ホストツールでエクスポートします。この追加手順はエンジンの機能ではなく、ホスト側での変換として報告してください。

このファイルと同じ場所に local.md が存在する場合は、このスキルの後に読み込んでください（ホストの指示、組織、パス）。公開インストールには local.md はありません。

一度だけ、次のように伝えてください："Running /reimagine-it."

エンジン — CLI を実行し、ページをでっち上げない

提供される製品は CLI です。/reimagine-it はそのオーケストレーションであり、HTML を手作業で作成する許可ではありません。

1. ソースが HTML でない場合は、まず HTML にラップするか、HTML に抽出します。エンジンが PDF、PPTX、DOCX を取り込んだと主張してはいけません。
2. 対応するコマンドを実行し、生成されたファイルを使用します：

npx reimagine-it --auto -i page.html -o redesign.html
npx reimagine-it -i page.html -t infographic -o poster.html
npx reimagine-it variations -i page.html -n 3 -o review/
npx reimagine-it extract -i page.html
npx reimagine-it audit redesign.html

CLI はソースガードを機械的に適用します。--output のパスがソースファイルと同じ場所を指す場合、書き込みを行わずに終了コード 2 で終了します。既存の出力ファイルの置き換えも拒否するには --no-clobber を指定してください。エージェントや CI のループで、レビュー済みの成果物を上書きしたくない場合に便利です。自動モードでは、成果物の隣にアドバイザリ実行ロックも取得するため、同じ出力先を指定する別のエージェントは、書き込みが交錯する前に速やかに失敗します。クラッシュした実行は古いロックの検出によって自動復旧し、--force で上書きできます。

3. 生成された成果物を開いてください。その内容に基づいて報告してください。npx reimagine-it を実行できない場合は、REIMAGINED: partial と報告し、具体的な阻害要因を明記してください。モデルが作成したページで代用してはいけません。

カテゴリ（選ぶのはあなた · 判断するのはエージェント）

省略可能なトークンです。自由に組み合わせてください。 トークンはあなたが選びます。質問、フォーム（未設定の場合）、変更内容、ストレッチ目標はエージェントが決めます。

カテゴリ	ユーザーが選択	エージェントが判断
(なし)	デフォルトです。ヒアリングはありません。	推論し、固定し、形を定め、構築します。
自動 — auto / --auto	通常の再デザインの流れをツールに任せます。	根拠を抽出 → 一貫性のある形式を順位付け → 候補を生成 → 検証 → 最も優れた成果物を返します。ソースは読み取り専用のままです。
interview	構築前に相談します。	質問の内容、推奨される回答、終了するタイミングを判断します。
形式ファミリー — code cli protocol demo prose product architecture experiment	その形式ファミリーを強制します。	メモをどのように落とし込むかを判断します。
ビジュアル形式 — svg 3js infographic canvas html webpage simulation	ビジュアル形式を強制します。	その媒体の中で仕上げます。トークン infographic は references/domains/infographic.md も読み込みます（ダッシュボードではなく、主張を伝えるポスターです）。トークン svg / 3js はデフォルトで alive-micro を採用します（事実に結び付いたループを2～4個追加して見栄えを高めます。短い still を指定すると静止します）。トークン simulation はこのソースにすでにある事実を再現するプレイ可能なモデルを生成します（デフォルトでは最初の事実で一時停止します。ネストされた短いスパンを調べられます。ガターに入力してください）。これらはどれもテキサス風のスキンではありません。残った語句はレンズとして扱います。
ホスト形式への変換（CLI トークンではありません） — pdf document slides	ユーザーが依頼し、かつローカルツールが存在する場合に限ります。	HTML に変換／ラップ → エンジンを実行 → 必要に応じてエクスポートします（Weasyprint、python-docx、python-pptx）。CLI はこれらの形式の読み書きを行いません。
ドメインの美的スタイル — webpage の後に続く2語目：artistic dashboard photography cinematic（3d、webgl）ecommerce landing portfolio infographic	Web ページの美的スタイルを強制します。	references/domains/.md を読み込み、webpage-craft の基盤を拡張します。cinematic は3Dフロアをインラインの WebGL2 にアップグレードします。infographic は統計ポスターです（共通スケールのエンコーディング＋ISOTYPE＋データ表）。運用ダッシュボードではありません。
修飾子 — 3語目、または --style <name>：glassmorphism bento neon brutalism neumorphism handdrawn	ドメインに UI/UX 修飾子を重ねます。	references/modifiers/.md を読み込みます。修飾子を適用すると、該当するカットリスト項目が免除され、独自の必須要件が追加されます。
フォントの上書き — --font "Family, Fallback, generic"	ディスプレイ／本文のフォントファミリーを固定します。	完全なフォントスタックを構築し、読者の環境に指定ファミリーがない場合も適切に代替します。--allow-fetch も指定しない限り、実行時に Web フォントを取得してはいけません。
サウンド — --sound [tier]（ambient / feedback / full、デフォルトは feedback）	今回の実行でサウンドデザインを有効にします。デフォルトではオフです。	Howler.js のスプライトパックを読み込み、効果音の階層を適用します（§ craft-floor #7）。画面上にミュートと音量のコントロールを表示し、自動再生は行わず、すべての合図に視覚的な代替手段を用意します。いずれかが欠けている場合は partial にダウングレードします。
固定／再利用 — lock <path> [as <name>] · --ref <name> · --list-refs	生成済みの出力を再利用可能な参照として保存するか、参照を適用します。	パレット＋フォントスタック＋モチーフ＋動き＋3D の特徴を references/locks/.md に抽出します。--ref の場合は、そのパックをドメインとして読み込みます。
--notes	4つのメモを表示します。	どの4つかを判断します。
--plan-only	ファイルは作成しません。	固定＋メモ＋形式＋伸長を行います。
--full	ヒーローの後に追加の仕上げを行います。	アイデアに役立つ変更を1つ加えてから、出力します。
--variants N	同じブリーフから1つではなく、異なる出力を N 個生成するよう指定します。	それぞれ異なる「奇妙さを加える」手法を N 個選び、.../var-1/、.../var-2/、…に書き込みます。
--seed <n>	クリエイティブなバリエーションのサンプルを固定し、2回の実行で同じ選択結果になるようにします。デフォルトでは実行ごとに新しく選択します。	シードを使って、バリエーションの各軸から1つずつ選択肢を決定論的に選びます。
--variant a|b|c|...	名前付きシードの短縮形です（a = 最初の標準選択、b = 2番目、…）。	生成済みの特定の選択結果を再現します。ロックに便利です（--variant b --lock）。
<brief>	既知のトークンの後に残った任意の語句です。オープンな語彙であり、テーマカタログではありません。	レジスター、背景、モチーフ、パターン、文字、動きに対するクリエイティブなレンズとして扱います。それでも文脈を確認してください。ブリーフはソースの事実に取って代わるものではありません。
監査 — audit	HTML ファイルに対して決定論的な品質チェックを実行します。	npx reimagine-it audit を実行します。LLM も API キーも使わず、タイポグラフィ、パレット、動き、コンテンツ、構造、パフォーマンスにわたる19項目のチェック（src/audit.js）を行います。Python の scripts/audit.py は CI 用のミラーです。失敗がゼロであることが必須です。--verbose と --json に対応しています。
自由に組み合わせてください。既知の形式／ドメイン／モディファイアのトークンはパックを読み込みます。それ以外の単語はすべて保持され、反映されます。 使用できる残りの単語の一覧はありません。

/reimagine-it auto
/reimagine-it webpage cinematic

/reimagine-it webpage infographic
/reimagine-it infographic
/reimagine-it infographic <any leftover words>
/reimagine-it svg
/reimagine-it audit
/reimagine-it 3js
/reimagine-it simulation
/reimagine-it webpage artistic glassmorphism --font "Playfair Display, serif"
/reimagine-it lock gold/domains/cinematic/after.html as house-cinema
/reimagine-it webpage --ref house-cinema
/reimagine-it webpage bento --variants 3

interview が選ばれていない場合、インタビューは行いません。 求められていないのに質問攻めにしないでください。「どんなスタイルにしますか？」とも尋ねないでください。インタビュー中も同様です。

すべてのモードで、成果物を必ず提出してください（--plan-only の場合を除く）。雰囲気を並べただけでは成果物とは言えません。

厳守事項

1. このファイルを読みます。references/notes.md と references/forms.md を読み込みます。
2. コンテキストを確認します。インタビューを行うのは interview が選ばれた場合のみです。
3. 隣接可能性を示します。すでにある部品に加え、ユーザーが依頼していない組み合わせを一つ挙げます。
4. 4つのノートを非公開で選びます（デバイス・飛躍・技法・効果）。雰囲気を表す言葉ではなく、具体的な変更で答えます。
5. 主役となる形式を決めます。その形式に対して CLI を実行します（-t または --auto）。代わりのページを一から作成しないでください。
6. ユーザーが範囲内だと知らなかった一つの挑戦的な案を示します。簡単なら実装し、そうでなければ次に実行する正確なコマンドを提示します。
7. notes.md の禁止事項を守ります。「すごい」などの表現は使いません。プロンプトの粗雑な出力は禁止です。映像の上に流れる TED 風の説明も禁止です。
8. 有料の処理に関する制限：コード、SVG、HTML、PDF、docx、pptx、ローカルデモは無料です。課金対象となる画像／動画／モデル API を使う前に確認してください。
9. 指示がない限り、コミット／プッシュはしません。
10. REIMAGINED: shipped | partial | blocked の形式で報告します。

手順

REIMAGINED Progress:
- [ ] 0. Mode + categories parsed (leftover words kept as brief) + context sniffed
- [ ] 0.5. Interview only if that category was chosen
- [ ] 0.75. Adjacent possible named (private)
- [ ] 0.85. Anchor list — extract 3–5 concrete nouns/proper nouns/dates/verbs from the source; every plate must map back
- [ ] 1. Four notes chosen (private)
- [ ] 2. Hero form routed (unless user forced one)
- [ ] 2.4. Variation sample picked (avoid previous draw; pin if --seed / --variant)
- [ ] 2.5. Modifiers / font override / --ref loaded if present
- [ ] 2.6. Output is standalone HTML (host conversion only if the user asked and the toolchain exists)
- [ ] 2.7. Craft floor loaded (references/craft-floor.md) — every rule enforceable before render
- [ ] 3. Hero artifact written (or N variants if --variants)
- [ ] 4. Stretch named (and built if cheap)
- [ ] 4.5. --full plus-pass if requested
- [ ] 5. Verify with evidence (functional + visual + craft-floor scan)
- [ ] 6. Report REIMAGINED: shipped | partial | blocked

Auto モード — 自動デザインループ

auto は、人に依頼するような形式で実行します。ユーザーがコマンドを並べるのではなく、コンテキストを提示します。ソースから最適な形式を推測し、筋の通った候補を最大 3 つ生成して、仕上がりの基準を満たしているか確認します。その後、最も優れた単体で成立する成果物に加え、選択したトークン、シード、根拠、却下した候補を返します。ソースを上書きしてはいけません。事実を捏造してはいけません。ホストがプレビューを表示できる場合は、選択した成果物を表示し、比較用に他の候補も確認できるようにします。

Auto は、特定のモデルに依存しないよう意図的に設計されています。エージェントホストは、返されたプランを構造化コンテキストとして使用したり、ビジュアルレビューをサブエージェントに委任したり、特定モデル向けのレンダラーを用意したりできます。コアエンジンは API キーがなくても決定論的かつ安全に動作します。--auto は CLI で明示的に指定する場合と同等です。単独の /reimagine-it は、従来どおりコンテキストからワークフロー全体を推測して実行します。

0. トークンの解析（自由形式のブリーフ — 単語を削除しない）

このスキルは、クリエイティブエンジンです。ユーザーは /reimagine-it の後に、どんな内容でも入力できます。一致するパックがなくてもかまいません。未知の単語を、一覧にあるドメインへ自動修正してはいけません。「どんなスタイルにしますか？」とも尋ねないでください。

1. 空白で分割します。フラグとその引数を処理します（--seed、--style、--font、--ref、--variants、--sound、--notes、--plan-only、--full、--variant、--allow-fetch、--ask-format、--list-refs）。lock … as … は独立したコマンドとして処理します。
2. 残りの単語から、既知の形式、ドメイン（3d／webgl を含む）、またはモディファイアと完全一致するものを分類します。
3. 残った単語をすべて、順序を変えずに結合してブリーフにします。ブリーフが空でもかまいません。複数単語のブリーフを使うことが目的です。
4. 既知のモディファイアもパックを読み込みます（neon、handdrawn など）。その前後に残った単語はブリーフに含めます。

ブリーフはレンズであり、新しいコンテンツでも、テーマを限定する一覧でもありません。背景、モチーフ、パターン、文字、動きに適用します。ソースの事実はそのまま保持します。レポートの Brief: 行に記録します（該当しない場合は none）。

0. コンテキスト確認（省略しない）

並行して、手早く次を確認します。

• ワークスペースのルート、README、存在する場合は GOAL.md（読み取りのみ。上書きしない）
• リポジトリの場合は git status -sb
• 分かる場合は、開いているファイル／最近表示したファイル
• スラッシュの後にユーザーが入力したテキスト
• リポジトリがすでに参照しているドメイン関連ファイル（CONTRIBUTING、プロトコルのドキュメント、失敗しているテスト）
• ユーザーが指定した対象ファイル（.html を優先します。PDF／PPTX／DOCX が指定されている場合は、エンジンを呼び出す前に HTML でラップするか抽出します）

1文のロック：これは何か、ユーザーに何が起きるか。

コンテキストが空（空白のチャット、空のフォルダー）で、interview も指定されていない場合でも、成果物を提出してください。フォルダー名と README があればその内容をもとに考案します。ブリーフを求めて作業を止めないでください。

0.5 インタビューカテゴリー（選択されていない場合はスキップ）

interview を通過した場合のみです。カテゴリーはあなたが選び、質問はエージェントが決めます。

• まず調査し、コンテキストからわからないことだけを尋ねます。
• 質問は一度に1つずつにします。回答を待ちます。複数の質問を一度にすると、戸惑わせてしまいます。
• 各質問には推奨回答を含めます。そのまま採用することも、置き換えることも、just go と答えて残りをスキップし、作成に進むこともできます。
• 質問はノートバンク（デバイス／飛躍／技法／効果）から選びます。「どんなスタイルがいいですか？」や「何か好みはありますか？」とは尋ねません。
• コードベースから答えがわかる場合は、質問せずに Read/Grep を使います。
• 質問は最大4つにして、その後は作成に進みます。インタビューをいつまでも続けないでください。

0.75 隣接可能性（非公開）

このリポジトリまたはスレッドにすでにある要素から、まだ使われていない組み合わせを1つ挙げます。それを飛躍の候補にします。ムードボードを大量に並べないでください。

変化の手法として、SCAMPER の文字を1つ選びます（置換、結合、応用、修正、転用、削除、逆転）。チャットで7つすべてを試さないでください。

0.85 アンカーリスト（非公開。ただしすべてのプレートをいずれかに対応させる）

ソースから、具体的なアンカーを3～5個抽出します。固有名詞（人物、場所、ブランド）、日付、数字、動作を表す動詞、物理的な物体、引用された語句が対象です。これらは、デザインが伝えるべきコンテンツの単位です。

出力に含まれるすべてのプレート、タイル、セクション、チャート、ヒーローユニットは、少なくとも1つのアンカーに対応している必要があります。対応しないものは削除してください。blank、sample という語や、代替テキストの埋め草を使ったプレースホルダータイルは作らないでください（禁止事項を参照）。

アンカーからプレートへの対応関係を非公開で（またはローカルの台帳に）記録します。レポートの Anchors: 行に記載して、デザインがソースから逸れていないことをユーザーに示してください。

例 — テキサスのノートをソースとする場合：アンカー = {Jordan Rivers、Big Bend、1836、Post Office、west Texas sunset}。C のシェーダーヒーロー → 夕焼け、活版カード #01 → 1836、地図プレート → Big Bend、キャプション → Rivers、キッカー → Post Office。すべてのユニットがアンカーに役立つようにします。

1. 4つのノート（非公開）

references/notes.md から、デバイスを1つ、飛躍（広大さと受容、美しさ、壮大なアイデア、小さな自己）を1つ、技法を1つ、効果を1つ選びます。変化の手法は、カット、プレート、マグネット、伏せたタイトル、初回の演出、API の形、デモなどを具体的に指定します。「シネマティック」のような抽象的な表現は避けてください。

ノートバンクをチャットに大量に貼り付けないでください。

2. フォームの振り分け

カテゴリによって形式が強制されている場合を除き、references/forms.md に従ってください。

Webページ／HTML／インフォグラフィック → ファイルを書く前に references/webpage-craft.md を読み込んでください。ユーザーがドメイン（2番目の単語）を追加した場合は、references/domains/ にある該当するパックも読み込んでください。トークン infographic は、視覚形式としてもドメインとしても、常に references/domains/infographic.md と references/research/infographic-craft.md を読み込みます。描画する前に、このソースから構造（リスト／順序／階層／比較／値／関係）を確定してください。ユーザーがモディファイア（3番目の単語または --style）を追加した場合は、references/modifiers/ にある該当するパックも読み込んでください。残った単語はブリーフ（ステップ 0）です。それに従い、パックファイルは必要ありません。ユーザーが --ref <name> を指定した場合は、ドメインの代わりに（またはドメインに加えて）references/locks/.md を読み込み、ロックをドメインパックとして扱ってください。

SVG → references/forms/svg.md を読み込んでください。フィールドにマークを置き、ガターにテキストを置きます。パス上にラベルを置かないでください。Alive-micro のデフォルト： マークに 2～4 個のループ（weenie-breathe ＋ 1 つの fact-loop ＋ hover の組み合わせ）。ブリーフに still ／ no-motion ／ print が含まれる場合は、ループを停止します。残った単語はレンズです。別のソースに Texas gold weenie を複製しないでください。

3js → references/forms/3js.md を読み込んでください。HUD 用の帯を確保します。シルエットはこのソースから取ります。プリミティブのデモではありません。Alive-micro のデフォルト： 2～3 個のメッシュにアイドル時の動きを加えます（weenie-turn、ソース曲線に沿った流れ、sun-breath）。さらにカメラのイージング／ワイドドリフトを加えます。ブリーフに still が含まれる場合は、カメラの位置を固定し、メッシュの動きを停止します。残った単語はレンズです。別のソースに Texas gold room を複製しないでください。

simulation → references/forms/simulation.md を読み込んでください。このソースのシーケンス（年、日、ハンドシェイクの手順など、対象に合わせたもの）を再現する、操作可能なモデルにします。テキストはガターに置き、マークはフィールドに置きます。入れ子になった短い区間は検査できるようにします。デフォルトでは、最初の事実の時点で一時停止します。残った単語はレンズです。別のソースに Texas 1836–1995 clock を複製しないでください。

PDF／ドキュメント／スライド → ホスト側でのみ変換します。 次の方法を優先してください：HTML として抽出またはラップし、npx reimagine-it を実行して、HTML を納品します。ユーザーがその形式を明示的に求めており、かつ Weasyprint／python-docx／python-pptx などがマシンにある場合に限り、references/forms/ を読み込んでください。これらのパックを CLI トークンとして提示しないでください。

Webページ出力全般 — ドメイン／モディファイア／ロックの有無にかかわらず、実際の役割を果たすヒーローサイズのインライン SVG、常時 3 つの動く要素、静止画でも 3D と認識できる表現を必ず含めてください（回転 ≥ 12° ＋ 影のぼかし ≥ 24px、または translateZ ≥ 30px ＋ 実際の影、またはインライン WebGL2）。スクリーンショットでこの 3 つすべてを証明できない場合、その形式を採用するだけの再設計はできていません。例外 — infographic： ポスターは正投影のままにします（紙のドロップシャドウのみ。ボードに rotateX を適用しないでください）。

HTML 以外へのエクスポート — 任意であり、デフォルトで主張してはいけません。ユーザーが PDF／PPTX／DOCX を求め、ツールチェーンが存在する場合は、該当する形式パックに従ってください。それ以外の場合は HTML を納品し、不足しているツールを明記してください。

形式は大きな飛躍に従う：

• このコードベースに機能がある場合 → ここで実装してください（簡単な証明も添えます：テスト、CLI、fail-demo）。
• 見るためのツール（インフォグラフィック、weenie、canvas、解説用 HTML、単発の deck／PDF） → <workspace>/reimagined/<yyyy-mm-dd>-<slug>/。
• 製品機能を記念品のように reimagined/ 内に隠してはいけません。

2.4 クリエイティブなバリエーション（繰り返さない）

呼び出し元が --seed <n> でシードを固定した場合（または名前付きの --variant を選択した場合）を除き、/reimagine-it は同じソースに対して同じ出力を 2 回返してはいけません。実行のたびに、以下の軸に沿って新しい組み合わせをサンプリングします。同じブリーフから、決まりきった「公式」回答ではなく、実際に幅のある表現を生成します。

軸	選択肢（エージェントが選択。コンテンツによって候補を絞り込みます）
読者向けの文体	ページ全体の語り口となる視点です。テンポや声の調子、ほかの軸の組み合わせ方を決めます。dashboard-live（Bloomberg／プロダクトページのようなテンポ）、editorial-drift（雑誌の特集記事、意図的な間）、field-guide-quiet（Colossal／Feixenの静かな自信）、cinematic-shader（Cartier／Lando Norris――画面いっぱいのシェーダーを使ったヒーロー、音声は任意）、neubrutalist-blunt（太い境界線、くっきりした影、鮮やかな配色、グラデーションなし）、poster-jazz-improv（Troxler――単一の文字サイズ、左から右以外の読み順、高い非対称性）、data-humanist（Lupi／Fragapane――アイデンティティそのものがデータ。ソースから独自のビジュアルアルファベットを作成）。
背景／パレットの重み付け	コンテンツから導かれるパレットは、通常約4色相で構成されます（例：テキサスのノート → ネイビー・クリーム・レッド・ゴールド）。各回では、背景の基調色を別の色相から選びます。deep-night（ネイビーの背景、暖色系のアクセント）、parchment（クリームの背景、レッドのアクセント）、void（ほぼ黒の背景、単色相のアクセント）、raw-paper（オフホワイトの背景、インク色のアクセント）、field-blue（中間的な青の背景、クリームのアクセント）、shader-glow（画面いっぱいに広がるアニメーション付きグラデーション／シェーダーを背景にし、その上にインク色を配置）。
ヒーローの演出	kpi-skyline、illustrated-map、kinetic-type-headline、inline-shader-hero（スクロール連動のuniformを使ったWebGL2の全画面表示）、oversized-numeral、letterpress-plate、photograph-strip、weenie-object、variable-font-morph-hero（スクロール連動のwght／wdth軸のパルス。letter-spacing用のバッファを確保）、sticky-evidence-pin（BBC-Lost-Tabletのパターン――物語がスクロールする間、資料を固定）、oversized-quote-with-drop-cap、priestley-timeline（共通の年スケール上の日付）、isotype-unit-count（同じサイズのピクトグラムをN個並べる）、portrait-grid-poster（ヒーローの表現＋補助グリッド）。
インフォグラフィックの構造（形式または領域がinfographicの場合）	まずこのソースを見極めます（AntVスタイルのルーターであり、テンプレートではありません）。list（順不同の並列項目）、sequence（ステップ／日付付きの区切り）、hierarchy（ツリー）、compare（2つ以上のグループ）、values（大きさ）、relation（ソースで実際に言及されているノードとエッジ）。次に、InfoAlignの構図を選びます。grid、star、portrait、landscape、portrait-grid、spiral（メタファーが螺旋の場合に限る）。Gold Texasは、縦長グリッド上のsequence＋compareです。Gold Julesは、コーンを中心とするsequence＋starです。どちらかを既定にしないでください。
プレートのスタイル	3項目のセクションの場合：dashboard-tile、editorial-dropcap、letterpress-card（番号付き、スタンプ付き）、line-art-token、photograph-plate、bento-cell、index-card-stack、custom-data-glyph（Fragapane風の有機的なマークをデータポイントから作成――葉、編み込み、蛇など、コンテンツに応じたもの）、poster-tile-one-size（Troxler――すべての情報を単一の文字サイズで表示し、構成だけで階層を表現）。
モーション予算	dashboard-live（カウンター＋パルス）、editorial-drift（花びら／ほこり／紙）、kinetic-type-sway（見出しが揺れる）、shader-loop（画面いっぱいのシェーダー）、still-with-one-loop（アニメーション要素は1つ）、no-motion、scroll-driven-axis-morph（可変フォントのwght／wdthをanimation-timeline: scroll(root)に紐付ける）、sticky-highlight-reveal（BBC／Pudding――文脈に沿って行を照らしながら、資料を固定表示）、view-transition-morph（複数ページのパック向けに@view-transition { navigation: auto; }を使用――JS不要のネイティブなクロスフェード）。ヒーローの形式がsvgまたは3jsの場合： briefでstill／no-motion／printが指定されていない限り、alive-micro（事実に結び付いたループを2～4個＋ホバー時の組み合わせ）を強制します。ヒーローの形式がsimulationの場合： モーションそのものが時計です（日単位から年単位へ）。既定では最初の年で一時停止します。ウェブページのモーションを流用しないでください。ウェブページ専用のモーション（shader-loop、view-transition-morph）をweenie、Three.jsのフィールド、または時計に流用しないでください。
文字のアクセント	sans+mono、serif+italic、small-caps、mixed-italic、display-cut（特大文字の一部を切り取る）、blackletter+grotesk、custom-display+workhorse-sans（M/M Parisのパターン――オーダーメイドのディスプレイ書体とニュートラルなサンセリフ本文書体をそれぞれ1つ使用――Editorial New＋Neue Montreal、またはSöhne＋Signifierなど）、variable-single-family（可変フォントファミリーを1つ使用し、3つの軸で階層を表現――GT Standard／Recursive）。
3Dの特徴	card-fan（rotateY ±14°）、letterpress-deboss（内側の影）、floating-hero（translateZ 40px）、depth-strata（3つのzレイヤー）、parallax-scroll、no-3D-just-shadow、matcap-hero（Bruno Simonの手法――実際のThree.jsメッシュにmatcapテクスチャを適用し、光の計算なしで、偽物ながら説得力のある陰影を実現）、alcove-scenes（Cartier――セクションごとに紐付けた、自己完結型の3Dシーンをいくつか配置。隠されたジェスチャーによって探索に応じた演出を楽しめます）。
ルール：

1. 直前の抽選とまったく同じ組み合わせを繰り返してはいけません。 セッション中は、メモリまたはローカル台帳に記録してください。
2. コンテンツによって候補の範囲を絞ります — 印刷されたフィールドガイドに card-fan を選んだり、WebGL のシネマティック表現に letterpress-deboss を選んだりしてはいけません。どのサブスペースが適切かはコンテンツで決まり、その中でバリエーションを付けます。残されたブリーフによって、そのサブスペース内の要素（地面、パターン、文字、動き）の重みを変えることはできますが、事実を追加してはいけません。
3. 読者のレジスターが一貫性を決めます。 レジスターを選んだら、ほかの軸もその文法に合わせる必要があります。cinematic-shader レジスターには、inline-shader-hero ＋ shader-loop の動き ＋ matcap-hero または alcove-scenes の 3D が必要です。poster-jazz-improv レジスターには、poster-tile-one-size のプレート ＋ no-3D-just-shadow ＋高い非対称性が必要です。相容れない軸をつなぎ合わせてはいけません。svg / 3js 形式ではウェブページの動きのサンプルを無視します — 形式パックの alive-micro を使用します。simulation も同様に無視します — forms/simulation.md のクロックを使用します。
4. --seed <n> を指定するとサンプルが決定的に固定されます。 同じソースと同じシードを指定した場合、出力はバイト単位で同一でなければならず、ユーザーが特定の抽選結果をロックや PR 用に再現できる必要があります。
5. --variant a / --variant b / … は名前付きシードです。a は最初の標準的な抽選、b は 2 番目というように続きます。ゴールドパックでバリエーションを示す場合は、after.html、after-2.html、after-3.html として配置します。
6. レポートの Draw: 行にサンプルを表示し、どの組み合わせが選ばれたかをユーザーに知らせます（例：Draw: cinematic-shader · shader-glow · inline-shader-hero · custom-data-glyph · scroll-driven-axis-morph · variable-single-family · matcap-hero）。

ゴールドデモンストレーション（gold/webpage/）：抽選 A は after.html（dashboard-live · deep-night）、抽選 B は after-2.html（editorial-drift · parchment）、抽選 C は after-3.html（cinematic-shader · shader-glow — v2.2 のリサーチで引き上げられた基準）です。twins.png を見ると、その幅がひと目でわかります。

ゴールドインフォグラフィック（gold/domains/infographic/after.html、v2.3）：1 つの Texas-notebook 抽選です。実行時には、パレット、パターン、グリフ、および構成をこのソース（と残されたブリーフ）から導き出します。このソースとは異なるものに、ゴールドの風景またはポスターの装飾を流用した場合は不合格です。

ゴールド Jules（gold/jules/）：1 つのパーラー抽選です。デフォルトのウェブページは、文房具のスリップではなく、実際に入るパーラー（カウンターとコーンを画面いっぱいに配置）です。アーティスティック表現は、この店の素材を描いたものであり、ゴールドのクリーム色とコーラル色の正弦波ではありません。写真表現は、大理石／冷凍庫／店頭の静物写真であり、VOL/ISSUE のフォリオを複製したものではありません。インフォグラフィックはコーンを中心にした星形です。SVG はスクープを積み重ねたものです。3js のカメラはカウンターの上にあります。シミュレーションはフレーバーボードです。2 つ目のソースを 1 つ目と似た見た目にしてはいけないことを示す証拠です。

ゴールド形式（gold/forms/）：それぞれ1 つの Texas-notebook 抽選です。実行時の svg / 3js / simulation では、ウィーニー、メッシュ、クロックの単位、地理、パレット、および構成をこのソースから導き出します。ウィーニー左／模式図中央／ガター右／タイムライン下部、「The years run」、または All three の場所 HUD を再利用してはいけません。

2.5 モディファイア・フォント・ロック（パックを拡張する）

• モディファイアは追加で適用でき、組み合わせも可能です。glassmorphism は、基本方針にある「ぼかし／グラスモーフィズムをデザインとして使う」という除外項目を適用しない代わりに、独自の必須条件（ガラス越しに見える実際の奥行き、重なり合うパネル、抑えたモーション予算）を追加します。bento はセクションのグリッドを名前付きのタイルに再構成します。モディファイアは重ねて適用できます（artistic glassmorphism は実際に組み合わせて使えます）。パックは、グリッド／パレットの上限／モチーフひとつという基本方針と衝突してはなりません。
• フォントの上書き（--font "..."）は、ディスプレイ用または本文用のフォントファミリーを置き換えます。適切なフォールバックを含む完全な CSS スタックを作成します（セリフ系の末尾には serif、モノスペース系の末尾には monospace を指定します）。Web フォントを取得してはいけません。ユーザーが取得を希望する場合は、--allow-fetch を渡し、オフライン利用の保証が損なわれることを理解している必要があります。
• ロック：/reimagine-it lock <path> [as <name>] では、<path>（HTML／CSS／JSON／PDF メタデータなど）を読み込み、パレット、タイポグラフィのスタック、モチーフ、モーション、3D の特徴、セクション構成を抽出します。references/locks/.md に完全なパックとして書き出します。その後、/reimagine-it <target> --ref <name> を実行すると、このパックがドメインとして読み込まれ、同じデザインの DNA を別のターゲット（または別のメディア。たとえば webpage のロックを slides のパックに反映）に適用できます。

2.6 出力形式 — HTML がエンジンの生成物

CLI とプレイグラウンドが常に生成するのは、単体で動作する HTML です。これが正しい製品説明です。

1. デフォルト： HTML に対して npx reimagine-it（または --auto）を実行し、.html に書き出します。PDF／PPTX／DOCX 版も生成すると偽ってはいけません。
2. ソースが HTML 以外の場合： まず HTML に変換するか、HTML でラップします（テキストを抽出してシンプルなページにします）。その後、エンジンを実行します。その旨をレポートの Formats: 行に記載します。
3. ユーザーが明示的に PDF／スライド／docx を求めており、ローカルのツールチェーンが利用できる場合： HTML アーティファクトの生成後に、references/forms/ の該当するパックに従います。ツールチェーンがない場合は HTML を生成し、次に実行すべきコマンドを正確に示します。エンジンがその形式を生成したと主張してはいけません。
4. --ask-format は任意のエクスポート手順のためだけに使い、エンジンが動作するかどうかを選ぶためには使いません。デフォルトは引き続き HTML です。

判断内容をレポートの Formats: 行に記録します（通常は html）。

3. ビルド

一度限りのフォルダーには、その隣に 5 行の README.md を含めます。用途、実行方法／開き方、参考にしたメモを記載します。既存コードを直接変更した場合は、実証手段（テストまたはデモのコマンド）が README になります。

ヒーローの仕上がり（形式を問わず）：

• 最初の接点に、ひとつの惹きつける要素を置きます（ウィニー、初回実行コマンド、最初の一文、失敗から成功に変わる最初のデモ、最初の見開き、最初のスライド）。
• この文脈に基づく実際のコンテンツを使います。ダミーテキスト、偽の統計、架空の API は使いません。
• 手法より先に効果を示します。相手が、実行方法だけでなく何が起きたのかを説明できるようにします。
• アーティファクトが役割を果たすまでは、ラベルを明かしません。

ストレッチ（レポートに必須）： 範囲内だとは知らなかったことをひとつ示します。追加ファイルひとつ、または小さな関連ファイルで済むならビルドします。それ以外の場合は、次に実行するスラッシュコマンドを正確に示します（/reimagine-it auto、/reimagine-it webpage cinematic、/reimagine-it lock <path> など）。

4. --full のプラスパス

ヒーローができたら、読み返します。新しい手法を含む批評をひとつ適用します。最初からやり直してはいけません。製品をもうひとつ追加してはいけません。

4.5 --variants N（任意）

ユーザーが N 個のバリアントを求めた場合、同じブリーフから異なる出力を N 個作成します。各バリアントでは、それぞれ異なる「奇妙さを加える手法」を使う必要があります（色だけを変えた同じページにしてはいけません）。<hero>/var-1/、<hero>/var-2/、… に書き出し、ユーザーが選べるように合成した strip.png も生成します。

5. 検証（機能面＋視覚面）

2 つのパスで確認します。どちらか一方でも省略した場合は、shipped ではなく、よくても partial です。

5.a 機能面のパス — アーティファクトが必要な動作をすること：

• パスが存在することを確認します。Markdown リンクとして報告します。
• コード／CLI：コマンドまたはテストが実際に実行されたことを示します。終了コードまたは証明となる行を貼り付けます。
• ファイルの視覚的な妥当性：SVG に viewBox があること、HTML が開くこと、オフラインが前提の場合は必須の CDN がないこと、PDF がビューアーで開くこと、docx／pptx が対象アプリで開くこと、電子書籍（mobi／epub）が Kindle Previewer／Calibre で開くことを確認します。
• モーション／3D：500 ms 間隔の 2 枚の静止画で目に見えるピクセルの変化があること、または少なくとも 1 つの要素が 12° 以上回転し、24 px 以上のぼかしを持つ影があること、あるいはインライン WebGL2 があることを確認します。
• 文章：チャットだけでなく、手元に残せるファイルであることを確認します。
• プロトコル：実装可能な仕様、または実際に動作するスパイクであることを確認します。たとえ話だけでは不十分です。

5.b 視覚的な検証 — レンダリング結果を実際に確認します。

ヒーロー部分を画像にレンダリングします（HTML はヘッドレス Chrome で幅 1400 px 以上の PNG に、PDF は 1 ページ目を PNG に、docx は PDF にエクスポートしてから PNG に、pptx は 1 枚目を PNG に、mobi／epub は Previewer で開いて最初の 2 ページのスクリーンショットにします）。shipped と報告する前に、画像ツールの結果を読み取る（または IDE ビューアーで開く）ことで、次の失敗がないか手動で確認します。

• 空のプレート／プレースホルダーラベル。 目に見える要素に blank、placeholder、TBD、TODO、lorem、…、[…]、xxx、sample text、Title goes here、caption、または代替テキストの代用表記がそのまま表示されていないこと。スロットにソース由来の実際の内容がない場合は、スロットを削除します。「blank」という文字を載せたカードを配置してはいけません。
• すべてのプレートがアンカーに対応していること。 ステップ 0.85 のアンカーリストと、目に見える各要素を照合します。対応付けられていないタイルは内容の逸脱です。削除します。
• テキストの切れ／重なり。 ある要素が別の要素に隠れてラベルが欠けていないこと（例：前景の図形がテキストに重なり、POST OFFICE が POST O CE と表示される）。z-index／padding／overflow を修正するか、重なっている要素を移動します。**SVG／3js：**ラベルがマーク、メッシュ、パスに重ならないこと。3js の HUD はキャンバス上に積み重ねず、専用の帯に配置します。
• 画像／SVG の破損。 画像が表示されるべき場所に alt テキストが表示されていないこと。<svg> が空でレンダリングされていないこと。
• 列のはみ出し／ヒーローの押しつぶれ。 ビューポートからはみ出すものがないこと。ヒーローが縦方向につぶれていないこと。
• パレットにないアクセントカラー。 色付きの要素がすべてコンテンツ由来のパレットに含まれていること。CSS 既定の青いリンクや、ブラウザー既定の <button> の装飾が残っていないこと。
• 内容の誤り。 レンダリング上のすべての文言がソースに実際に含まれていること（またはスキルによって追加されたキャプション／索引であること）。架空の地名、日付、統計、人名がないこと。
• モーションの証明。 パックがモーションを謳う場合（svg／3js の既定値は alive-micro）、約 600 ms 間隔で 2 フレームをキャプチャしてハッシュを比較します。ハッシュが同一なら、モーションは動作していません。still は短時間であれば例外です。

5.c クラフト基準の確認（ウェブページのみ）— 生成された HTML／CSS を grep し、craft-floor の要件を満たしていることを確認します。 決定論的な監査を実行します： npx reimagine-it audit <output-file.html>（または /reimagine-it audit）。LLM も API キーも使わず、タイポグラフィ、パレット、モーション、コンテンツ、構造、パフォーマンスに関する 19 項目を検査します。失敗が 0 件であることが必須です。警告は参考情報です。CI では --verbose と --json を使用できます。Python の scripts/audit.py は GitHub Action のミラーであり、同じ結果にならなければなりません。

• フォーカスと選択：少なくとも 1 つの ::selection ルールと、少なくとも 1 つの :focus-visible ルールがあること。実際の代替手段を設けずに outline: 0 / outline: none を使用しないこと。
• モーションの低減：@media (prefers-reduced-motion: reduce) ブロックが存在し、適切に分解されていること（トランジションを無効にし、フォーカスインジケーターを表示したままにし、重要な状態フィードバックを維持すること）。
• コンポジターのみを使ったモーション：@keyframes またはトランジションで top、left、right、bottom、width、height、margin、padding、font-size、letter-spacing、line-height、word-spacing、color、background-color をアニメーションさせないこと（最後の 2 つは、静的な要素の :hover では使用できます）。スクロール中や操作中にアニメーションするものには、transform、opacity、filter のみを使用すること。
• transition: all を使わないこと。 常にプロパティを明示すること。
• キネティックタイポグラフィでスペースを確保すること：可変フォント軸のモーフィングには、アニメーションする要素に letter-spacing のバッファーまたは min-width による確保があること。
• インタラクティブ要素にホバー状態とフォーカス状態を設けること（:hover だけにしないこと）。
• サウンドはデフォルトでオフ：--sound が渡されていない場合、<audio autoplay>、autoplay: true を指定した Howler、または明示的なユーザー操作なしでミュート解除された <video> がないこと。
• 自動ソースの安全性：auto が読み書きできるのは生成された成果物／レポートのみです。ユーザーが明示的に編集を求めない限り、ソースを変更してはいけません。

いずれかに違反している場合は、CSS を一度で修正してください。修正に「サブシステム全体の追加」が必要になる場合は、partial に格下げし、具体的な未対応項目を明記してください。

5.d 名前付きオブジェクトとクローンの確認 — references/review.md を読み込んでください。ソースが公開オブジェクト（Lone Star flag、cone、press など）を名指ししている場合、weenie はそのオブジェクトそのものです。金色の星やクリーム色のストライプを組み合わせたものではありません。2 つ目のソースに、Texas gold の意匠やレイアウトの装飾を使ってはいけません。金色の固定要素：python scripts/review_gold.py。

検証結果をレポートに記録してください：

• Visual verify: スキャンした内容と修正した内容
• Craft floor: grep の結果（例：::selection ✓, :focus-visible ✓, prefers-reduced-motion ✓, compositor-only ✓, no transition:all ✓, sound off ✓）。

失敗条件があり、一度で修正できない場合は、partial として提出し、具体的なバグを明記してください。プレースホルダーを完成品のように見せかけてはいけません。

6. レポート

REIMAGINED: shipped | partial | blocked
Mode: reimagine-it
About: <one sentence>
Hero: <path + how to run/open>
Domain / modifier / --ref: <if any>
Brief: <leftover phrase, or none>
Font stack: <if --font was passed>
Anchors: <3–5 nouns/proper nouns/dates from the source that every plate mapped back to>
Draw: <reader-register> · <ground> · <hero-move> · <plate-style> · <motion> · <type-accent> · <3D-signature>
      (svg / 3js: motion is `alive-micro` unless the brief was `still`)
Seed: <n if pinned, else "fresh">
Formats: <usually "html"; name any optional host export>
Sound: <off | ambient | feedback | full — with tier + mute-control + no-autoplay confirmed>
Stretch: <what they didn't know was possible>
Notes: <only if --notes>
Functional verify: <what you actually ran, opened, or checked>
Visual verify: <scan result: no blank plates? no clipped text? every plate maps to an anchor? palette on-source? named weenie is the real object (flag cloth is white star / white over red, not gold-on-parchment)? motion advanced? composition is this source's object, not gold's layout chrome?>
Craft floor: <::selection ✓, :focus-visible ✓, prefers-reduced-motion ✓, compositor-only motion ✓, no transition:all ✓, sound off unless --sound ✓>

ユーザー向けの返信は、プロトコルではなく、成果物とその工夫から始めてください。

禁止事項

• 成果物の代わりに箇条書きを提出すること
• 明示的な --seed／--variant の固定指定なしに、同じソースに対して同じ抽選結果を二度返すこと
• 名前付きの形式、ドメイン、モディファイアーではないという理由で、ユーザーの残りの言葉を削除すること
• そのノートブックではないソースに、ゴールドの DNA やゴールドの構成をコピーすること。配色（Texas の羊皮紙色／ネイビー／星の赤）も、風景（Lone Star、Alamo の礼拝堂、1836–1995 の地図時計）も、レイアウトの装飾要素（00 · MASTHEAD のレール、/reimagine-it infographic のキッカー、左のウィーニー／中央の地図／右のガター／下部のタイムラインからなる SVG、The years run ＋ All three の HUD）もコピーしてはいけません。手法は引き継げますが、構成は引き継げません。
• ビジュアル検証（5.b）を行わずに shipped と報告すること。例外はありません。
• blank、placeholder、TBD、TODO、lorem、sample、caption、…、[…]、Title goes here、または代替テキストの仮文言を文字どおり表示するプレートを描画すること。空のスロットは削除してください。実際のコンテンツだけを使ってください。
• 文字が切れたり、重なったりしたレンダリングを提出すること（例：前景の図形がラベルの半分を覆っている）。shipped と報告する前に、z-index／パディング／overflow を修正してください。
• npx reimagine-it を実行できる場合に、ページを再設計して手作業で作成すること。CLI がエンジンであり、スキルはそのラッパーです。
• CLI が PDF、PPTX、DOCX、MOBI、または「任意のファイル」を再設計すると主張すること。入力も出力も HTML です。ホスト側での変換は追加の任意機能です。
• エクスポートのツールチェーンがないのに、実行したかのように黙って装うこと。ユーザーが PDF／PPTX を求めていて、ツールがない場合は HTML を提出し、次のコマンドを明記してください。
• 次のいずれかについて、クラフトの最低基準（§5.c）を満たさないウェブページ出力を提出すること：::selection のスタイル設定、:focus-visible のスタイル設定、prefers-reduced-motion ブロックが存在し、正しく分解されていること、コンポジターのみで処理されるモーション、transition: all を使用していないこと、実際の代替手段なしに outline: 0 を使用していないこと、--sound が指定されていない限り自動再生音声を使用していないこと。1 回の修正で対応するか、ステータスを partial に変更してください。
• スクロールまたは操作中に実行されるものについて、top／left／right／bottom／width／height／margin／padding／font-size／letter-spacing／line-height／word-spacing／color／background-color をアニメーションさせること。transform、opacity、filter のみを使用してください。それ以外は毎フレームでレイアウト再計算を発生させ、ビジュアル検証に失敗します。
• transition: all を使用すること。プロパティは常に明示してください。親要素の変更があるたびに all は処理を無駄に消費します。
• outline: 0／outline: none を指定し、視認可能なフォーカスの代替表示がないページを提出すること。WCAG 2.4.7 により必須です。
• 手順 0.85 のアンカーに対応しないプレートを描画すること（つまり、内容を創作して逸脱すること）。表示されるすべての要素はソース内のアンカーに対応させ、対応しないものは削除してください。
• /reimagine-it をグラフィック専用として扱うこと
• auto にソースを上書きさせたり、選択された方向を隠したりすること
• interview カテゴリーなしでインタビューを行うこと
• 「どんなスタイルがよいですか？」と尋ねること
• wow、「目立たせる」、または戦略としてのショックを使うこと
• 許可なく有料の画像／動画 API を呼び出すこと
• アイデアとして Dribbble／Collect UI を模倣すること
• 書道や統計を偽装すること
• ソースにない内容（創作した地名、でっち上げた統計、架空の人物）を捏造すること
• 頼まれていないのに、無関係なリポジトリに新規アプリの足場を作ること
• --allow-fetch なしにウェブフォントを取得すること
• ロックファイルを references/locks/（またはホストで設定されたロック保存先）以外に保存すること