aurora-ember-bio-lab/splatstudio

Skill de Tablero de GitHub

Crea un tablero analítico de un solo repositorio de GitHub en el estilo visual de FlowAI / Soft Paper Workspace: lienzo blanco cálido, paneles blancos redondeados, una barra lateral fija a la izquierda, tarjetas KPI compactas, píldoras pastel, tablas densas y líneas finas de bajo contraste.

Mapa de recursos

github-dashboard/
├── SKILL.md
├── example.html                         ← tablero de referencia renderizado
└── references/
    ├── template.html                    ← plantilla HTML compatible con live-artifact
    ├── example-data.json                ← forma normalizada de datos públicos de GitHub
    ├── artifact-example.json            ← entrada mínima para crear live-artifact
    └── provenance-example.json          ← ejemplo de fuente/procedencia segura

Cuándo usar este skill

Úsalo cuando el usuario solicite un tablero o informe sobre un único repositorio de GitHub, por ejemplo:

• tablero de crecimiento de repositorio
• informe de salud de proyecto open-source
• análisis de estrellas / bifurcaciones / contribuyentes de GitHub
• página de actividad de issues y pull requests
• tablero de mantenedores / contribuyentes

Si el usuario solicita capacidad de actualización, auditoría de fuentes o actualizaciones programadas, genera el conjunto de fuentes live-artifact (template.html, data.json, artifact.json, provenance.json) y sigue el contrato de live-artifact. Si solo necesita un artefacto visual, genera un index.html autónomo.

Flujo de trabajo

1. Resolver el alcance del repositorio

   • Extrae owner/repo del briefing.
   • Este skill v1 está limitado a un repositorio. Si se solicitan varios repositorios, pide al usuario que seleccione el repositorio principal o crea un tablero por repositorio.
   • Si falta el repositorio, haz una pregunta concisa por la URL de GitHub o owner/repo.

2. Recolectar datos públicos de GitHub

   • Prefiere la CLI/API de GitHub para datos públicos de repositorios cuando estén disponibles.
   • Estrellas/bifurcaciones/observadores/issues abiertos actuales: GET /repos/{owner}/{repo} (stargazers_count, forks_count, watchers_count, open_issues_count).
   • Contribuyentes: paginación GET /repos/{owner}/{repo}/contributors?per_page=100&page=N, ordenar por contributions descendente y tomar los primeros N que use el tablero. Si solo está disponible la página 1, etiqueta los totales como estimaciones de primera página.
   • Issues: usa la API de búsqueda de GitHub (repo:{owner}/{repo} is:issue) para totales, o paginación GET /repos/{owner}/{repo}/issues?state=all y filtra elementos con campo pull_request.
   • Pull requests: usa la API de búsqueda de GitHub (repo:{owner}/{repo} is:pr) para totales, o paginación GET /repos/{owner}/{repo}/pulls?state=all y cuenta páginas mediante el encabezado Link.
   • Actividad reciente: combina los issues y pull requests más nuevos, normalízalos en filas listas para mostrar y limita la lista previa a 5–10 elementos.
   • Métricas de crecimiento/delta: la API REST de GitHub no expone deltas históricos completos de estrellas/bifurcaciones. Usa GraphQL, instantáneas de eventos de stargazers, la API de Events donde esté disponible, o marca explícitamente los deltas como estimados/sintéticos en provenance.json.
   • No almacenes tokens de autenticación, envoltorios HTTP sin procesar, cookies, encabezados de límite de tasa ni metadatos privados.

3. Normalizar en datos del tablero

   • Obligatorio repository: name, fullName, url, description, language, license, created, lastUpdated.
   • Obligatorio metrics: estrellas, bifurcaciones, contribuyentes, issues, pull requests. Almacena totales listos para mostrar más pequeños deltas o notas de crecimiento.
   • Obligatorio contributors: 5–8 principales contribuyentes con login, avatar y contributions.
   • Obligatorio recentActivity: filas listas para mostrar con title, typeText, typeClass, label, labelClass, author, authorAvatar y updated. No dependas de condicionales de plantilla para alternar issue/PR.
   • Los datos de gráficos pueden ser sintéticos solo cuando GitHub no exponga el historial exacto; documenta la transformación en procedencia.

4. Aplicar el sistema visual

   • Usa los tokens activos de DESIGN.md cuando estén presentes.
   • Si no se proporciona sistema de diseño, usa los valores predeterminados de Soft Paper reflejados en references/template.html: lienzo #F2F2F0, tarjetas blancas, bordes #ECECEA, tinta #0A0A0A, tipografía Geist/Inter, sidebar de 256px, barra superior de 48px y radio de tarjeta de 16px.
   • Mantén el color pequeño y semántico: verde para métricas saludables, ámbar para advertencia, azul para etiquetas de feature/PR, rojo solo para defectos o riesgo.

5. Diseñar la página

   • Estructura: sidebar de 256px + panel principal, ambos blancos, redondeados 16px, borde de 1px tipo hairline.
   • Barra superior: contexto del repositorio a la izquierda, acciones de actualización/exportación a la derecha.
   • Encabezado: nombre del repositorio, descripción y fila de fecha/configuraciones/acciones.
   • Franja KPI: 5 tarjetas compactas para estrellas, bifurcaciones, contribuyentes, issues, PR.
   • Cuadrícula principal: división 2fr/1fr con un gráfico de crecimiento o tabla de actividad a la izquierda y principales contribuyentes/tarjetas de salud a la derecha.
   • Pie de página: nota de procedencia/última actualización en texto pequeño y atenuado.

6. Escribir el artefacto

   • Para un artefacto estático, escribe un solo index.html autónomo con CSS en línea y sin bibliotecas JS externas.
   • Para un artefacto dinámico, escribe template.html, data.json, artifact.json y provenance.json; index.html lo deriva el daemon.
   • Etiqueta las regiones principales con valores estables data-od-id: sidebar, topbar, repo-header, kpi-strip, growth-chart, contributors, activity, provenance.

Reglas visuales

• Solo modo claro.
• Sidebar fija de 256px en escritorio; se apila en pantallas estrechas.
• 4 o 5 tarjetas KPI en la primera fila.
• Usa números con alineación tabular en todos los conteos.
• Los avatares son circulares, de 28–32px en tablas y listas de contribuyentes.
• Las tablas usan texto del cuerpo de 13px, etiquetas de columna en mayúsculas de 11px y divisores de fila de 1px.
• Las tarjetas usan bordes tipo hairline y una sombra apenas visible como máximo: 0 1px 2px rgba(10,10,10,.04), 0 1px 1px rgba(10,10,10,.02).
• No uses degradados excepto en pequeños iconos de flujo de trabajo/repositorio.
• No hagas que la página parezca GitHub. Este es un tablero operativo personalizado, no un clon de la interfaz de usuario de GitHub.

Autocomprobación

• Cada métrica tiene una fuente o una nota de procedencia.
• No se persisten datos privados ni credenciales.
• Las etiquetas de datos son específicas del repositorio, no marcadores de posición.
• La pantalla se sigue leyendo claramente con zoom al 50%.
• El tablero usa como máximo una acción principal negra sólida por área.
• Las etiquetas de estado y las fichas de issue/PR son píldoras pastel, no insignias saturadas.