Skip to main content
affpapa.org
RU EN
skill CX Codex

git-city-3d-github-visualization — Claude Code skill: GitHub as a 3D

A skill for building on Git City, a project that turns GitHub profiles into 3D pixel-art buildings with Next.js and Three.js.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add reason-machines/trending-skills --skill git-city-3d-github-visualization -a claude-code
Open on GitHub

What git-city-3d-github-visualization does

Git City maps GitHub data onto buildings: height comes from contributions, width from public repos, window brightness from stars. The skill hands your agent a map of that codebase so a change to the renderer or the metric logic does not break the rest of the scene.

It covers the layout of app/, components/city/ and lib/, plus code patterns: metric calculation in lib/buildings.ts, the Building.tsx component on React Three Fiber, instanced window rendering with InstancedMesh, GitHub API calls through Octokit. A separate LOD manager handles level of detail.

Running it locally means cloning the repo, npm install, and filling .env.local with Supabase keys, GITHUB_TOKEN, and ADMIN_GITHUB_LOGINS if you want /admin/ads. Skip the GitHub token and some metrics never arrive, so set it up before the first run.

What it helps with

  • add a feature to the Git City project
  • change the 3D building renderer without breaking the scene
  • set up Git City locally with Supabase keys
  • add achievements and building decorations
  • extend the GitHub profile visualization

Example prompts for the agent

  • add a feature to git city
  • set up git city locally
  • modify the 3d building renderer in components/city/Building.tsx

How to install git-city-3d-github-visualization

1Skills CLI (Vercel)

npx skills add reason-machines/trending-skills --skill git-city-3d-github-visualization -a claude-code

2Manually: put the files in place

~/.claude/skills/git-city-3d-github-visualization/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/git-city-3d-github-visualization/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about git-city-3d-github-visualization

How do I install git-city-3d-github-visualization in Claude?

Run npx skills add reason-machines/trending-skills --skill git-city-3d-github-visualization -a claude-code. The skill lands in ~/.claude/skills/git-city-3d-github-visualization/SKILL.md.

What does this skill do?

It guides an agent through work on Git City: the 3D building renderer, profile metrics, achievements, and the admin panel, while keeping the project structure intact.

What do I need to run Git City locally?

Clone the repo, install dependencies with npm install, and fill .env.local with Supabase keys and a GITHUB_TOKEN.

Similar skills

Everything for Game dev and 3D: Unity, Unreal, Godot, Blender →
react-three-fiber freshtechbro Teaches the agent to build declarative Three.js 3D scenes in React using JSX components, animation hooks, and Suspense loaders. CX Codex +1 3,800installs r3f-loaders EnzeD Guides 3D asset loading and reuse in React Three Fiber. Helps set up hooks, preloading, scene cloning, and fallback UI. CX Codex +1 1,800installs threejs-r3f AThevon A skill covering Three.js and React Three Fiber: scene setup, hooks, postprocessing and performance rules. Useful when your agent writes 3D in React. CX Codex +1 1,000installs nextjs-supabase-auth sickn33 This skill wires Supabase Auth into the Next.js App Router with clients, middleware, OAuth callbacks, and Server Actions. Use it when you need protected routes and session handling. CX Codex +1 6,600installs bencium-code-conventions bencium Sets Bence's conventions for React and Next.js projects, covering the stack, code style, tests and workflow. Use it when building or setting up work under those rules. CX Codex +1 3,300installs nextjs-typescript-tailwindcss-supabase Mindrally A skill that steers your agent toward Next.js 14, TypeScript, TailwindCSS and Supabase: server components, error handling, readable code. CX Codex +1 1,300installs

From the same set42

zeroboot-vm-sandbox This skill runs agent code inside a real KVM virtual machine through Zeroboot, forking a template in under a millisecond. CX Codex +1 1,300installs clui-cc-claude-overlay This skill puts a floating macOS overlay on top of Claude, with tabbed sessions, tool-call approval and voice input. CX Codex +1 1,300installs karpathy-jobs-bls-visualizer This skill scrapes Occupational Outlook Handbook data, scores occupations with an LLM and renders an interactive jobs treemap. CX Codex +1 1,300installs modly-image-to-3d This skill walks your agent through installing Modly, a desktop app that turns a photo into a 3D mesh on your own GPU — no cloud, no API keys. CX Codex +1 1,300installs weixin-agent-sdk This skill wires any AI backend into WeChat through the weixin-agent-sdk TypeScript framework: QR login plus a message loop. CX Codex +1 1,100installs ghostling-libghostty-terminal A skill that walks through building a minimal terminal emulator on the libghostty-vt C library, with Raylib handling windows and rendering. CX Codex +1 1,100installs web-access-claude-skill Lets the agent pick between search, page fetch and driving your real Chrome. Useful when a site sits behind a login or renders on JS. CX Codex +1 965installs agent-flow-visualization Installs the Agent Flow VS Code extension, which draws Claude agent orchestration as a live node graph: tool calls, branches, subagents, timings. CX Codex +1 887installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor