К основному содержанию
affpapa.org
RU EN
скилл Claude Code CX Codex Cursor GitHub Copilot

d3-visualization — скилл для Claude Code: интерактивные графики

Скилл учит агента создавать интерактивные графики и визуализации данных на D3.js. Подойдёт, если нужно быстро генерировать диаграммы для дашбордов, отчётов и прототипов.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓ 
npx skills add nexu-io/open-design --skill d3-visualization -a claude-code
Открыть на GitHub

Что делает d3-visualization

d3-visualization — это набор примеров и техник D3.js, которые агент использует при генерации графиков. Внутри примеры столбчатых, линейных и других диаграмм, а также сложные структуры: treemap, force-graph, sankey, sunburst, choropleth и анимированные визуализации. Когда вы просите агента построить диаграмму или граф, скилл подсказывает ему правильные подходы.

Скилл работает через триггеры — фразы вроде «интерактивный граф», «d3 heatmap» или название типа диаграммы. Агент распознаёт такие запросы и вспоминает примеры из скилла. Скилл поддерживает основные платформы: Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode.

Для работы нужен Node.js и npm. Установку лучше начать с чтения README репозитория snow-d3, откуда скилл берёт исходники и примеры.

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

  • создать интерактивный treemap для большого набора данных
  • построить force-directed граф связей между сущностями
  • сделать calendar heatmap или choropleth карту
  • добавить анимацию и масштабирование к диаграмме
  • генерировать диаграммы для дашбордов и отчётов

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

  • Создай zoomable treemap для моих данных продаж
  • Построй force-directed граф, как в примере 07, но для моего датасета
  • Сгенерируй calendar heatmap на D3

Как установить d3-visualization

1Через Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill d3-visualization -a claude-code

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

~/.claude/skills/d3-visualization/SKILL.md

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

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

Весь набор →
ui-ux-pro-max nexu-io Каталожная карточка для обнаружения скилла UI/UX Pro Max в репозитории OpenDesign. Помогает агенту распознавать запросы к паттернам интерфейсов и эвристикам юзабилити. Claude Code CX Codex Cursor +1 5 400установок frontend-design nexu-io Скилл для создания фронтенд-интерфейсов с продуманной типографикой, цветом и вёрсткой — от лендингов до дашбордов. Claude Code CX Codex Cursor +1 4 800установок threejs nexu-io Помогает ассистенту создавать 3D-сцены, настраивать материалы, камеру и пост-обработку на Three.js прямо в браузере. Claude Code CX Codex Cursor +1 3 400установок creative-director nexu-io Скилл ведёт разработку креативной концепции от брифа до презентации и проверяет идеи по трём осям. Нужен для кампаний и критики концепций. Claude Code CX Codex Cursor +1 3 400установок design-brief nexu-io Преобразует дизайн-бриф в формате I-Lang в конкретную спецификацию с палитрой, типографикой, плотностью и ограничениями. Устраняет неопределённость из фраз вроде «сделай профессионально». Claude Code CX Codex Cursor +1 3 400установок apple-hig nexu-io Подключает базу Apple Human Interface Guidelines для iOS, macOS, visionOS, watchOS и tvOS к агенту при проектировании интерфейсов. Claude Code CX Codex Cursor +1 3 200установок hatch-pet nexu-io Создаёт и упаковывает спрайтшиты анимированных питомцев для Codex в формате 8×9. Пригодится для сборки пиксельного компаньона по концепту или картинке-референсу. Claude Code CX Codex Cursor +1 3 100установок design-review nexu-io Проводит визуальный аудит интерфейса, вносит точечные правки атомарными коммитами и сохраняет скриншоты до и после изменений. Пригодится для полировки свёрстанного UI перед релизом. Claude Code CX Codex Cursor +1 3 100установок

Похожие

