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

threejs — скилл для Claude Code: что делает и как установить

Помогает ассистенту создавать 3D-сцены, настраивать материалы, камеру и пост-обработку на Three.js прямо в браузере.

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

Что делает threejs

Скилл добавляет в контекст агента инструкции по работе с библиотекой Three.js. Он ориентирован на интерактивную браузерную графику: настройку сцены, освещения, материалов, контроллеров управления и шейдерных эффектов пост-обработки.

Запись входит в каталог OpenDesign в категории 3d-shaders и работает в режиме прототипа. Агент находит скилл на этапе планирования по ключевым фразам вроде webgl scene, 3d web или threejs.

Для полных скриптов и заготовок ассетов понадобится апстрим-репозиторий CloudAI-X/threejs-skills. Базовый манифест задаёт лишь контекст для планирования кода.

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

  • собрать интерактивную 3D-сцену в браузере
  • настроить шейдеры и фильтры пост-обработки Three.js
  • привязать управление камерой и объектами через controls
  • подобрать материалы и источники света для Three.js

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

  • threejs: создай сцену с вращающимся кубом и настроенным освещением
  • Собери webgl scene с управлением камерой через OrbitControls
  • Добавь пост-обработку с эффектом свечения в Three.js

Как установить threejs

1Через Skills CLI (Vercel)

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

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

~/.claude/skills/threejs/SKILL.md

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

Из того же набора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установок 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установок d3-visualization nexu-io Скилл учит агента создавать интерактивные графики и визуализации данных на D3.js. Подойдёт, если нужно быстро генерировать диаграммы для дашбордов, отчётов и прототипов. Claude Code CX Codex Cursor +1 3 100установок design-review nexu-io Проводит визуальный аудит интерфейса, вносит точечные правки атомарными коммитами и сохраняет скриншоты до и после изменений. Пригодится для полировки свёрстанного UI перед релизом. Claude Code CX Codex Cursor +1 3 100установок

Похожие

adev-writing-guide angular Скилл задаёт правила технического писательства Google и разметку для документации Angular в adev/. Он нужен при создании, правке и ревью страниц в каталоге adev/src/content. Claude Code CX Codex Cursor +1 912установок typescript-write metabase Скилл для написания и редактирования TypeScript и JavaScript кода с соблюдением стандартов Metabase. Требует строгую типизацию без any и проверку типов перед завершением. Claude Code CX Codex Cursor +1 2 100установок web-component-design Seth Hobson Скилл помогает проектировать компоненты для React, Vue и Svelte. Подойдёт для библиотек UI, дизайн-систем и рефакторинга старых компонентов. Claude Code CX Codex Cursor 13 167установок improve-ui ibelick Проверяет интерфейс на соответствие его дизайн-системе, находит доказанные расхождения и составляет планы исправлений для другого агента. Claude Code CX Codex Cursor +1 7 800установок expo-ui expo Скилл для создания интерфейсов, которые рендерятся в настоящий native код: SwiftUI на iOS и Jetpack Compose на Android. Помогает агенту писать правильные компоненты вместо того, чтобы тянуть тяжёлые библиотеки вроде Reanimated. Claude Code CX Codex Cursor +1 31 600установок premium-frontend-ui официальный Utkarsh Patrikar Направляет GitHub Copilot при создании визуально выразительных страниц и компонентов с анимацией. Подойдёт для лендинга или интерактивного портфолио. GitHub Copilot 4 900установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок

Вопросы о threejs

Как установить threejs в Claude Code?

Выполните в терминале команду npx skills add nexu-io/open-design --skill threejs -a claude-code.

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

Он помогает агенту генерировать код на Three.js для рендеринга 3D-элементов, настройки материалов, интерактивного управления и постобработки в браузере.

Откуда берутся исходные ассеты и скрипты для скилла?

Скилл курируется из репозитория CloudAI-X/threejs-skills. Полный набор исходных примеров и ассетов находится в оригинальном апстрим-бандле.

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

SKILL.md · Apache-2.0
---
name: threejs
description: |
  Three.js skills for creating 3D elements and interactive experiences in the browser — scenes, materials, controls, and post-processing.
triggers:
  - "threejs"
  - "three.js"
  - "3d web"
  - "webgl scene"
  - "3d interactive"
od:
  mode: prototype
  category: 3d-shaders
  upstream: "https://github.com/CloudAI-X/threejs-skills"
---

# threejs

> Curated from CloudAI-X.

## What it does

Three.js skills for creating 3D elements and interactive experiences in the browser — scenes, materials, controls, and post-processing.

## Source

- Upstream: https://github.com/CloudAI-X/threejs-skills
- Category: `3d-shaders`

## 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 references, install the upstream
bundle into your active agent's skills directory:

```bash
# Inspect the upstream README for exact paths
open https://github.com/CloudAI-X/threejs-skills
```

Then ask the agent to invoke this skill by name (`threejs`) or with
one of the trigger phrases listed in this skill's frontmatter.

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

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

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

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