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
<script> 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
Top nav bar — full-width, dark (#24292f), 60px tall.
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.
Header row — light bar under the nav, 56px.
Left: page breadcrumb Inbox · Daily Digest · May 6.
Right: filter dropdown chips (Type ▾ Date ▾ Status ▾).
Two-pane main:
- Left rail (240px): vertical filter list. Items:
Inbox · Saved · Done · All then divider then
Participating · Mentions · Review requests · Assigned · Comments.
Active item: light gray pill background.
- Main pane (flex 1): event stream grouped by category.
Category groups in main pane (in this order):
- Review requests waiting on you — yellow attention block
(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.
- CI / Checks — each failed run is a red-bordered card
(border-color
#cf222e, bg #ffebe9) with a ✗ red glyph,
run name, branch name (mono), commit message, age.
- Issues assigned to you — plain rows, status circle (open
green / closed red), title, repo path, age, label pills.
- Activity — quieter rows for merges/closes; muted text,
small
merged purple pill or closed red pill.
Optional PR-diff preview — inline under one PR row, show
2–3 lines of mock code in a 12px monospace block with red − /
green + prefixed lines and #ffebe9 / #dafbe1 row tints.
Footer — single line, 12px muted:
Open Orbit · auto-generated 06:42 · GitHub only.
Pill / chip rules
- State pills: pill shape (border-radius 2em), 12px medium, 4×8 padding.
Foreground white, background by state color above.
- Labels (
bug, p1, frontend …): GitHub label rounded pill, each
with its own arbitrary color. Use varied real-world label hues.
- Reviewer dots: 8px filled circles, 2px gap, with
✓ ⏳ ○ glyphs only
if you can keep them visually subtle.
Implementation constraints (paired do / don't)
| Don't |
Do |
| Mix light and dark themes |
Stay on the light Primer theme (#f6f8fa page bg, #ffffff cards) |
| Use non-GitHub typography |
Use -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif exclusively |
| Render avatars as squares or rounded squares |
Always circles, with overlap ≤ 6px for reviewer stacks |
| Use shadows / gradients / glows on chrome |
Flat surfaces; differentiate with #d0d7de 1px borders |
| Use lorem ipsum |
Write real-shaped GitHub copy: PR titles like feat: orbit briefing card, branches like chore/upgrade-deps, commit subjects under 72 chars |
| Render a CI failure as a normal row |
Wrap in a red-bordered card (#cf222e border, #ffebe9 bg) with a red ✗ glyph and run name |
| Render a review request as a normal row |
Sit it in the yellow attention block (#fff8c5 bg, #d4a72c border) with reviewer status dots row |
Use placeholder repo names like org/repo |
Use nexu-io/open-design (this org's actual primary repo) |
| Pluck arbitrary label colors |
Use realistic dev-team hues — bug red, enhancement blue, documentation light blue, frontend purple |
1---2name: orbit-github3description: Open Orbit briefing skill — selected by the Orbit pipeline when GitHub is the user's only connected connector, or when the user explicitly scopes their daily digest to GitHub. Pulls the past 24 hours of PRs, review requests, issues, CI runs, and merges from the user's authenticated GitHub connection and renders them in a layout that mirrors GitHub's native Notifications + PR-diff visual language. This skill should not be triggered manually — it is invoked by Orbit's daily-digest scheduler against live GitHub data.4---5
6# Orbit · GitHub Briefing
7
8Single-connector Orbit template scoped to GitHub.
9
10## ⚠️ Source-of-truth protocol (read this first)
11
12**Step 1.** Open and read the shipped `example.html` in this folder
13before writing any output. That file is the canonical design — your
14job is to **reproduce it**, not reinterpret it.
15
16**Step 2.** Mirror the example's structure 1:1:
17- Same DOM hierarchy and class names
18- Same nav-bar items (and only those)
19- Same left-rail filter list (and only those)
20- Same event groups in the same order, with the same row count
21- Same diff-preview placement, same CI-fail block, same attention block
22- Same `<script>` block at the end (filter / hover / link injection)
23
24**Step 3.** You may refresh mock values (PR numbers, titles, times,
25CI commit messages) so they read as "today", but you must **not**
26invent extra UI: no extra rail entries, no extra notifications,
27no extra event types, no extra badges, no extra chrome ornaments. If
28something is not already present in `example.html`, it does not
29belong in your output.
30
31**Identity guard.** Treat every person name or handle in `example.html`
32as mock content only. Do not infer the current user's display name from
33the example, connector account labels, owners, assignees, senders, or
34mentions unless the request or connector data explicitly identifies the
35authorized user. If no explicit current-user name is available, use
36neutral wording such as `you`, `your`, `current user`, `me`, or `my`.
37
38The sections below are a **reference for tokens and visual language** —
39not a license to extend the page.
40
41## ⚠️ Design system policy
42
43This skill ships with its **own** complete visual language baked into
44`example.html` (GitHub's Primer chrome). The user must **not** be
45asked to pick or attach a design system, and you must **not** inject
46any external DESIGN.md tokens into the output.
47
48- If the active project has a design system attached, **ignore it**.
49- If the user supplies brand tokens or a Figma file, **ignore them**.
50- Use exclusively the colors / fonts / radii defined in `example.html`.
51
52This is a hard constraint: the briefing must read as a real GitHub
53page, not as the user's brand.
54
55## Canvas tokens (use these exact values)
56
57```
58page bg: #f6f8fa
59card bg: #ffffff
60nav bar: #24292f /* GitHub black header */
61nav text: #ffffff
62ink: #1f2328
63muted: #59636e
64border: #d0d7de
65hairline: rgba(208,215,222,0.32)
66
67state · open: #1a7f37
68state · merged: #8250df
69state · closed: #cf222e
70state · draft: #6e7781
71
72attention bg: #fff8c5 /* yellow review-request block */
73attention border: #d4a72c
74ci-fail bg: #ffebe9
75ci-fail border: #cf222e
76```
77
78Type stack:
79- `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
80- Sizes: nav 14px, headings 16/20px, body 14px, meta 12px
81
82## Page sections
83
841. **Top nav bar** — full-width, dark (`#24292f`), 60px tall.
85 Left: octocat SVG logo (white, 32px) + search input
86 (`rgba(255,255,255,0.08)` background, white placeholder ghosted).
87 Right: `+` plus dropdown, notifications bell with red dot if
88 unread > 0, round avatar.
89
902. **Header row** — light bar under the nav, 56px.
91 Left: page breadcrumb `Inbox · Daily Digest · May 6`.
92 Right: filter dropdown chips (`Type ▾ Date ▾ Status ▾`).
93
943. **Two-pane main**:
95 - **Left rail** (240px): vertical filter list. Items:
96 `Inbox · Saved · Done · All` then divider then
97 `Participating · Mentions · Review requests · Assigned · Comments`.
98 Active item: light gray pill background.
99 - **Main pane** (flex 1): event stream grouped by category.
100
1014. **Category groups in main pane** (in this order):
102 - **Review requests waiting on you** — yellow attention block
103 (bg `#fff8c5`, 1px border `#d4a72c`). Each row: avatar + repo
104 path + PR title + reviewer-state row of small dots
105 (✓ green / ⏳ yellow / ○ gray) + "X of Y reviewers" + age.
106 - **CI / Checks** — each failed run is a red-bordered card
107 (border-color `#cf222e`, bg `#ffebe9`) with a `✗` red glyph,
108 run name, branch name (mono), commit message, age.
109 - **Issues assigned to you** — plain rows, status circle (open
110 green / closed red), title, repo path, age, label pills.
111 - **Activity** — quieter rows for merges/closes; muted text,
112 small `merged` purple pill or `closed` red pill.
113
1145. **Optional PR-diff preview** — inline under one PR row, show
115 2–3 lines of mock code in a 12px monospace block with red `−` /
116 green `+` prefixed lines and `#ffebe9` / `#dafbe1` row tints.
117
1186. **Footer** — single line, 12px muted:
119 `Open Orbit · auto-generated 06:42 · GitHub only`.
120
121## Pill / chip rules
122
123- State pills: pill shape (border-radius 2em), 12px medium, 4×8 padding.
124 Foreground white, background by state color above.
125- Labels (`bug`, `p1`, `frontend` …): GitHub label rounded pill, each
126 with its own arbitrary color. Use varied real-world label hues.
127- Reviewer dots: 8px filled circles, 2px gap, with `✓ ⏳ ○` glyphs only
128 if you can keep them visually subtle.
129
130## Implementation constraints (paired do / don't)
131
132| Don't | Do |
133|---|---|
134| Mix light and dark themes | Stay on the light Primer theme (`#f6f8fa` page bg, `#ffffff` cards) |
135| Use non-GitHub typography | Use `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif` exclusively |
136| Render avatars as squares or rounded squares | Always circles, with overlap `≤ 6px` for reviewer stacks |
137| Use shadows / gradients / glows on chrome | Flat surfaces; differentiate with `#d0d7de` 1px borders |
138| Use lorem ipsum | Write real-shaped GitHub copy: PR titles like `feat: orbit briefing card`, branches like `chore/upgrade-deps`, commit subjects under 72 chars |
139| Render a CI failure as a normal row | Wrap in a red-bordered card (`#cf222e` border, `#ffebe9` bg) with a red `✗` glyph and run name |
140| Render a review request as a normal row | Sit it in the yellow attention block (`#fff8c5` bg, `#d4a72c` border) with reviewer status dots row |
141| Use placeholder repo names like `org/repo` | Use `nexu-io/open-design` (this org's actual primary repo) |
142| Pluck arbitrary label colors | Use realistic dev-team hues — `bug` red, `enhancement` blue, `documentation` light blue, `frontend` purple |
Nexu