Agent Skills › pierrecomputer/pierre › trees

trees

GitHub

提供交互式文件树渲染能力，支持React、JS、SSR及Web Components。涵盖选择、搜索、重命名、拖拽、图标显示、Git状态集成及主题配置，适用于各类前端应用的文件目录展示与交互需求。

skills/trees/SKILL.md pierrecomputer/pierre

Trigger Scenarios

需要在前端项目中渲染可交互的文件树结构实现文件树的搜索、重命名或拖拽功能在React、SSR或Web Components中集成文件浏览组件

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