Agent Skills › pierrecomputer/pierre › trees

trees

GitHub

提供 @pierre/trees 库的使用指南，涵盖文件树渲染、交互功能及多框架适配。

skills/trees/SKILL.md pierrecomputer/pierre

Trigger Scenarios

使用 @pierre/trees 渲染或控制文件树实现文件树的搜索、重命名、拖拽等功能

Install

npx skills add pierrecomputer/pierre --skill trees -g -y

More Options

Use without installing

npx skills use pierrecomputer/pierre@trees

指定 Agent (Claude Code)

npx skills add pierrecomputer/pierre --skill trees -a claude-code -g -y

安装 repo 全部 skill

npx skills add pierrecomputer/pierre --all -g -y

预览 repo 内 skill

npx skills add pierrecomputer/pierre --list

SKILL.md

Frontmatter

{
    "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

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
`@pierre/trees/react`	React API
`@pierre/trees/ssr`	SSR API
`@pierre/trees/web-components`	Web components API

Select a recipe

Task	Recipe
Render and update a tree in React	Use React
Render and update a tree without React	Use vanilla JavaScript
Preload a tree on the server	Use SSR
Apply a resolved Shiki or VS Code theme	Apply a theme
Configure search, rename, drag and drop, and git status	Add interactions