claude-d3js-skill — скилл для Claude Code: кастомные графики на d3.js
Подсказывает агенту, как строить нестандартные визуализации на d3.js: сетевые графы, географические карты, плавные переходы. Пригодится, когда обычных библиотек графиков не хватает.
npx claude-code-templates@latest --skill creative-design/claude-d3js-skillЧто делает claude-d3js-skill
Скилл описывает рабочий процесс для d3.js: импорт через import * as d3 from 'd3' или CDN-сборку 7.x, выбор между прямой работой с DOM и декларативным рендерингом, структура функции рисования со шкалами, осями и привязкой данных. Отдельно разобрана адаптивность — через ResizeObserver или обработчик resize с функцией очистки.
Внутри есть готовые шаблоны: столбчатая диаграмма, а ещё примеры на force-directed layouts, деревья и иерархии, кастомные проекции для карт. Всё это работает в любом JavaScript-окружении — React, Vue, Svelte, чистый JS. Для 3D скилл прямо советует Three.js, потому что d3.js здесь не помощник.
Файл скилла обрезан на примере столбчатой диаграммы, так что дальше по тексту придётся опираться на собственные знания d3. Установка идёт через npx claude-code-templates@latest --skill creative-design/claude-d3js-skill.
Какие задачи решает
- построить force-directed граф связей между сущностями
- сделать карту с нестандартной проекцией
- добавить плавные переходы между состояниями диаграммы
- собрать диаграмму, которой нет в готовых библиотеках
- настроить перерисовку графика при изменении размера контейнера
Примеры запросов агенту
- Сделай интерактивный граф связей между пользователями на d3.js с force-directed layout
- Нарисуй карту с кастомной проекцией и зумом на d3.js
- Перепиши этот график на d3.js, чтобы добавить плавные переходы при обновлении данных
Как установить claude-d3js-skill
1Через claude-code-templates
npx claude-code-templates@latest --skill creative-design/claude-d3js-skill2Через Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill claude-d3js-skill -a claude-code3Вручную: положить файлы
~/.claude/skills/claude-d3js-skill/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/claude-d3js-skill/
Вручную: положить файлы
.agents/skills/claude-d3js-skill/SKILL.mdДля всех проектов — ~/.agents/skills/
Вручную: положить файлы
.cursor/skills/claude-d3js-skill/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates claude-d3js-skill2Вручную: положить файлы
.github/skills/claude-d3js-skill/SKILL.mdКомандой платформы
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/claude-d3js-skillВручную: положить файлы
.devin/skills/claude-d3js-skill/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о claude-d3js-skill
Как установить claude-d3js-skill в Claude?
Выполните npx claude-code-templates@latest --skill creative-design/claude-d3js-skill. Скилл появится в ~/.claude/skills/claude-d3js-skill/SKILL.md.
Что делает claude-d3js-skill?
Даёт агенту инструкции по созданию кастомных визуализаций на d3.js: сетевых графов, деревьев, географических карт, диаграмм с переходами и интерактивностью.
Для каких фреймворков подходит скилл?
Для любого JavaScript-окружения: React, Vue, Svelte или чистого JS. Для 3D-визуализаций скилл советует Three.js вместо d3.js.
