Summary
This turns GitHub profiles into 3D pixel art buildings where your contribution count sets the height, repo count determines width, and stars control window brightness. Built with Next.js, React Three Fiber, and Supabase, it uses instanced rendering to handle lots of buildings without killing performance. The code shows how to map GitHub GraphQL API data to building metrics, set up instanced meshes for windows, and animate selections with useFrame. Good starting point if you want to visualize developer activity spatially or learn R3F patterns for data-driven 3D scenes. The compare mode for side-by-side profiles is a nice touch.
Install to Claude Code
npx -y skills add aradotso/trending-skills --skill git-city-3d-github-visualization --agent claude-codeInstalls into .claude/skills of the current project.
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Files
SKILL.md
Select a file.
Featured
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
