Agent skill · software engineering · aradotso
git-city-3d-github-visualization
Build and extend Git City — a 3D pixel art city where GitHub profiles become interactive buildings using Next.js, Three.js, and Supabase.
Why this skill is useful
Provides specific implementation patterns for integrating GitHub and Supabase APIs in a 3D visualization context that the AI wouldn't reliably generate on its own.
What it needs
Requires node installed locally. Requires github, supabase account access. About 8k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
Git City — 3D GitHub Profile Visualization Skill by ara.so — Daily 2026 Skills collection. Git City transforms GitHub profiles into a 3D pixel art city. Each user becomes a unique building: height from contributions, width from repos, window brightness from stars. Built with Next.js 16 (App Router), React Three Fiber, and Supabase. Quick Setup Environment Variables Fill in .env.local after copying: Finding Supabase values: Dashboard → Project Settings → API Finding GitHub token: github.com → Settings → Developer settings → Personal access tokens (fine-grained recommended) Project Structure Core Concepts Building Metrics Mapping Buildings are generated from GitHub profile data: 3D Building Component (React Three Fiber) Instanced Meshes for Performance Git City uses instanced rendering for windows — critical for a city with many buildings: GitHub API Integration Supabase Integration Achievement System Adding a New Building Decoration Camera / Flight Controls Server Actions (Next.js App Router) Profile Page Route Common Development Patterns LOD (Level of Detail) System Fetching with SWR in City View Key API Routes Route Purpose ------- --------- GET /api/buildings Fetch all city buildings with positions GET /api/profile/[username] GitHub + city profile data POST /api/kudos Send kudos to a user GET /api/og/[username] Generate OG share card image POST /api/webhook/stripe Stripe payment webhook GET /admin/ads Admin panel (requires ADMINGITHUBLOGINS) Troubleshooting 3D scene not rendering Check that @react-three/fiber and three versions are compatible. The canvas needs a height set on its container div. GitHub API rate limits Use a fine-grained token with appropriate scopes. The app caches GitHub responses in Supabase to avoid repeated API calls. Supabase auth not working locally Configure the GitHub OAuth provider in your Supabase project and ensure your local callback URL (http://localhost:3001/auth/callback) is allowlisted. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/git-city-3d-github-visualization