git-city-3d-github-visualization — скилл для Claude Code: 3D-город
Скилл для работы над Git City — проектом, где профиль GitHub превращается в здание в 3D-городе на Next.js и Three.js.
npx skills add reason-machines/trending-skills --skill git-city-3d-github-visualization -a claude-codeЧто делает 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-code2Вручную: положить файлы
~/.claude/skills/git-city-3d-github-visualization/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/git-city-3d-github-visualization/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill git-city-3d-github-visualization -a codex2Вручную: положить файлы
.agents/skills/git-city-3d-github-visualization/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill git-city-3d-github-visualization -a cursor2Вручную: положить файлы
.cursor/skills/git-city-3d-github-visualization/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install reason-machines/trending-skills git-city-3d-github-visualization2Вручную: положить файлы
.github/skills/git-city-3d-github-visualization/SKILL.md1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill git-city-3d-github-visualization -a gemini-cli2Командой платформы
gemini skills install https://github.com/reason-machines/trending-skills --path skills/git-city-3d-github-visualizationВручную: положить файлы
.devin/skills/git-city-3d-github-visualization/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill git-city-3d-github-visualization -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в 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.