aurora-ember-bio-lab/splatstudio

Skill de Painel GitHub

Crie um painel analítico de repositório GitHub em tela única no estilo visual FlowAI / Soft Paper Workspace: tela off-white quente, painéis brancos arredondados, barra lateral fixa à esquerda, cartões KPI compactos, pílulas pastel, tabelas densas e linhas finas de baixo contraste.

Mapa de recursos

github-dashboard/
├── SKILL.md
├── example.html                         ← painel de referência renderizado
└── references/
    ├── template.html                    ← template HTML compatível com artefato dinâmico
    ├── example-data.json                ← formato normalizado de dados públicos do GitHub
    ├── artifact-example.json            ← entrada mínima para criar artefato dinâmico
    └── provenance-example.json          ← exemplo de fonte/proveniência segura

Quando usar esta skill

Use quando o usuário pedir um painel ou relatório sobre um único repositório GitHub, por exemplo:

• painel de crescimento do repositório
• relatório de saúde de projeto open source
• análise de estrelas / forks / contribuidores do GitHub
• página de atividade de issues e pull requests
• painel de mantenedor / contribuidor

Se o usuário pedir capacidade de atualização, auditoria de fonte ou agendamento, produza o conjunto de artefatos dinâmicos (template.html, data.json, artifact.json, provenance.json) e siga o contrato de live-artifact. Se ele precisar apenas de um artefato visual, produza um index.html autocontido.

Fluxo de trabalho

1. Resolver escopo do repositório

   • Extraia owner/repo da solicitação.
   • Esta skill v1 é focada em um repositório. Se múltiplos repositórios forem solicitados, peça ao usuário para escolher o repositório principal ou crie um painel por repositório.
   • Se o repositório estiver faltando, faça uma pergunta concisa sobre a URL do GitHub ou owner/repo.

2. Coletar dados públicos do GitHub

   • Prefira CLI/API do GitHub para dados de repositório público quando disponível.
   • Contagem atual de estrelas/forks/watchers/issues abertas: GET /repos/{owner}/{repo} (stargazers_count, forks_count, watchers_count, open_issues_count).
   • Contribuidores: paginação GET /repos/{owner}/{repo}/contributors?per_page=100&page=N, ordenar por contributions decrescente, e pegar os top N usados pelo painel. Se apenas a página 1 estiver disponível, marque os totais como estimativas de primeira página.
   • Issues: use a API de Pesquisa do GitHub (repo:{owner}/{repo} is:issue) para contagens totais, ou paginação GET /repos/{owner}/{repo}/issues?state=all e filtre itens com campo pull_request.
   • Pull requests: use a API de Pesquisa do GitHub (repo:{owner}/{repo} is:pr) para contagens totais, ou paginação GET /repos/{owner}/{repo}/pulls?state=all e conte páginas via cabeçalho Link.
   • Atividade recente: combine as issues e pull requests mais recentes, normalize em linhas prontas para exibição e limite a lista de pré-visualização a 5–10 itens.
   • Métricas de crescimento/delta: a REST do GitHub não expõe deltas históricos completos de estrelas/forks. Use GraphQL, snapshots de eventos stargazer, a API de Eventos quando disponível, ou marque explicitamente deltas como estimados/sintéticos em provenance.json.
   • Não armazene tokens de autenticação, envelopes HTTP brutos, cookies, cabeçalhos de limite de taxa ou metadados privados.

3. Normalizar em dados do painel

   • repository obrigatório: name, fullName, url, description, language, license, created, lastUpdated.
   • metrics obrigatórios: estrelas, forks, contribuidores, issues, pull requests. Armazene totais prontos para exibição mais pequenos deltas ou notas de crescimento.
   • contributors obrigatórios: top 5–8 contribuidores com login, avatar e contributions.
   • recentActivity obrigatório: linhas prontas para exibição com title, typeText, typeClass, label, labelClass, author, authorAvatar e updated. Não dependa de condicionais de template para alternar entre issue/PR.
   • Dados de gráfico podem ser sintéticos apenas quando o GitHub não expõe o histórico exato; documente a transformação na proveniência.

4. Aplicar o sistema visual

   • Use os tokens ativos do DESIGN.md quando presentes.
   • Se nenhum sistema de design for fornecido, use os padrões Soft Paper refletidos em references/template.html: tela #F2F2F0, cartões brancos, bordas #ECECEA, tinta #0A0A0A, tipografia Geist/Inter, barra lateral de 256px, barra superior de 48px e raio de cartão de 16px.
   • Mantenha as cores pequenas e semânticas: verde para métricas saudáveis, âmbar para aviso, azul para labels de recurso/PR, vermelho apenas para defeitos ou risco.

5. Estruturar a página

   • Estrutura: barra lateral de 256px + painel principal, ambos brancos, arredondados 16px, borda de 1px fina.
   • Barra superior: contexto do repositório à esquerda, ações de atualizar/exportar à direita.
   • Cabeçalho: nome do repositório, descrição e linha de data/configurações/ações.
   • Faixa de KPI: 5 cartões compactos para estrelas, forks, contribuidores, issues, PRs.
   • Grade principal: divisão 2fr/1fr com gráfico de crescimento ou tabela de atividade à esquerda e top contribuidores/cartões de saúde à direita.
   • Rodapé: nota de proveniência/última atualização em texto pequeno e suave.

6. Escrever o artefato

   • Para um artefato estático, escreva um único index.html autocontido com CSS inline e sem bibliotecas JS externas.
   • Para um artefato dinâmico, escreva template.html, data.json, artifact.json e provenance.json; index.html é derivado pelo daemon.
   • Marque regiões principais com valores data-od-id estáveis: sidebar, topbar, repo-header, kpi-strip, growth-chart, contributors, activity, provenance.

Regras visuais

• Apenas modo claro.
• Barra lateral fixa de 256px em desktop; empilhada em telas estreitas.
• 4 ou 5 cartões KPI na primeira linha.
• Use numerais de alinhamento tabular para todas as contagens.
• Avatares são circulares, 28–32px em tabelas e listas de contribuidores.
• Tabelas usam texto corporal de 13px, labels de coluna em maiúsculas de 11px, divisores de linha de 1px.
• Cartões usam bordas finas e no máximo uma sombra quase invisível: 0 1px 2px rgba(10,10,10,.04), 0 1px 1px rgba(10,10,10,.02).
• Não use gradientes, exceto pequenos placeholders de ícone de fluxo de trabalho/repo.
• Não faça a página parecer com o próprio GitHub. Este é um painel operacional personalizado, não um clone da interface do GitHub.

Autoverificação

• Cada métrica tem uma fonte ou uma nota de proveniência.
• Nenhum dado privado ou credencial é persistido.
• Os labels de dados são específicos do repositório, não placeholders.
• A tela ainda é legível com 50% de zoom.
• O painel usa no máximo uma ação primária preta sólida por área.
• Labels de status e chips de issue/PR são pílulas pastel, não badges saturados.