Orbit · Briefing Linear

Template Orbit de conector único com escopo para Linear.

⚠️ Protocolo de fonte de verdade (leia isto primeiro)

Passo 1. Abra e leia o arquivo enviado example.html nesta pasta antes de escrever qualquer saída. Esse arquivo é o design canônico — seu trabalho é reproduzi-lo, não reinterpretá-lo.

Passo 2. Espelhe a estrutura do exemplo 1:1:

• Mesma hierarquia DOM e nomes de classe
• Mesma barra de ferramentas superior (breadcrumb + alternador de visualização + barra de ciclo + alternador de tema), exatamente esses itens
• Mesmas entradas na barra lateral esquerda na mesma ordem
• Mesmos grupos de issues ("Precisa da sua atenção" → "Atualizado ontem") com a mesma contagem de linhas e o mesmo comportamento de expansão padrão
• Mesmo sistema de barra de prioridade / ponto de status
• Mesmo bloco <script> no final (alternador / tema / teclado / injeção de link Linear)

Passo 3. Você pode atualizar valores de mock (identificadores de issue, títulos, rótulos, idades, atribuídos) para que leiam como "hoje", mas você deve não adicionar entradas extras na barra lateral, grupos extras, campos extras no painel de visualização, ou quaisquer ornamentos de interface não presentes em example.html.

Proteção de identidade. Trate cada nome de pessoa ou handle em example.html apenas como conteúdo de mock. Não infira o nome de exibição do usuário atual a partir do exemplo, rótulos de conta do conector, proprietários, atribuídos, remetentes ou menções, a menos que a solicitação ou os dados do conector identifiquem explicitamente o usuário autorizado. Se nenhum nome de usuário atual explícito estiver disponível, use linguagem neutra como you, your, current user, me, ou my.

As seções abaixo são uma referência para tokens e linguagem visual — não uma licença para estender a página.

⚠️ Política do sistema de design

Esta skill envia com sua própria linguagem visual completa incorporada em example.html (a UI compacta característica da Linear). O usuário não deve ser solicitado a escolher ou anexar um sistema de design, e você não deve injetar quaisquer tokens externos de DESIGN.md na saída.

• Se o projeto ativo tiver um sistema de design anexado, ignore-o.
• Se o usuário fornecer tokens de marca ou um arquivo Figma, ignore-os.
• Use exclusivamente as cores / fontes / raios definidos em example.html.

Esta é uma restrição rígida: o briefing deve parecer uma página real da Linear, não a marca do usuário.

Tokens de tela — tema claro (padrão para envio)

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)

Paleta de pontos de status (deve usar exatamente estes):

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 */

Ícone de prioridade = 4 barras verticais pequenas, altura ascendente. Barras preenchidas indicam nível: 0 Nenhum → 4 Urgente. Urgente usa #d4513a; Alto usa #c77d1a; Médio/Baixo usa #505259.

Pilha de tipos:

• 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif
• Mono: 'Berkeley Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace
• Tamanhos: nav 13px, título da linha 13.5px, meta 12px, cabeçalhos 11px em maiúsculas com espaçamento entre letras de 0.04em

Seções da página

1. Barra de ferramentas superior — linha única, 44px de altura, sem sombra, borda inferior fina. Esquerda: breadcrumb Orbit › Daily Digest › May 6 (13px, separadores …›… em ink-4). Em seguida, um divisor fino, então o alternador de visualização ▼ My issues. Direita: 🔍 search, + new, ▦ display options, avatar.

2. Barra de progresso do ciclo — slot à direita da área do breadcrumb, uma linha: Cycle 12 · 60% complete · 3 days left. Renderizar como maiúsculas de 11px com uma pequena barra de progresso inline (60px de largura, 4px de altura, preenchimento de destaque).

3. Principal de três colunas:

   • Navegação esquerda (240px): vertical, sem fundo — itens a 13px. Seções: Inbox · My issues · Active · Backlog · All issues, então um divisor, então 📋 Triage · 🚫 Canceled · ✅ Completed. Linha ativa: fundo accent-bg, tinta accent.

…