course-style

コースのスタイル

このスキルは、AI Engineering from Scratch の外観と文体のリファレンス層です。ほかの制作スキルでは、正確な値を参照するためにここを参照します。対象は blueprint-figure、motion-figure、isometric-explainer、write-manual です。SKILL.md を読み込む Claude、Cursor、Codex、OpenClaw、Hermes、その他のエージェントで使用できます。このスキル自体には、図の作成方法は含まれていません。使用する色、フォント、ラベル、余白、用語、および各項目の確認方法を定めます。

使用する場合

• コースのページ、カード、図、またはマニュアルを作成またはレビューするとき。
• ライトモードまたはダークモードのトークン値が必要なとき。
• 図、サブ図、またはウィジェットのラベル形式が必要なとき。
• 文章が、平易なテクニカル英語のルールに沿っているか確認するとき。
• モーションを追加し、タイミング、イージング、動きを抑える場合の動作が必要なとき。

使用しない場合

• 静的な SVG 図を描くとき。これを引用する blueprint-figure を使用します。
• アニメーション付きの図またはスライダー付きの図を作成するとき。motion-figure を使用します。
• アイソメトリック形式の機械解説図を作成するとき。isometric-explainer を使用します。
• マニュアル全体を執筆するとき。構成と監査には write-manual を使用します。
• ページが独自のブランドを持つ別の製品に属するとき。

方法

1. テーマを設定します。ライト用トークンを :root に、ダーク用トークンを [data-theme="dark"] に配置します。references/tokens.md からコピーしてください。
2. トークンセットを選びます。ページではサイトのトークンを使います。マニュアルの図では --m- トークンを使います。
3. references/typography.md にある正確なリンクを使って、3種類のフォントを読み込みます。指定されたフォントスタックを使用してください。
4. references/labels-and-layout.md にある形式で、各図にラベルを付けます。
5. references/labels-and-layout.md にある寸法で、カードと図のフレームを作成します。
6. モーションの追加には、モーショントークンのみを使用します。references/accessibility.md にある動きを抑える場合のブロックも追加してください。
7. 文章を作成します。その後、各行を references/plain-english.md に照らして確認します。
8. 以下のチェックリストを実行します。完了前に、すべての不備を修正してください。

ルール

色

• ページごとにアクセントカラーを1色使います。--blueprint（ライトでは #3553ff、ダークでは #6b8eff）を使用します。それ以外に使える色は、ステータストークンとマニュアルの図の色相のみです。
• 色はすべて CSS 変数で指定します。16進数値を使用できるのは、var() 内のデフォルト値に限られます。
• すべてのトークンを両方のテーマで定義します。ダーク用の値がないトークンは不備です。
• 本文には --ink または --ink-soft のみを使用します。
• 本文に --ink-mute または --warn を使用しないでください。紙の背景に対するコントラスト比が 4.5:1 未満です。
• 図では、固定された4つの色相を使用します。失敗にはローズ、外部にはグレー、ライフサイクルにはアンバー、永続状態にはティールを使用します。
• 用紙のドットグリッドと破線以外では、グラデーションを使用しないでください。カードやフレームの角を丸くしないでください。

書体

• 見出しにはディスプレイフォントを使い、ウェイトは 400、すべて大文字、文字間隔は 0.02em、色は --blueprint にします。
• 本文にはセリフ体を使い、サイズは 18px、行の高さは 1.62 にします。
• ラベル、メタ情報の行、コードにはモノスペースフォントを使います。ラベルはすべて大文字にし、文字間隔は 0.06em から 0.16em にします。
• 図のテキストは、幅が 640 単位の場合に少なくとも 11 単位にします。

ラベル

• コースの図番号は FIG_ と3桁の数字で構成します。例：FIG_005。番号は再利用しません。
• サブ図には、ピリオドと大文字を追加します。例：FIG_005.A。
• ラベルの各部分は、中黒とその左右の半角スペースで区切ります。例：FIG_001 · FORWARD PASS。
• マニュアルの図は Fig. <part>.<n> の形式にします。例：Fig. 4.1。ID は fig-4-1 です。

文章

• 文は25語以内にします。指示は20語以内とし、命令形を使います。
• 段落では話題を1つに絞り、文は6つ以内にします。
• em ダッシュ、en ダッシュ、セミコロン、短縮形は使いません。
• 「may」は使いません。「can」と書くか、条件を明示します。
• references/plain-english.md にある使用禁止語は使いません。
• コードスパン、フェンス付きコード、引用、出典は対象外です。

モーションとアクセシビリティ

• 使用する時間は、160、180、220、250 ms の 4 種類のみです。
• ページの表示は、不透明度 0 で 8px ずれた状態から始まり、--ease-out を使用します。モーダルは 14px 下から、スケール 0.985 で始まります。
• ボタンを押したときは、スケールを 0.97 にします。
• prefers-reduced-motion: reduce の場合は、トランジションとアニメーションを削除し、最終状態を表示します。
• フォーカス可能なすべてのコントロールに、2px のオフセットを設けた 2px の実線 --blueprint アウトラインを表示します。
• メニューと図のコントロールのタッチターゲットは、少なくとも高さ 44px にします。

完了前の確認

• すべての色が var(--token) で指定され、各トークンにライトとダークの値があります。
• ページで使用するアクセントカラーは 1 色のみです。
• 本文では --ink-mute または --warn を使用していません。
• フォントは 1 つの Google Fonts リンクから読み込まれ、フォントスタックは references/typography.md と一致しています。
• すべての図に、references/labels-and-layout.md の形式に沿ったラベルがあります。
• 区切りとして em ダッシュを使用したラベルはありません。
• すべてのトランジションがモーショントークンを使用し、モーションを減らすためのブロックがあります。
• すべてのコントロールに視認可能なフォーカスアウトラインがあります。メニューの行と図のコントロールの高さは 44px 以上です。
• references/plain-english.md の文章チェックで、該当箇所が 0 件です。
• テーマをダークに切り替えて、ページをもう一度読みました。

ファイル

• references/tokens.md：ライトとダークのサイトおよび図のトークン、色相の意味、モーショントークン、測定済みのコントラスト。
• references/typography.md：フォントスタック、フォントリンク、文字サイズのスケール、ラベルのスタイル。
• references/labels-and-layout.md：FIG_ の形式、ファイル名、カードのレイアウト、図のフレーム。
• references/plain-english.md：文章に関するルールの全一覧、使用禁止語、チェッカー。
• references/accessibility.md：フォーカス、ターゲット、図のマークアップ、テーマの起動、モーションの低減。

AI Engineering from Scratch リポジトリでは、元の値は site/style.css、manuals/_shared/tokens.css、scripts/audit_manuals.js にあります。