mcpField
T
trees

trees

github.com/pierrecomputer開発6.4k318 回インストール1 日前に更新
リポジトリ

trees について

@pierre/treesは、インタラクティブなファイルツリーを構築するJavaScriptライブラリです。Core、React、SSR、Web Componentsの各APIがあり、Webアプリにツリービューを組み込む開発者向けです。

主な機能

  1. 01Core、React、SSR、Web ComponentsのAPI
  2. 02パス文字列による状態とコールバック
  3. 03サーバー側でのツリーの事前読み込み
  4. 04テーマの適用
  5. 05検索、名前変更、ドラッグ＆ドロップ、gitステータス

活用シーン

  1. 01Reactでファイルツリーを描画・更新
  2. 02Vanilla JavaScriptでツリービューを構築
  3. 03サーバー側でファイルツリーを事前読み込み
  4. 04ツリーに検索やファイル操作を追加

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/pierrecomputer/pierre --skill trees

インストール後、Claude Code で/treesを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
api-core.md
api-react.md
api-ssr.md
api-web-components.md
recipe-interactions.md
recipe-react.md
recipe-ssr.md
recipe-theme.md
recipe-vanilla.md

詳細

@pierre/trees

インタラクティブなファイルツリーには、@pierre/treesを使用します。パブリック状態とコールバックでは、パス文字列を使用します。

インストール

pnpm add @pierre/trees

アプリでReactエントリーを使用する場合は、reactとreact-domをインストールしてください。

API リファレンスを選択する

エントリーリファレンス
@pierre/treesコア API
@pierre/trees/reactReact API
@pierre/trees/ssrSSR API
@pierre/trees/web-componentsWeb コンポーネント API

レシピを選択する

タスクレシピ
Reactでツリーをレンダリングして更新するReactを使用する
Reactを使わずにツリーをレンダリングして更新するバニラ JavaScriptを使用する
サーバーでツリーをプリロードするSSRを使用する
解決済みのShikiまたはVS Codeテーマを適用するテーマを適用する
検索、名前変更、ドラッグ＆ドロップ、Gitの状態を設定するインタラクションを追加する

コメント

Markdown 対応