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.

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

orbit-github

NPX Install

Tags

SKILL.md Content