trees — скилл для Claude Code: что делает и как установить
Помогает настроить интерактивное дерево файлов на базе @pierre/trees. Пригодится для рендеринга дерева в React, vanilla JS, веб-компонентах или SSR.
npx skills add pierrecomputer/pierre --skill trees -a claude-codeЧто делает trees
Скилл содержит инструкции и рецепты для работы с библиотекой @pierre/trees. Публичное состояние и колбэки в ней оперируют строковыми путями. Внутри есть ссылки на документацию ядра, модуль React, SSR и веб-компоненты.
Помощник подскажет, как настроить поиск по файлам, переименование, перетаскивание, иконки и отображение git-статуса. Также описано подключение тем Shiki или VS Code к дереву.
Если подключается точка входа @pierre/trees/react, проекту потребуются пакеты react и react-dom. Сама библиотека устанавливается через pnpm add @pierre/trees.
Какие задачи решает
- отрисовать и обновлять дерево файлов в React
- предзагрузить дерево файлов на сервере через SSR
- настроить перетаскивание и переименование файлов
- применить тему Shiki или VS Code к файловому дереву
- подключить отображение git-статуса и иконки
Примеры запросов агенту
- Настрой файловое дерево с помощью @pierre/trees для React-компонента
- Добавь переименование и drag and drop в дерево файлов через @pierre/trees
- Как предзагрузить дерево файлов на сервере с помощью @pierre/trees/ssr?
Как установить trees
1Через Skills CLI (Vercel)
npx skills add pierrecomputer/pierre --skill trees -a claude-code2Вручную: положить файлы
~/.claude/skills/trees/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/trees/
1Через Skills CLI (Vercel)
npx skills add pierrecomputer/pierre --skill trees -a codex2Вручную: положить файлы
.agents/skills/trees/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add pierrecomputer/pierre --skill trees -a cursor2Вручную: положить файлы
.cursor/skills/trees/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install pierrecomputer/pierre trees2Вручную: положить файлы
.github/skills/trees/SKILL.md1Через Skills CLI (Vercel)
npx skills add pierrecomputer/pierre --skill trees -a gemini-cli2Командой платформы
gemini skills install https://github.com/pierrecomputer/pierre --path skills/treesВручную: положить файлы
.devin/skills/trees/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add pierrecomputer/pierre --skill trees -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о trees
Как установить trees в Claude Code?
Выполните команду npx skills add pierrecomputer/pierre --skill trees -a claude-code в терминале.
Что делает скилл trees?
Он передаёт агенту спецификации API и рецепты по работе с @pierre/trees, включая рендеринг в React, vanilla JS, SSR и веб-компонентах.
Какие зависимости нужны для React-версии @pierre/trees?
Для точки входа @pierre/trees/react требуется установить пакеты react и react-dom.
Исходный текст
SKILL.md · Apache-2.0
--- name: trees description: Use when an app uses @pierre/trees to render or control a file tree, including React, vanilla JavaScript, SSR, web components, selection, search, rename, drag and drop, icons, git status, and themes. --- # `@pierre/trees` Use `@pierre/trees` for an interactive file tree. Public state and callbacks use path strings. ## Install ```bash pnpm add @pierre/trees ``` Install `react` and `react-dom` when the app uses the React entry. ## Select an API reference | Entry | Reference | | ------------------------------ | ------------------------------------------------------ | | `@pierre/trees` | [Core API](references/api-core.md) | | `@pierre/trees/react` | [React API](references/api-react.md) | | `@pierre/trees/ssr` | [SSR API](references/api-ssr.md) | | `@pierre/trees/web-components` | [Web components API](references/api-web-components.md) | ## Select a recipe | Task | Recipe | | ------------------------------------------------------- | ------------------------------------------------------ | | Render and update a tree in React | [Use React](references/recipe-react.md) | | Render and update a tree without React | [Use vanilla JavaScript](references/recipe-vanilla.md) | | Preload a tree on the server | [Use SSR](references/recipe-ssr.md) | | Apply a resolved Shiki or VS Code theme | [Apply a theme](references/recipe-theme.md) | | Configure search, rename, drag and drop, and git status | [Add interactions](references/recipe-interactions.md) |
© pierrecomputer · Apache-2.0 · pierrecomputer/pierre
