verso は何をしますか？
既存のインターフェースの一部分を、盛期ルネサンスの作業ノートのページに変換します。鉄没食子インク、茶色に変色し、敷き紙の上にあります。
参考にしたのは、レオナルド・ダ・ヴィンチの5枚のシートです。ウィンザー解剖学ノート（RCIN 919070 verso）、レイチェスター写本の見開き、ウィトルウィウス的人体図、アランデル写本の見開き、フォスター写本のノートページです。セッションでの最初の変換の前に references/style.md を読んでください。そこでは、スタイルの物理的な各要素と、それに続くUI上の決定事項が説明されています。以下の決定事項は、それを読んで初めて意味を持ちます。
このスキルのファイル
references/style.md：調査資料：紙、インク、筆跡、構図、測定されたコントラストを含むパレット、および一般的なUIパーツと手稿パーツの対応表。assets/manuscript.css：プレーンCSSのテーマで、.ms-scopeの下にスコープされ、data-ms-paperによって設定される4つの紙のプリセットがあります。すべての値の信頼できる情報源です。assets/defs.svg：4つのSVGフィルター（羽根ペン、フリーハンド線、デックルエッジ、ウォッシュ）。ドキュメントごとに1回マウントします。assets/sketches.svg：ページに配置するペン画：幾何学図形、機構、引き出し線、インクの染み、点がラベル付けされた光線、ハッチングされた立体。examples/：2つの変換例で、それぞれBeforeとAfterがあります。before.htmlとafter.html（設定カード、windsor）、およびrelease-before.htmlとrelease-after.html（リリースノート、leicester）。examples/index.htmlはそれらを並べて表示し、プリセットを切り替えます。完成した変換が満たすべき基準として、Afterファイルを読んでください。
ステップ 1. スコープを確定する
ユーザーが部分（ファイル、コンポーネント、ルート、セレクター、または説明）を指定します。指定された部分のみを変換し、それ以外は変換しません。
- ターゲットが指定されなかった場合は、それを尋ねてください。推測でアプリ全体を再スタイリングしないでください。
- 部分のルート要素を見つけてください。テーマのすべては、そのルート上の1つの
ms-scopeクラスに依存するため、アプリの残りの部分には影響しません。 - その部分が他の画面でも共有されている場合（デザインシステムのボタン、レイアウトなど）、その旨を伝え、共有部分を変換するか、ローカルコピーをラップするかを尋ねてください。
ステップ 2. 記述する前にプロジェクトを読む
- プロジェクトがどのようにスタイルを適用しているか（Tailwind、CSS Modules、プレーンCSS、CSS-in-JSライブラリ、コンポーネントライブラリ）を確認します。テーマをそのイディオムに移植してください。すでにスタイリングシステムが存在するプロジェクトに、別のスタイリングシステムを追加しないでください。
- プロジェクトのルールファイル（
CLAUDE.md、AGENTS.mdなど）を読んでください。コンポーネント内での生の16進数カラーを禁止している場合は、まずそのスタイルシートに--ms-*の値をトークンとして追加し、その後トークンを使用します。タイプスケールやフォントローダーがある場合は、そのローダー（例：Next.jsのnext/font/google）を通じて3つのフェイスを追加し、プレーンHTML用の@import行は使用しないでください。 - プロジェクト独自のプリミティブは保持してください。その
Buttonは、バリアントまたはクラスを通じて再スタイリングし、生の<button>に置き換えないでください。
ステップ 3. プリミティブを一度インストールする
- トークンとクラス。
assets/manuscript.css、またはプロジェクトのイディオムでそれに相当するものを取り込みます。Tailwind v4では、トークンは@themeに、マルチレイヤーの部品（.ms-page::before、.ms-frame、.ms-cast、.ms-button）は@layer componentsに配置します。疑似要素のスタックはユーティリティに適合しないためです。 - フィルター。
assets/defs.svgを一度、スコープされたルートの内部または前にマウントします。Reactでは、小さなコンポーネントにします。これがないと、フレームと罫線がまっすぐにレンダリングされ、デックルエッジが消えます。これは無言の失敗です。確認してください。 - フォント。 EB Garamond（本文）、IM Fell English（タイトル）、La Belle Aurore（余白の注釈）。使用するウェイトのみをロードします。
ステップ 4. プリセットを選ぶ
references/style.md のセクション6にある表に従って、部分の形状に基づいてプリセットを選択します。簡単に言うと：
windsor：フォーム、設定、高密度なツールパネルに。leicester：記事、ドキュメント、リリースノート、ヒーロー、空の状態に。arundel：ダッシュボード、キャンバス、多くの小さな部品で構成されるボードに。forster：狭いカード、サイドバー、リスト、モバイル画面に。
スコープされたルートに data-ms-paper="..." として設定します。windsor は属性を必要としません。ユーザーがプリセットまたは写本を指定した場合、それが優先されます。1つのサーフェスにつき1つのプリセットです。
ステップ 5. 部分ごとに変換する
references/style.md の対応表に従って、部分をひとつひとつ処理します。最も重要なルールは次のとおりです：
- サーフェス。 部分のルートは
.ms-pageになります：紙、目、敷き目と透かし目、デックルエッジ。内部の白またはグレーのサーフェスはなくなります。ブロックを分離する必要がある場合、最大1つの明るいパッチに.ms-repairを使用します。 - カード。 カードは緩いペンフレーム（
.ms-frame）または何もなしになります。ほとんどのグループはフレームを必要としません。シート上と同様に、スペースと手描きの罫線で区切ります。フレームは、箱書きされたノートである1つか2つのブロックにのみ使用します。 - シャドウ。 すべての
box-shadowとエレベーションはハッチング（.ms-cast）になるか、なくなります。このテーマに柔らかいグレーの影はありません。 - 角。 半径は
--ms-radius（手描きの半径）に置き換えるか、なしにします。 - 色。 茶色のインクのみ。本文は
--ms-ink、二次情報は--ms-ink-2、キャプションは--ms-ink-3。ブランドカラーはサンギーヌ（赤みがかった茶色）になり、サーフェスごとに1回使用されます：主要なアクション、リンク、フォーカスリング。 - タイポグラフィ。 本文はオールドスタイル数字のEB Garamond。タイトルはIM Fell。セクション見出しはIM Fellイタリックで、その下に二重の手描き罫線。本文を手書き風フォントで設定しないでください。短いメモのみに使用します。
- フィールド。 入力は罫線（
.ms-input）、テキストエリアは複数の罫線、チェックボックスはクロスが入ったインクの四角形（.ms-check）。実際の<input>と<label>は保持し、描画のみを変更します。 - バッジとタグ は丸で囲まれた単語（
.ms-circled）になります。 - 値のリスト、統計、テーブル は元帳（
.ms-ledger）になります：手描きの罫線上の行、値への点線のリーダー、オールドスタイル数字。 - アイコン。 プロジェクトのアイコンを保持します。インクのトーンにし、
ms-inkフィルターを通します。絵文字やグリフに置き換えないでください。 - 画像 には
.ms-plateを適用します：セピア色で、紙に乗算されます。 - チャート はペンの線とハッチングによる塗りつぶしになります。グラデーションは使用しません。レイチェスター写本の図のように、点と領域にはイタリックの文字でラベルを付けます（
.ms-point）。 - プログレスバー、メーター、スライダートラック はウィトルウィウス的スケール（
--valueを持つ.ms-scale）になります。要素のロールとaria値は保持します。ネイティブの<input type="range">または<progress>の場合、ネイティブ要素は保持し、その背後にスケールを描画します。 - ステップ番号、ランク、インデックス は、フォスター写本のように、余白の図番号（
.ms-figno）になります。 - 変更された値 は修正箇所です。
<del>はペンで取り消し線、<ins>は手書きで挿入。UIがすでに古い値と新しい値を表示している場合にのみ使用します。 - 合計と内訳 は、アランデル写本のように、計算過程が示された合計（
.ms-sum）にすることができます。 - 長いテキスト内のセクション は、レイチェスター写本のように、プレーンなイニシャル（
.ms-initial）で始まり、罫線で区切られた線（.ms-endrule）で終わります。
ステップ 6. 作業ページとして構成する
カードのグリッドを茶色のカードに単純に変換するのは失敗パターンです。部分を、デザインされたのではなく、埋められたシートとして読めるように再構成します：
.ms-folioを使用します：メインカラムと余白。二次的な情報、ヒント、ヘルプテキストは.ms-noteとして余白に移動し、必要に応じてそれらの主題を指す引き出し線のスケッチを付けます。- ブロックの幅を異なるものにします。テキスト内にスケッチを配置し、専用のバンドには配置しません。
- 2つか3つの小さなブロックを
.ms-tilt-l、.ms-tilt-r、または.ms-tilt-sで傾けます。フォームフィールド、テーブル、またはページの約3分の1を超えるものは決して傾けないでください。 assets/sketches.svgから、主題に合ったペン画を1つ追加します：設定やシステムには機構、レイアウト、データ、測定には幾何学図形。どちらも合わない場合は、同じ方法で新しいものを描画します。サーフェスごとに1つ。- 1つのサーフェスに対する装飾の予算を守ります：スケッチ1つ（最大2つ）、染みまたはしみ1つ、透け1つ、ミラーブロック2つ。これらすべてを備えたページは、仮装のように読めます。ほとんどのサーフェスは、これらのうち2つか3つを必要とし、すべてではありません。
- 本当に空のスペースには、最大2つの装飾的な鏡文字ブロック（
.ms-mirror、aria-hidden="true"）を配置します。当時のイタリア語で書きます（自分へのメモ、リスト、測定値）。実際の引用として提示しないでください。 - DOMの順序は読み取り順序を維持します。レイアウトは視覚的に要素を移動させるかもしれませんが、ソースの順序はスクリーンリーダーとTabキーでの操作にとって意味のあるものでなければなりません。
ステップ 7. ガードレール
- コントラスト。 実際のテキストに
--ms-washを使用しないでください。新しいものはすべて紙に対して測定します：テキストは4.5:1、意味のあるグラフィックまたはコントロールのエッジは3:1。 - 鏡文字は決してコンテンツにしないでください。 ラベル、値、エラー、指示は読みやすく、正しい向きのままにします。
- セマンティクスは維持します。 同じ要素、ロール、名前、状態、ハンドラー。変換されたコンポーネントは、以前とまったく同じように動作する必要があります。
- コントロールは認識可能なままにします。 ボタンはまだ押せるように見え、フィールドはまだ書き込めるように見え、フォーカスは常に可視です（サンギーヌのアウトライン）。
- モーション。 テーマのモーションはインクです。
data-drawで自身を描画するスケッチ、チェックボックスに現れるマーク。ホバーとプレスはウォッシュであり、スケールでは決してありません。prefers-reduced-motionを尊重します。manuscript.cssはすでにこれを行っています。 - コスト。 フィルターが適用された各要素はフィルターパスです。フィルターは疑似要素、フレーム、スケッチに限定し、長い行のリストやスクロールするコンテンツには使用しないでください。本文テキストに
ms-inkを設定しないでください。 - 機関のマークは使用しないでください。 図書館や収集家のスタンプ、美術館の目録番号をブランディングとして、またはレオナルドの名前を署名としてコピーしないでください。ページは彼の様式であり、彼のものとして提示されるものではありません。
- ライトモードのみ。 シートは物理的な物体であるため、ダークモードで反転しません。アプリにダークテーマがある場合、スコープされた部分はその紙の状態を維持します。
ステップ 8. 検証する
- 変換された部分をレンダリングし、スクリーンショットを撮ります。ブラウザツール（agent-browser、Playwright、プレビューペイン）が利用可能な場合は、それを使用します。それを確認します。
- フレームと罫線が波打っていることを確認します。まっすぐな場合は、定義がマウントされていないか、フィルターIDが競合しています。
- 部分をTabキーで移動します。すべてのコントロールに適切な順序で到達でき、フォーカスリングが表示されます。
- 電話の幅でページを確認します。フォリオは1カラムに折りたたまれます。
- プロジェクトに独自のチェック（型チェック、リント、ビルド）がある場合は、それを実行します。
レポート
完了したら、数行でユーザーに伝えます：
- どの部分が変更され、どのファイルか、
- どのプリセット、およびそれがなぜその部分に適合するか、
- 何が一度追加されたか（トークン、フォント、フィルター）とその場所、
- 変更されなかった部分とその理由、
- それを確認する方法（ルートまたは開くファイル）。