К основному содержанию
скилл CX Codex

git-city-3d-github-visualization — скилл для Claude Code: 3D-город

Скилл для работы над Git City — проектом, где профиль GitHub превращается в здание в 3D-городе на Next.js и Three.js.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add reason-machines/trending-skills --skill git-city-3d-github-visualization -a claude-code
Открыть на GitHub

Что делает git-city-3d-github-visualization

Git City рисует профили GitHub как пиксельные здания: высота зависит от числа контрибуций, ширина — от публичных репозиториев, яркость окон — от звёзд. Скилл даёт агенту карту этого проекта, чтобы правки в рендере или логике не ломали соседние части.

Внутри — структура каталогов app/, components/city/, lib/ и шаблоны кода: расчёт метрик здания в lib/buildings.ts, компонент Building.tsx на React Three Fiber, инстансный рендер окон через InstancedMesh, запросы к GitHub API через Octokit. Есть отдельный LOD-менеджер для уровня детализации.

Локальный запуск требует клонирования репозитория, npm install и заполнения .env.local: ключи Supabase, GITHUB_TOKEN и, если нужен доступ к /admin/ads, список логинов в ADMIN_GITHUB_LOGINS. Без токена GitHub часть метрик просто не соберётся, поэтому заведите его до первого запуска.

Какие задачи решает

  • добавить новую фичу в проект Git City
  • поменять рендер 3D-здания и не сломать сцену
  • настроить Git City локально с ключами Supabase
  • добавить достижения и декорации зданиям
  • расширить визуализацию профилей GitHub

Примеры запросов агенту

  • добавь новую фичу в git city
  • настрой git city локально
  • поменяй рендер 3D-здания в components/city/Building.tsx

Как установить git-city-3d-github-visualization

1Через Skills CLI (Vercel)

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

2Вручную: положить файлы

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

Папка скилла целиком; для одного проекта — .claude/skills/git-city-3d-github-visualization/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о git-city-3d-github-visualization

Как установить git-city-3d-github-visualization в Claude?

Выполните npx skills add reason-machines/trending-skills --skill git-city-3d-github-visualization -a claude-code. Скилл встанет в ~/.claude/skills/git-city-3d-github-visualization/SKILL.md.

Что делает этот скилл?

Он помогает агенту работать над Git City: править 3D-рендер зданий, метрики профилей, достижения и админку, не теряя структуру проекта.

Что нужно, чтобы запустить Git City локально?

Клонировать репозиторий, поставить зависимости через npm install и заполнить .env.local ключами Supabase и GITHUB_TOKEN.

Похожие скиллы

Всё по теме «Геймдев и 3D: Unity, Unreal, Godot, Blender» →
react-three-fiber freshtechbro Скилл обучает агента строить декларативные 3D-сцены в React через Three.js, настраивать хуки рендера и загружать модели через Suspense. CX Codex +1 3 800установок r3f-loaders EnzeD Помогает загружать и переиспользовать 3D-модели в React Three Fiber. Настраивает хуки, предзагрузку, клонирование объектов и показ заглушек. CX Codex +1 1 800установок threejs-r3f AThevon Скилл по Three.js и React Three Fiber: правила сцен, хуков, постобработки и производительности. Пригодится, когда агент пишет 3D на React. CX Codex +1 1 000установок nextjs-supabase-auth sickn33 Скилл настраивает Supabase Auth в Next.js App Router: клиенты, middleware, OAuth callback и Server Actions. Пригодится для защиты маршрутов и работы с сессиями. CX Codex +1 6 600установок bencium-code-conventions bencium Задаёт правила Bence для React и Next.js: стек, стиль кода, тесты и рабочий процесс. Нужен при создании или настройке проекта по этим соглашениям. CX Codex +1 3 300установок nextjs-typescript-tailwindcss-supabase Mindrally Скилл задаёт агенту правила для Next.js 14, TypeScript, TailwindCSS и Supabase: серверные компоненты, обработка ошибок, читаемый код. CX Codex +1 1 300установок

Из того же набора42

zeroboot-vm-sandbox Скилл запускает код агента в отдельной KVM-виртуалке через Zeroboot: форк шаблона занимает меньше миллисекунды. CX Codex +1 1 300установок clui-cc-claude-overlay Скилл ставит поверх Claude плавающее окно для macOS с вкладками сессий, подтверждением вызовов инструментов и голосовым вводом. CX Codex +1 1 300установок karpathy-jobs-bls-visualizer Скилл собирает данные Occupational Outlook Handbook, оценивает профессии через LLM и рисует интерактивную карту занятости. CX Codex +1 1 300установок modly-image-to-3d Скилл ставит и настраивает Modly — десктопное приложение, которое делает 3D-меш из фотографии на вашей видеокарте, без облака и ключей API. CX Codex +1 1 300установок weixin-agent-sdk Скилл подключает любой ИИ-бэкенд к WeChat через TypeScript-фреймворк weixin-agent-sdk: вход по QR-коду и цикл приёма сообщений. CX Codex +1 1 100установок ghostling-libghostty-terminal Скилл показывает, как собрать минимальный терминальный эмулятор на C-библиотеке libghostty-vt с окнами и отрисовкой через Raylib. CX Codex +1 1 100установок web-access-claude-skill Даёт агенту выбор между поиском, загрузкой страниц и управлением настоящим Chrome. Пригодится, когда сайт закрыт логином или рисуется на JS. CX Codex +1 965установок agent-flow-visualization Скилл ставит расширение VS Code, которое рисует работу агентов Claude живым графом: вызовы инструментов, ветвления, субагенты, тайминги. CX Codex +1 887установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой