orbit-linear

Orbit · Linear Briefing

Linear を対象とする、単一コネクターの Orbit テンプレートです。

⚠️ 正とする情報源のプロトコル（まずお読みください）

手順 1. 出力を作成する前に、このフォルダーにある example.html を開いて読みます。そのファイルが正式なデザインです。あなたの役割はそれを再現することであり、独自に解釈することではありません。

手順 2. 次のとおり、サンプルの構造を 1:1 で踏襲します。

• DOM の階層とクラス名を同じにする
• 上部ツールバー（パンくずリスト + ビュー切り替え + サイクルストリップ + テーマ切り替え）を、項目も含めて完全に同じにする
• 左側レールの項目を同じ順序にする
• 同じ課題グループ（「対応が必要な項目」→「昨日更新」）を使い、行数とデフォルトで展開される動作も同じにする
• 同じ優先度バー / ステータスドットのシステムを使う
• 末尾の <script> ブロック（切り替え / テーマ / キーボード / Linear リンクの挿入）を同じにする

手順 3. モックの値（課題 ID、タイトル、ラベル、経過期間、担当者）は「今日」の内容に合わせて更新できます。ただし、レールの項目、グループ、プレビューペインのフィールドを増やしたり、example.html にない装飾を追加したりしてはいけません。

アイデンティティ保護ルール。 example.html 内の人物名やハンドル名は、すべてモックコンテンツとして扱います。リクエストまたはコネクタデータで明示的に認定ユーザーが特定されていない限り、サンプル、コネクターのアカウントラベル、オーナー、担当者、送信者、メンションから、現在のユーザーの表示名を推測してはいけません。現在のユーザー名が明示されていない場合は、you、your、current user、me、my などの中立的な表現を使います。

以下のセクションは、トークンとビジュアル言語の参考情報です。ページを拡張してよいという意味ではありません。

⚠️ デザインシステムの方針

このスキルには、example.html に組み込まれた独自の完全なビジュアル言語（Linear らしいコンパクトな UI）が含まれています。ユーザーにデザインシステムの選択や添付を求めてはならず、外部の DESIGN.md トークンを出力に取り込んではいけません。

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

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

キャンバストークン — ライトテーマ（出荷時のデフォルト）

page bg:           #f4f5f6
surface:           #ffffff
ink:               #1b1c1f
ink-2:             #37393e
ink-3 (muted):     #6c6f78
ink-4:             #9ea1a9

border:            rgba(0,0,0,0.06)
border-card:       rgba(0,0,0,0.08)
border-strong:     rgba(0,0,0,0.12)
hover row:         rgba(0,0,0,0.025)
active row:        rgba(0,0,0,0.05)

accent:            #5e6ad2
accent-bg:         rgba(94,106,210,0.06)

attention accent:  #c77d1a   /* "needs attention" group */
attention bg:      rgba(212,148,14,0.06)

shadow-card:       0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.05)

ステータスドットのパレット（次の色を必ず使用）：

backlog:    #9ea1a9   /* gray, hollow ring */
todo:       #d4940e   /* yellow, dashed ring */
progress:   #2b80c5   /* blue, partial ring */
review:     #8759c7   /* purple, partial ring */
done:       #1a8d3a   /* green, filled */
canceled:   #6c6f78   /* gray with strike */

優先度アイコン = 高さが段階的に増す小さな縦棒 4 本。 塗りつぶされたバーでレベルを示します：0 なし → 4 緊急。 緊急には #d4513a、高には #c77d1a、中 / 低には #505259 を使用します。

フォントスタック：

• 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif
• 等幅フォント：'Berkeley Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace
• サイズ：ナビゲーション 13px、行タイトル 13.5px、メタデータ 12px、ヘッダーは 11px の大文字表記で letter-spacing 0.04em

ページのセクション

1. 上部ツールバー — 1行、44pxの高さ、影なし、1pxの細い下罫線。 左側：パンくずリスト Orbit › Daily Digest › May 6（13px、区切り文字 …›… は ink-4）。 続いて細い区切り線、その後に ▼ My issues ビュー切り替え。 右側：🔍 search、+ new、▦ display options、アバター。

2. サイクル進捗バー — パンくずリスト領域の右側に配置し、 1行で表示：Cycle 12 · 60% complete · 3 days left。11pxの大文字で表示し、 小さなインライン進捗バー（幅60px、高さ4px、アクセントカラーで塗りつぶし）を付けます。

3. 3列のメイン領域：

   • 左ナビゲーション（240px）：縦並び、背景なし — 項目は13px。 セクション：Inbox · My issues · Active · Backlog · All issues、 その後に区切り線、続いて 📋 Triage · 🚫 Canceled · ✅ Completed。 アクティブな行：背景は accent-bg、文字色は accent。 下部：小さく控えめな Open Orbit · auto-generated 06:42 の行。
   • 課題リスト（flex 1）：2つのグループに分けます。
     • 対応が必要な項目 — 11pxの大文字で attention accent のヘッダー； グループ全体にはごく薄い attention bg の背景を適用します。 行には、担当者が割り当てられた古い課題や、優先度の高い／緊急の課題を含めます。
     • 昨日更新 — 11pxの大文字で控えめな色のヘッダー；ステータス 変更や完了を示す行を表示します。 各行は間隔を詰めた1行で表示します： [優先度バー] [識別子 ENG-148] [ステータスドット] [タイトル……………] [ラベル] [サイクルチップ] [担当者アバター] 行の高さは約36px。ホバー時は hover row の色。
   • 課題プレビュー（右側、360px）：事前に選択された課題。 大きめのタイトル（16px、ミディアム）；その下にIDとステータスピル； 説明文の段落；アクティビティストリーム（小さなアバター＋動作を表す文言＋タイムスタンプ）； 下部にラベルチップ、サイクルチップ、担当者の行。

識別子／チップのルール

• 課題ID（例：ENG-148）は等幅フォント、12px、ink-3。
• ラベル：4pxの色付きドット、ラベルテキスト、任意の✕を含む丸みのあるピル。 ラベルごとの色相は任意とし、開発チームらしい色を選びます。
• サイクルチップ：細い枠線付きの小さな角丸ボックス Cycle 12。
• ステータスドット：状態に応じて内側にリング／塗りつぶしを入れた直径14pxの円。
• 優先度バー：識別子の右側にある短い縦棒4本。レベルに応じて棒を塗りつぶします。

実装上の制約（避けること／行うこと）

避けること	行うこと
指定された shadow-card トークン以外の影を追加する	カードには 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.05) のみを使用する
ステータスのパレット以外の明るい色を使う	文書化されたステータスカラー（Backlog はグレー／Todo は黄色／Progress は青／Review は紫／Done は緑）と #5e6ad2 のアクセントのみを使用する
Inter 以外のサンセリフ体を使う	'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif を使用する
行の高さに余裕を持たせすぎる	行の高さは40px未満（目標は約36px）に保つ — Linear の特徴は情報密度の高さです
lorem ipsum を使う	Linear らしい実際の内容を書く：ENG-148、DES-22、INF-9 のような識別子、Cycle 12 のようなサイクル名、「Auth middleware refactor」のようなタイトル
アバターを四角形で表示する	常に円形にし、サイズは18〜24pxにする
ダークテーマにする	ライトテーマで表示する — ページは #f4f5f6、カードは #ffffff
T-1 のような仮のチーム接頭辞を使う	実際のチームらしい接頭辞を使う：ENG / DES / INF / OPS