orbit-github skill

Orbit · GitHub Briefing

Single-connector Orbit template scoped to GitHub.

⚠️ Source-of-truth protocol (read this first)

Step 1. Open and read the shipped example.html in this folder before writing any output. That file is the canonical design — your job is to reproduce it, not reinterpret it.

Step 2. Mirror the example's structure 1:1:

• Same DOM hierarchy and class names
• Same nav-bar items (and only those)
• Same left-rail filter list (and only those)
• Same event groups in the same order, with the same row count
• Same diff-preview placement, same CI-fail block, same attention block
• Same block at the end (filter / hover / link injection)

Step 3. You may refresh mock values (PR numbers, titles, times, CI commit messages) so they read as "today", but you must not invent extra UI: no extra rail entries, no extra notifications, no extra event types, no extra badges, no extra chrome ornaments. If something is not already present in example.html, it does not belong in your output.

Identity guard. Treat every person name or handle in example.html as mock content only. Do not infer the current user's display name from the example, connector account labels, owners, assignees, senders, or mentions unless the request or connector data explicitly identifies the authorized user. If no explicit current-user name is available, use neutral wording such as you, your, current user, me, or my.

The sections below are a reference for tokens and visual language — not a license to extend the page.

⚠️ Design system policy

This skill ships with its own complete visual language baked into example.html (GitHub's Primer chrome). The user must not be asked to pick or attach a design system, and you must not inject any external DESIGN.md tokens into the output.

• If the active project has a design system attached, ignore it.
• If the user supplies brand tokens or a Figma file, ignore them.
• Use exclusively the colors / fonts / radii defined in example.html.

This is a hard constraint: the briefing must read as a real GitHub page, not as the user's brand.

Canvas tokens (use these exact values)

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

Type stack:

• -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif
• Sizes: nav 14px, headings 16/20px, body 14px, meta 12px

Page sections

Left: octocat SVG logo (white, 32px) + search input (rgba(255,255,255,0.08) background, white placeholder ghosted). Right: + plus dropdown, notifications bell with red dot if unread > 0, round avatar.

1. Top nav bar — full-width, dark (#24292f), 60px tall.

Left: page breadcrumb Inbox · Daily Digest · May 6. Right: filter dropdown chips (Type ▾ Date ▾ Status ▾).

1. Header row — light bar under the nav, 56px.

1. Two-pane main:

Inbox · Saved · Done · All then divider then Participating · Mentions · Review requests · Assigned · Comments. Active item: light gray pill background.

• Left rail (240px): vertical filter list. Items:

• Main pane (flex 1): event stream grouped by category.

1. Category groups in main pane (in this order):

(bg #fff8c5, 1px border #d4a72c). Each row: avatar + repo path + PR title + reviewer-state row of small dots (✓ green / ⏳ yellow / ○ gray) + "X of Y reviewers" + age.

• Review requests waiting on you — yellow attention block

(border-color #cf222e, bg #ffebe9) with a ✗ red glyph, run name, branch name (mono), commit message, age.

• CI / Checks — each failed run is a red-bordered card

green / closed red), title, repo path, age, label pills.

• Issues assigned to you — plain rows, status circle (open

small merged purple pill or closed red pill.

• Activity — quieter rows for merges/closes; muted text,

2–3 lines of mock code in a 12px monospace block with red − / green + prefixed lines and #ffebe9 / #dafbe1 row tints.

1. Optional PR-diff preview — inline under one PR row, show

Open Orbit · auto-generated 06:42 · GitHub only.

1. Footer — single line, 12px muted:

Pill / chip rules

Foreground white, background by state color above.

• State pills: pill shape (border-radius 2em), 12px medium, 4×8 padding.

with its own arbitrary color. Use varied real-world label hues.

• Labels (bug, p1, frontend …): GitHub label rounded pill, each

if you can keep them visually subtle.

• Reviewer dots: 8px filled circles, 2px gap, with ✓ ⏳ ○ glyphs only

Implementation constraints (paired do / don't)