GitHub 대시보드 스킬
FlowAI / Soft Paper Workspace 시각적 스타일로 단일 화면 GitHub 저장소 분석 대시보드를 만듭니다: 따뜻한 오프화이트 캔버스, 흰색 둥근 패널, 고정된 왼쪽 사이드바, 컴팩트한 KPI 카드, 파스텔 색상의 상태 표시기, 조밀한 테이블, 저대비 얇은 선.
리소스 맵
github-dashboard/
├── SKILL.md
├── example.html ← 렌더링된 참조 대시보드
└── references/
├── template.html ← 라이브 아티팩트 호환 HTML 템플릿
├── example-data.json ← 정규화된 공개 GitHub 데이터 형태
├── artifact-example.json ← 최소 라이브 아티팩트 생성 입력
└── provenance-example.json ← 안전한 출처/출처 예시
이 스킬을 사용해야 하는 경우
사용자가 단일 GitHub 저장소에 대한 대시보드 또는 보고서를 요청할 때 사용하세요. 예를 들어:
- 저장소 성장 대시보드
- 오픈소스 프로젝트 건강 보고서
- GitHub 별표 / 포크 / 기여자 분석
- 이슈 및 풀 리퀘스트 활동 페이지
- 관리자 / 기여자 대시보드
사용자가 새로 고침 가능성, 소스 감사 가능성 또는 정기 업데이트를 요청하는 경우 라이브 아티팩트 소스 세트(template.html, data.json, artifact.json, provenance.json)를 생성하고 live-artifact 계약을 따르세요. 시각적 아티팩트만 필요한 경우 자체 포함된 index.html을 생성하세요.
워크플로우
-
저장소 범위 확인
- 요청에서
owner/repo를 파싱합니다. - 이 v1 스킬은 하나의 저장소로 범위가 제한됩니다. 여러 저장소가 요청된 경우 사용자에게 기본 저장소를 선택하거나 저장소별로 하나의 대시보드를 만들도록 요청하세요.
- 저장소가 누락된 경우 GitHub URL 또는
owner/repo에 대해 간결한 질문을 하나 하세요.
- 요청에서
-
공개 GitHub 데이터 수집
- 가능한 경우 공개 저장소 데이터에 대해 GitHub CLI/API를 선호합니다.
- 현재 별표/포크/워처/열린 이슈 수:
GET /repos/{owner}/{repo}(stargazers_count,forks_count,watchers_count,open_issues_count). - 기여자:
GET /repos/{owner}/{repo}/contributors?per_page=100&page=N을 페이지네이션하고,contributions기준 내림차순 정렬 후 대시보드에서 사용하는 상위 N개를 가져옵니다. 1페이지만 사용 가능한 경우 총계를 첫 페이지 추정치로 표시합니다. - 이슈: 총 개수는 GitHub 검색 API(
repo:{owner}/{repo} is:issue)를 사용하거나,GET /repos/{owner}/{repo}/issues?state=all을 페이지네이션하고pull_request필드가 있는 항목을 필터링합니다. - 풀 리퀘스트: 총 개수는 GitHub 검색 API(
repo:{owner}/{repo} is:pr)를 사용하거나,GET /repos/{owner}/{repo}/pulls?state=all을 페이지네이션하고Link헤더를 통해 페이지를 계산합니다. - 최근 활동: 가장 최신 이슈와 풀 리퀘스트를 결합하고, 표시 가능한 행으로 정규화한 후 미리보기 목록을 5-10개 항목으로 제한합니다.
- 성장/델타 메트릭: GitHub REST는 완전한 과거 별표/포크 델타를 제공하지 않습니다. 사용 가능한 경우 GraphQL, stargazer 이벤트 스냅샷, Events API를 사용하거나, 델타를
provenance.json에서 추정/합성으로 명시적으로 표시합니다. - 인증 토큰, 원시 HTTP 봉투, 쿠키, 속도 제한 헤더 또는 개인 메타데이터를 저장하지 마세요.
-
대시보드 데이터로 정규화
- 필수
repository:name,fullName,url,description,language,license,created,lastUpdated. - 필수
metrics: 별표, 포크, 기여자, 이슈, 풀 리퀘스트. 표시 가능한 총계와 작은 델타 또는 성장 노트를 저장합니다. - 필수
contributors:login,avatar,contributions를 포함한 상위 5-8명의 기여자. - 필수
recentActivity:title,typeText,typeClass,label,labelClass,author,authorAvatar,updated를 포함한 표시 가능한 행. 이슈/PR 전환에 템플릿 조건문을 사용하지 마세요. - 차트 데이터는 GitHub가 정확한 히스토리를 제공하지 않는 경우에만 합성 데이터일 수 있습니다. 변환 내역을 출처에 문서화하세요.
- 필수
-
시각적 시스템 적용
- 활성화된
DESIGN.md토큰이 있는 경우 사용합니다. - 디자인 시스템이 제공되지 않은 경우
references/template.html에 반영된 Soft Paper 기본값을 사용합니다:#F2F2F0캔버스, 흰색 카드,#ECECEA테두리,#0A0A0A잉크, Geist/Inter 타이포그래피, 256px 사이드바, 48px 상단바, 16px 카드 반경. - 색상은 작고 의미론적으로 유지합니다: 녹색은 건강한 메트릭, 황색은 경고, 파란색은 기능/PR 레이블, 빨간색은 결함 또는 위험에만 사용합니다.
- 활성화된
-
페이지 레이아웃
- 셸: 256px 사이드바 + 메인 패널, 둘 다 흰색, 둥근 모서리 16px, 1px 얇은 테두리.
- 상단바: 왼쪽에 저장소 컨텍스트, 오른쪽에 새로 고침/내보내기/액션 기능.
- 헤더: 저장소 이름, 설명, 날짜/설정/액션 행.
- KPI 스트립: 별표, 포크, 기여자, 이슈, PR을 위한 5개의 컴팩트 카드.
- 메인 그리드: 2fr/1fr 분할. 왼쪽에는 성장 차트 또는 활동 테이블, 오른쪽에는 상위 기여자/건강 카드.
- 푸터: 작고 흐릿한 텍스트로 출처/마지막 업데이트 날짜.
-
아티팩트 작성
- 정적 아티팩트의 경우 인라인 CSS와 외부 JS 라이브러리 없이 자체 포함된
index.html하나를 작성합니다. - 라이브 아티팩트의 경우
template.html,data.json,artifact.json,provenance.json을 작성하고,index.html은 데몬에 의해 생성됩니다. - 주요 영역에 안정적인
data-od-id값을 태깅합니다:sidebar,topbar,repo-header,kpi-strip,growth-chart,contributors,activity,provenance.
- 정적 아티팩트의 경우 인라인 CSS와 외부 JS 라이브러리 없이 자체 포함된
시각적 규칙
- 라이트 모드만 지원합니다.
- 데스크톱에서는 256px 고정 사이드바, 좁은 화면에서는 스택.
- 첫 번째 행에 4~5개의 KPI 카드.
- 모든 숫자에는 표(table) 정렬 숫자를 사용합니다.
- 아바타는 원형이며, 테이블 및 기여자 목록에서 28-32px입니다.
- 테이블은 13px 본문 텍스트, 11px 대문자 열 레이블, 1px 행 구분선을 사용합니다.
- 카드는 얇은 테두리와 최대한 보이지 않는 그림자를 사용합니다:
0 1px 2px rgba(10,10,10,.04), 0 1px 1px rgba(10,10,10,.02). - 작은 워크플로우/저장소 아이콘 자리 표시자를 제외하고 그라데이션을 사용하지 마세요.
- 페이지가 GitHub 자체처럼 보이지 않도록 하세요. 이는 GitHub UI 클론이 아닌 맞춤형 운영 대시보드입니다.
자체 점검
- 모든 메트릭에는 출처 또는 출처 노트가 있습니다.
- 개인 데이터 또는 자격 증명이 저장되지 않습니다.
- 데이터 레이블은 저장소에 특화되어 있으며 자리 표시자가 아닙니다.
- 50% 확대/축소에서도 화면이 명확하게 읽힙니다.
- 대시보드는 영역당 최대 하나의 단색 검정 기본 작업 버튼을 사용합니다.
- 상태 레이블과 이슈/PR 칩은 포화된 배지가 아닌 파스텔 색상의 알약 모양입니다.