cmux-localization manaflow-ai Скилл для проверки и управления переводами пользовательских строк в интерфейсе. Запускает аудит каждый раз, когда вы меняете текст кнопок, меню, подсказок или сообщений об ошибках. Claude Code CX Codex Cursor +1 4 700установок cmux-debugging manaflow-ai Скилл для добавления отладочных логов, диагностики проблем UI и рантайма в cmux. Пригодится, когда вы работаете с терминальным рендерингом, списками вкладок, drag-and-drop или тестируете на разных версиях macOS. Claude Code CX Codex Cursor +1 4 700установок argent-react-native-optimization software-mansion Скилл выявляет узкие места в React Native через замеры и очищает код от механических проблем. Запускается при лагах интерфейса, долгом старте или частых лишних рендерах. Claude Code CX Codex Cursor +1 26 400установок flutter-expert https://github.com/Jeffallan Скилл для разработки кросс-платформных приложений на Flutter 3+ и Dart. Помогает с виджетами, управлением состоянием через Riverpod или Bloc, маршрутизацией GoRouter и оптимизацией производительности. Claude Code CX Codex Cursor +1 14 300установок ui-skills-root ibelick Маршрутизатор UI-задач, который определяет нужный скилл перед работой над интерфейсом. Запускается командой npx ui-skills start и помогает агенту выбрать минимальный контекст для решения. Claude Code CX Codex Cursor +1 7 100установок vue-pinia-best-practices github.com/vuejs-ai Скилл с лучшими практиками Pinia: как избежать ошибок при настройке хранилищ, сохранить реактивность и правильно организовать state management в Vue-проекте. Claude Code CX Codex Cursor +1 16 800установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок

Вопросы о d3-visualization

Как установить d3-visualization в Claude Code?

Выполни npx skills add nexu-io/open-design --skill d3-visualization -a claude-code, затем посмотри файл конфига по пути ~/.claude/skills/d3-visualization/SKILL.md.

Что делает скилл d3-visualization?

Учит агента генерировать интерактивные графики и диаграммы на D3.js: от простых столбчатых до сложных структур вроде treemap, force-graph и choropleth с анимацией.

Какие платформы поддерживает d3-visualization?

Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для каждой платформы своя команда установки.

Исходный текст

SKILL.md · Apache-2.0 
---
name: d3-visualization
description: |
  Teaches the agent to produce D3 charts and interactive data visualizations. A comprehensive D3.js skill with examples across chart types and techniques giving the agent expert-level knowledge to generate complex, interactive visualizations. Useful for editorial dashboards, reports, data-rich prototypes, and explanatory graphics.
triggers:
  - "d3"
  - "d3.js"
  - "interactive chart"
  - "data visualization"
  - "editorial chart"
  - "d3 bar chart"
  - "d3 line chart"
  - "d3 map"
  - "d3 force graph"
  - "d3 sankey"
  - "d3 treemap"
  - "d3 sunburst"
  - "d3 choropleth"
  - "d3 animation"
  - "d3 scroll"
  - "snow-d3"
od:
  mode: prototype
  category: diagrams
  upstream: "https://github.com/jiannanya/snow-d3/"
---

# d3-visualization

> Curated from @jiannanya.

## What it does

Teaches the agent to produce D3 charts and interactive data visualizations. A comprehensive D3.js skill with examples across chart types and techniques giving the agent expert-level knowledge to generate complex, interactive visualizations. Useful for editorial dashboards, reports, data-rich prototypes, and explanatory graphics.

## Source

- Upstream: https://github.com/jiannanya/snow-d3/
- Category: `diagrams`

## How to use

This catalogue entry advertises the skill in OpenDesign so the agent
discovers it during planning. To run the full upstream workflow with
its original assets, scripts, and reference documents, install the upstream
bundle into your active agent's skills directory:

```bash
# Inspect the upstream README for exact paths
open https://github.com/jiannanya/snow-d3/

# Clone or copy the snow-d3/ folder into your workspace's skills/ directory
git clone https://github.com/jiannanya/snow-d3.git skills/snow-d3

```

Then ask the agent to invoke this skill by name (`d3-visualization`) or with
one of the trigger phrases listed in this skill's frontmatter, e.g.:

> "Create a zoomable treemap for my sales data"
> "Build a force-directed network graph like example 07 but for my own dataset"
> "Generate a calendar heatmap in D3"

© nexu-io · Apache-2.0 · nexu-io/open-design

Смотрите также

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

Компании, которые помогают держать аналитику открытой
Золотой спонсор AI-аналитика спроса на iGaming — индекс, тренды, конкуренты
Nutra.Club Закрытое сообщество Nutra-вертикали от команды M1

Показы, клики и копирования кода — открытая статистика. Мы держим цифры публичными по той же логике, что и сам NeBlask. Стать спонсором