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

3dsvg-interactive-react — скилл для Claude Code: SVG в 3D-React

Превращает SVG и текст в интерактивные 3D-компоненты React через библиотеку 3dsvg. Пригодится, когда нужен объёмный логотип или бейдж на сайте.

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

Что делает 3dsvg-interactive-react

Скилл подсказывает агенту, как собрать компонент <SVG3D> из пакета 3dsvg. Внутри — работа с extrusion: плоские пути SVG выдавливаются в глубину, поверх накладывается материал из пресетов вроде chrome, gold, holographic, добавляется анимация spin, float или pulse.

Компонент принимает либо строку текста, либо путь к файлу SVG, либо разметку прямо в коде. Настройки геометрии и света задаются пропсами: depth, bevelEnabled, ambientIntensity, keyLightIntensity, shadows. Камера управляется через zoom и autoRotate.

Пакет тянет за собой Three.js и React Three Fiber, поэтому в Next.js его подключают динамическим импортом с ssr: false — иначе сборка упадёт на серверном рендере. Заранее поставьте peer-зависимости three, @react-three/fiber и @react-three/drei.

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

  • выдавить плоский логотип в объёмный компонент
  • добавить вращение тексту в hero-блоке
  • собрать статичную 3D-иконку товара без анимации
  • подобрать материал под стиль бренда из готовых пресетов
  • встроить 3D-модель в приложение на React

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

  • сделай из /logo.svg вращающийся 3D-компонент на 3dsvg
  • добавь тексту LAUNCH эффект spin с материалом chrome
  • подключи 3dsvg в Next.js так, чтобы не ломался SSR

Как установить 3dsvg-interactive-react

1Через Skills CLI (Vercel)

npx skills add reason-machines/trending-skills --skill 3dsvg-interactive-react -a claude-code

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

~/.claude/skills/3dsvg-interactive-react/SKILL.md

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

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

Вопросы о 3dsvg-interactive-react

Как установить 3dsvg-interactive-react в Claude?

Выполните npx skills add reason-machines/trending-skills --skill 3dsvg-interactive-react -a claude-code. Скилл появится в ~/.claude/skills/3dsvg-interactive-react/SKILL.md.

Что делает 3dsvg-interactive-react?

Помогает агенту превращать SVG и текст в интерактивные 3D-компоненты React на базе библиотеки 3dsvg и Three.js.

Что нужно поставить для работы 3dsvg?

Сам пакет 3dsvg и peer-зависимости three, @react-three/fiber, @react-three/drei.

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

Всё по теме «Фронтенд и UI» →
react-three-fiber freshtechbro Скилл обучает агента строить декларативные 3D-сцены в React через Three.js, настраивать хуки рендера и загружать модели через Suspense. CX Codex +1 3 800установок spline-interactive freshtechbro Справочник по интеграции 3D-сцен Spline в веб-проекты. Помогает встроить интерактивную графику в React без ручного написания WebGL-кода. CX Codex +1 2 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установок threejs-react-three-fiber CloudAI-X Скилл для тех, кто пишет three.js-сцены компонентами React. Подсказывает, как устроены Canvas, хуки и события указателя в React Three Fiber. CX Codex +1 1 300установок build-interactive-particle-trail MengTo Скилл для интерактивных частиц: курсор или палец оставляет след из точек, которые летят по своей траектории. Пригодится в 3D-сценах и на лендингах. CX Codex +1 1 100установок

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

claude-code-source-study Серия разборов исходников Claude: как устроены системный промпт, инструменты, агенты и права доступа. Пригодится, если пишешь своего агента. CX Codex +1 616установок cabinet-ai-knowledge-base Скилл поднимает self-hosted базу знаний и «стартап-ОС» Cabinet: страницы, агенты с памятью, cron-задачи и встроенные HTML-приложения. CX Codex +1 607установок x-mentor-skill-nuwa Скилл собирает методики шести авторов X и данные открытого алгоритма в рабочие подсказки по хукам, тредам и росту аккаунта. CX Codex +1 594установок bluehammer-vulnerability-poc Скилл ведёт агента по репозиторию BlueHammer: сборка C-эксплойта, запуск и разбор кода уязвимости. Для работы в изолированной лаборатории. CX Codex +1 570установок rattles-terminal-spinners Скилл для работы с rattles — минимальной Rust-библиотекой терминальных спиннеров. Пригодится, когда в CLI нужен индикатор загрузки без лишних зависимостей. CX Codex +1 497установок isolet-widget-isolation Скилл помогает упаковать компонент в самодостаточный виджет с shadow DOM и собственными стилями, чтобы встроить его на любую страницу. CX Codex +1 474установок ntwarden-windows-analysis-toolkit Скилл для разбора внутренностей Windows: процессы, службы, сеть, ETW, ядро. Пригодится, когда нужно разобрать поведение подозрительного процесса. CX Codex +1 443установок tech-doc-style-chinese Правила для китайской технической документации: пробелы между иероглифами и латиницей, угловые кавычки, запрет на канцелярит и рекламные штампы. Плюс линтер на Python. CX Codex +1 434установок

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

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

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