orbit-github

Orbit · GitHub ブリーフィング

GitHub に限定した単一コネクターの Orbit テンプレートです。

⚠️ 信頼できる情報源のプロトコル（最初にお読みください）

ステップ 1. このフォルダーにある example.html を開いて読み込んでから、 出力を作成してください。このファイルが正式なデザインです。あなたの 役割はそれを再現することであり、独自に解釈することではありません。

ステップ 2. 例の構造を 1:1 で反映してください。

• DOM の階層とクラス名を同じにする
• ナビゲーションバーの項目を同じにする（項目を追加しない）
• 左側レールのフィルター一覧を同じにする（項目を追加しない）
• イベントグループを同じ順序にし、行数も同じにする
• 差分プレビューの配置、CI 失敗ブロック、注意喚起ブロックを同じにする
• 末尾の <script> ブロック（フィルター／ホバー／リンクの挿入）を同じにする

ステップ 3. モックの値（PR 番号、タイトル、時刻、 CI コミットメッセージ）を「今日」のものとして読めるように更新しても構いませんが、 追加の UI を作成してはいけません。レールの項目、通知、 イベントの種類、バッジ、装飾要素を追加してはいけません。example.html に 存在しないものは、出力に含めてはいけません。

アイデンティティに関する注意事項。 example.html にある人名やハンドルはすべて モックコンテンツとして扱ってください。依頼またはコネクターのデータで 認証済みユーザーが明示的に特定されていない限り、例に記載された名前、 コネクターのアカウントラベル、オーナー、担当者、送信者、メンションから、 現在のユーザーの表示名を推測してはいけません。現在のユーザー名が 明示されていない場合は、you、your、current user、me、my などの 中立的な表現を使ってください。

以下のセクションは、トークンとビジュアル言語の参考資料であり、 ページを拡張する許可ではありません。

⚠️ デザインシステムのポリシー

このスキルには、example.html に GitHub の Primer の装飾として 独自の完全なビジュアル言語が組み込まれています。ユーザーに デザインシステムの選択や添付を求めてはいけません。また、外部の DESIGN.md の トークンを出力に組み込んではいけません。

• アクティブなプロジェクトにデザインシステムが設定されている場合は、無視してください。
• ユーザーがブランドトークンや Figma ファイルを提供した場合は、無視してください。
• example.html で定義されている色、フォント、角丸のみを使用してください。

これは厳守すべき制約です。ブリーフィングはユーザーのブランドではなく、 実際の GitHub ページのように見える必要があります。

キャンバストークン（以下の値をそのまま使用）

page bg:           #f6f8fa
card bg:           #ffffff
nav bar:           #24292f  /* GitHub black header */
nav text:          #ffffff
ink:               #1f2328
muted:             #59636e
border:            #d0d7de
hairline:          rgba(208,215,222,0.32)

state · open:      #1a7f37
state · merged:    #8250df
state · closed:    #cf222e
state · draft:     #6e7781

attention bg:      #fff8c5  /* yellow review-request block */
attention border:  #d4a72c
ci-fail bg:        #ffebe9
ci-fail border:    #cf222e

フォントスタック：

• -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif
• サイズ：ナビゲーション 14px、見出し 16/20px、本文 14px、メタ情報 12px

ページのセクション

1. 上部ナビゲーションバー — 全幅、ダークカラー（#24292f）、高さ60px。 左側：octocat SVG ロゴ（白、32px）＋検索入力欄 （背景色は rgba(255,255,255,0.08)、プレースホルダーは白で薄く表示）。 右側：+ のドロップダウン、未読が0件より多い場合は赤いドットが付く通知ベル、丸いアバター。

2. ヘッダー行 — ナビゲーションの下にある明るい色のバー、高さ56px。 左側：ページのパンくずリスト Inbox · Daily Digest · May 6。 右側：フィルターのドロップダウンチップ（Type ▾ Date ▾ Status ▾）。

3. 2ペインのメイン領域：

   • 左レール（240px）：縦並びのフィルターリスト。項目： Inbox · Saved · Done · All の後に区切り線、その下に Participating · Mentions · Review requests · Assigned · Comments。 アクティブな項目：薄いグレーのピル型背景。
   • メインペイン（flex 1）：カテゴリごとにグループ化されたイベントストリーム。

4. メインペイン内のカテゴリグループ（この順序）：

   • 自分の対応待ちのレビューリクエスト — 黄色の注意ブロック （背景色 #fff8c5、1px の境界線 #d4a72c）。各行：アバター＋リポジトリの パス＋PR タイトル＋小さなドットのレビュアー状態の行 （✓ は緑 / ⏳ は黄色 / ○ はグレー）＋「レビュアー X 人中 Y 人」＋経過時間。
   • CI / チェック — 失敗した各実行は赤い境界線付きカード （境界線の色 #cf222e、背景色 #ffebe9）で表示し、赤い ✗ グリフ、 実行名、ブランチ名（等幅フォント）、コミットメッセージ、経過時間を含めます。
   • 自分に割り当てられた Issue — シンプルな行。ステータスを示す丸印（オープンは 緑 / クローズは赤）、タイトル、リポジトリのパス、経過時間、ラベルのピル。
   • アクティビティ — マージやクローズを示す控えめな行。文字色を抑え、 小さな merged の紫色のピル、または closed の赤色のピルを表示します。

5. 任意の PR 差分プレビュー — 1つの PR 行の下にインラインで表示し、 赤い − / 緑の + を行頭に付けたモックコードを2～3行、 12px の等幅フォントのブロックに表示します。行の背景色は #ffebe9 / #dafbe1 です。

6. フッター — 1行、12px、控えめな色： Open Orbit · auto-generated 06:42 · GitHub only。

ピル / チップのルール

• ステータスのピル：ピル型（border-radius 2em）、12px のミディアム、パディングは4×8。 前景色は白、背景色は上記のステータス色にします。
• ラベル（bug、p1、frontend …）：GitHub のラベルのような丸みのあるピルにし、それぞれ任意の色を使用します。実際に使われているような多様な色相にしてください。
• レビュアーのドット：塗りつぶした8pxの円、間隔は2px。視覚的に控えめにできる場合のみ、✓ ⏳ ○ のグリフを使用してください。

実装上の制約（対応する「禁止」と「推奨」）

禁止	推奨
ライトテーマとダークテーマを混在させる	ライトの Primer テーマ（ページ背景 #f6f8fa、カード #ffffff）を使用する
GitHub 以外のタイポグラフィを使う	-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif のみを使用する
アバターを四角形または角丸四角形で表示する	常に円形にし、レビュアーの重なりは ≤ 6px にする
UI 部品にシャドウ / グラデーション / グローを使う	フラットな面にし、#d0d7de の1px境界線で区別する
lorem ipsum を使う	実際の GitHub らしい文面を記述する。PR タイトルは feat: orbit briefing card のように、ブランチ名は chore/upgrade-deps のようにし、コミットの件名は72文字未満にする
CI の失敗を通常の行として表示する	赤い ✗ グリフと実行名を含む、赤い境界線付きカード（境界線 #cf222e、背景色 #ffebe9）で囲む
レビューリクエストを通常の行として表示する	レビュアーのステータスを示すドットの行とともに、黄色の注意ブロック（背景色 #fff8c5、境界線 #d4a72c）に配置する
org/repo のようなプレースホルダーのリポジトリ名を使う	この組織の実際の主要リポジトリである nexu-io/open-design を使用する
任意のラベル色を選ぶ	開発チームで使われているような色相を使用する。bug は赤、enhancement は青、documentation は水色、frontend は紫にする