Skills Architecture Dashboard

Skills Architecture Dashboard

Computer fetches all data live, builds a self-contained dashboard.html, and embeds a Refresh button that re-fetches from GitHub API directly in the browser — no re-running Computer required.

Model Routing (Perplexity Computer)

Outside Perplexity Computer: single model handles all steps.

Step 0 — Optional: Design Mockup (Nano Banana)

Generate a visual reference before writing code.

Dark-theme developer dashboard UI. Tabs: Overview, Spec, Ecosystem, Skills, Issues.
Background #0d1117. Purple accent #7c3aed. Green accent #10b981.
Top row: stat cards (stars, forks, open issues). Below: sortable data table.
Monospace font. GitHub dark palette. Minimal, no gradients.

Use as reference during HTML generation. Skip if Nano Banana unavailable.

Step 1 — Live Data Fetch (Gemini sub-agent)

Fetch all sources in parallel via browser and HTTP. Do NOT write to disk — hold results in memory and pass directly to the next step.

GitHub API endpoints

GET https://api.github.com/repos/agentskills/agentskills
GET https://api.github.com/repos/agentskills/agentskills/contributors?per_page=10
GET https://api.github.com/repos/agentskills/agentskills/issues?state=open&per_page=5
GET https://api.github.com/repos/anthropics/skills/contents/skills
GET https://api.github.com/repos/vercel-labs/agent-skills/contents
GET https://api.github.com/repos/elastic/agent-skills/contents
GET https://api.github.com/search/repositories?q=topic:agent-skills&sort=stars&per_page=20

Web sources (browse directly)

Step 2 — Validate & Structure (Claude Opus 4.6)

Receive in-memory data from Gemini. Validate and organize. Do NOT write to disk. Expected structure before passing to HTML generation:

repo_stats:        stars, forks, open_issues, watchers, top contributors
spec_fields:       name, description, license, compatibility, metadata, allowed-tools
disclosure_levels: Metadata (~100 tokens) → Instructions (<5000) → Resources (unlimited)
optional_dirs:     scripts/, references/, assets/
community_repos:   list of {name, url, stars, description, updated_at}
official_skills:   {anthropic: [], vercel: [], elastic: []}
open_issues:       list of {number, title, labels, days_open, url}

Pass structured data to GPT-5.3-Codex for HTML generation.

Step 3 — Generate Dashboard HTML (GPT-5.3-Codex sub-agent)

Build a single dashboard.html. All CSS and JS must be inline. No external dependencies.

Critical: Refresh mechanism

The dashboard must include a Refresh button that re-fetches live data from GitHub API directly in the browser using fetch() — without re-running Computer. Embed this JS logic in the HTML:

const GITHUB_API = 'https://api.github.com';
const ENDPOINTS = {
  repo:         `${GITHUB_API}/repos/agentskills/agentskills`,
  contributors: `${GITHUB_API}/repos/agentskills/agentskills/contributors?per_page=10`,
  issues:       `${GITHUB_API}/repos/agentskills/agentskills/issues?state=open&per_page=5`,
  anthropic:    `${GITHUB_API}/repos/anthropics/skills/contents/skills`,
  community:    `${GITHUB_API}/search/repositories?q=topic:agent-skills&sort=stars&per_page=20`,
  vercel:       `${GITHUB_API}/repos/vercel-labs/agent-skills/contents`,
  elastic:      `${GITHUB_API}/repos/elastic/agent-skills/contents`,
};
async function refreshDashboard() {
  // Show loading state on all stat cards
  // Fetch all endpoints in parallel with Promise.all()
  // Update DOM elements in place — no page reload
  // Update footer timestamp
  // Handle rate limit errors gracefully (show warning, keep existing data)
}

The Refresh button calls refreshDashboard(). Initial data is already embedded from Step 1 — the button only updates when clicked.

Dashboard tabs

1. Overview

• Stat cards: Stars / Forks / Open Issues / Contributors — each updates on Refresh
• "What are Skills?" summary paragraph
• Top contributors table 2. Spec Architecture
• SKILL.md anatomy: frontmatter block (expandable), body section, optional dirs tree
• Progressive Disclosure pyramid: Metadata → Instructions → Resources with token budgets
• Frontmatter fields table: field / required / max / description 3. Ecosystem Map
• Sortable table: Repo / Stars / Description / Last Updated
• Filter buttons: All / Anthropic / Vercel / Elastic / Community
• Stars and dates update on Refresh 4. Official Skills Catalog
• Card grid from anthropics/skills
• Toggle: Anthropic / Vercel / Elastic
• Each card: skill name + GitHub link 5. Open Issues
• Latest 5 issues: number / title / labels / days open / link
• Days open recalculates on Refresh from current timestamp

Design requirements

• Background: #0d1117
• Primary accent: #7c3aed (purple)
• Secondary accent: #10b981 (green)
• Monospace font: JetBrains Mono, fallback Consolas
• Responsive at 1280px+
• Vanilla JS only
• Refresh button: prominent, top-right of header, shows spinner during fetch
• Footer: Last updated: [ISO timestamp] — updates after each Refresh

Step 4 — Deliver

1. Open dashboard.html in the Comet browser (Perplexity Computer)
2. Verify Refresh button works — click it once to confirm live fetch completes
3. If present_files available: call it with the HTML path

Optional: Model Council Mode

Trigger: "Run Model Council on the Skills ecosystem"

Use Model Council: GPT-5.4 + Claude Opus 4.6 + Gemini 3.1 Pro in parallel.
Orchestrator: Claude Opus 4.6.
Question for all three models:
"Based on github.com/agentskills/agentskills today, what are the 3 most significant
architectural patterns emerging in Skills design, and what gaps remain unsolved?"
Synthesize: agreements, divergences, unique contributions per model.
Output: model-council-report.md

Edge Cases

• GitHub API rate limit: Show a banner in the dashboard — "Rate limited. Data shown is from [timestamp]. Try again in 60 minutes." Keep existing data visible, do not clear the UI.
• Fetch error on specific endpoint: Render that section with "Unavailable" badge. Other sections continue to show data.
• Nano Banana unavailable: Skip Step 0, use design spec directly.
• CORS on Refresh: GitHub API allows browser requests without auth for public endpoints. If blocked, show "Open in new tab" link to the raw API URL.

Output

dashboard.html — self-contained, opens directly in any browser, live Refresh via embedded JS. No data.json. No intermediate files. Computer fetches live, HTML refreshes live.