trees — Claude Code skill: what it does, how to install
Guides agents on rendering and controlling file trees with @pierre/trees. Useful for React, vanilla JS, SSR, or web component setups.
npx skills add pierrecomputer/pierre --skill trees -a claude-codeWhat trees does
This skill provides instructions and recipes for using @pierre/trees. Public state and callbacks in the library operate on path strings. The reference material covers the core library, React wrappers, SSR integration, and web components.
It guides tasks like tree search, file renaming, drag and drop, icons, and git status indicators. You can also connect themes resolved from Shiki or VS Code.
When using @pierre/trees/react, your project requires react and react-dom. Install the package itself by running pnpm add @pierre/trees.
What it helps with
- render and update a file tree in React
- preload a file tree on the server with SSR
- configure file drag and drop and renaming
- apply Shiki or VS Code themes to a tree view
- display git status and file icons
Example prompts for the agent
- Render a file tree in React using @pierre/trees
- Configure drag and drop and git status with @pierre/trees
- How do I preload a file tree on the server using @pierre/trees/ssr?
How to install trees
1Skills CLI (Vercel)
npx skills add pierrecomputer/pierre --skill trees -a claude-code2Manually: put the files in place
~/.claude/skills/trees/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/trees/
1Skills CLI (Vercel)
npx skills add pierrecomputer/pierre --skill trees -a codex2Manually: put the files in place
.agents/skills/trees/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add pierrecomputer/pierre --skill trees -a cursor2Manually: put the files in place
.cursor/skills/trees/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install pierrecomputer/pierre trees2Manually: put the files in place
.github/skills/trees/SKILL.md1Skills CLI (Vercel)
npx skills add pierrecomputer/pierre --skill trees -a gemini-cli2Platform CLI
gemini skills install https://github.com/pierrecomputer/pierre --path skills/treesManually: put the files in place
.devin/skills/trees/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add pierrecomputer/pierre --skill trees -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about trees
How to install trees in Claude Code?
Run npx skills add pierrecomputer/pierre --skill trees -a claude-code to install the skill.
What does the trees skill do?
It gives the assistant API references and implementation recipes for @pierre/trees, covering React, vanilla JavaScript, SSR, and web components.
What dependencies does the React entrypoint require?
If your app uses @pierre/trees/react, you must install react and react-dom alongside the package.
Source text
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
