Tailwindcss Development
anonaddy/anonaddy
Always invoke when the user's message includes 'tailwind' in any form.
“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…”
Install Pierre Trees File Tree
$ npx skills add pierrecomputer/pierre --skill trees -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install pierrecomputer/pierre trees --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/pierrecomputer/pierre.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/trees .claude/skills/trees && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "trees" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/trees into .claude/skills/trees/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "trees", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/pierrecomputer/pierre/tree/main/skills/treesType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add pierrecomputer/pierre --skill trees -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install pierrecomputer/pierre trees --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pierrecomputer/pierre.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/trees .agents/skills/trees && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "trees" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/trees into .agents/skills/trees/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "trees", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pierrecomputer/pierre --skill trees -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install pierrecomputer/pierre trees --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pierrecomputer/pierre.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/trees .cursor/skills/trees && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "trees" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/trees into .cursor/skills/trees/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "trees", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/pierrecomputer/pierre.git --path skills/trees--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add pierrecomputer/pierre --skill trees -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install pierrecomputer/pierre trees --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pierrecomputer/pierre.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/trees .gemini/skills/trees && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "trees" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/trees into .gemini/skills/trees/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "trees", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install pierrecomputer/pierre treesInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add pierrecomputer/pierre --skill trees -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/pierrecomputer/pierre.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/trees .github/skills/trees && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "trees" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/trees into .github/skills/trees/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "trees", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pierrecomputer/pierre --skill trees -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install pierrecomputer/pierre trees --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pierrecomputer/pierre.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/trees .opencode/skills/trees && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "trees" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/trees into .opencode/skills/trees/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "trees", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
trees- GitHub stars
- 6.2k
- Token cost
- ~473 tokens
- SKILL.md length
- 100 words
- Files
- 10 (incl. references)
- Skills in repo
- 10
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
- SKILL.md covers Install, Select an API reference and Select a recipe
- Calls pnpm
About this skill
“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 File Tree is a skill in pierrecomputer/pierre (6.2k stars). Its SKILL.md is about 473 tokens, with 9 other files in the folder (references). Licence: Apache-2.0.
What it can do on your machine
Read from SKILL.md and the folder at commit d302ea0. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
pnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Pierre Trees File Tree loads about 473 tokens when it runs, and up to ~5.8k if it reads all its reference files. Until then it costs about 51 tokens; SKILL.md has 100 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from pierrecomputer/pierre at commit d302ea0, republished under its Apache-2.0 licence (© pierrecomputer). 100 words, ~473 tokens.
Download SKILL.mdSave it as
.claude/skills/trees/SKILL.md (or your agent's skills folder). This skill also uses 9 other files; get the full folder from GitHub.- 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/treesInstall 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 |
© pierrecomputer, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 9 other files (references) in skills/trees of pierrecomputer/pierre.
- SKILL.md
- references/api-core.md
- references/api-react.md
- references/api-ssr.md
- references/api-web-components.md
- references/recipe-interactions.md
- references/recipe-react.md
- references/recipe-ssr.md
- references/recipe-theme.md
- references/recipe-vanilla.md
Open the folder on GitHubat commit d302ea0
Compare with similar skills
Pierre Trees File Tree next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Pierre Trees File Tree this skillpierrecomputer/pierre | 6.2k | — | ~473 | Automated safety check: Pass | Apache-2.0 | |
| Tailwindcss Developmentanonaddy/anonaddy | 4.9k | 10 repos | ~865 | Automated safety check: Pass | MIT | |
| React Router Developmentremix-run/react-router | 57k | 1 repos | ~1.5k | Automated safety check: Pass | MIT | |
| React UI State PatternsChrisWiles/claude-code-showcase | 6.1k | 7 repos | ~1.6k | Automated safety check: Pass | None | |
| Chakra UI v3 Builderchakra-ui/chakra-ui | 41k | — | ~3.1k | Automated safety check: Pass | MIT | |
| Taro UI Guidejd-opensource/taro-ui | 4.7k | — | ~1.3k | Automated safety check: Pass | MIT |
Similar skills
React Router Development
remix-run/react-router
Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.
React UI State Patterns
ChrisWiles/claude-code-showcase
Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.
Chakra UI v3 Builder
chakra-ui/chakra-ui
Builds responsive, accessible Chakra UI v3 components and layouts, sets up Chakra in new or existing projects, and designs themes with tokens, semantic tokens and recipes.
Taro UI Guide
jd-opensource/taro-ui
Guides installing, configuring, styling and using taro-ui (At* components) in Taro apps for WeChat, Alipay, H5 and React Native.
React Frontend Development Guidelines
diet103/claude-code-infrastructure-showcase
Guidelines for React 18 and TypeScript apps covering Suspense data fetching, lazy loading, feature folders, MUI v7 styling, TanStack Router and performance.
More from pierrecomputer/pierre
All 10 skills in this repo@pierre/diffs Code Rendering
pierrecomputer/pierre
Guides an agent through using @pierre/diffs to render syntax-highlighted files and diffs, and to build editing and review surfaces in React or plain JavaScript.
Pierre Theming Library
pierrecomputer/pierre
Explains how to use the @pierre/theming package to list, resolve, select, switch and persist themes, with controller, color and React references.
Pierre Highlights
pierrecomputer/pierre
Shows how to use @pierre/highlights for syntax-highlighted HTML or tokens, streaming and incremental tokenizing, and Zed-compatible themes with CSS variables.
Pierre Testing and Verification Guide
pierrecomputer/pierre
Chooses the right verification step after a code change in Pierre's monorepo: format and lint, a typecheck, Bun unit tests, snapshots, or Playwright E2E.
Pierre Theme Package
pierrecomputer/pierre
Shows an agent how to install and use the @pierre/theme package, which ships ten Pierre light and dark color themes for Shiki and VS Code.
Monorepo Tooling and Dependencies
pierrecomputer/pierre
Sets one monorepo's rules for toolchain pins, pnpm package operations, the shared dependency catalog and moon tasks, so the agent adds versions and scripts the right way.
Related
Works with
Categories
Questions about Pierre Trees File Tree
How do I install Pierre Trees File Tree in Claude Code?
Run `npx skills add pierrecomputer/pierre --skill trees -a claude-code`. Or copy the skill folder (skills/trees in pierrecomputer/pierre) into .claude/skills/trees in your project. Claude Code loads it when a task matches its description.
How do I install Pierre Trees File Tree in Codex?
Run `npx skills add pierrecomputer/pierre --skill trees -a codex`. Or copy the skill folder (skills/trees in pierrecomputer/pierre) into .agents/skills/trees in your project. Codex loads it when a task matches its description.
Can I use Pierre Trees File Tree in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add pierrecomputer/pierre --skill trees -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/trees, .gemini/skills/trees, .github/skills/trees and .opencode/skills/trees in your project.
What does Pierre Trees File Tree need to run?
Going by SKILL.md and its folder, Pierre Trees File Tree needs the command-line tools its instructions call (pnpm).
Does Pierre Trees File Tree access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Pierre Trees File Tree safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Pierre Trees File Tree use?
Pierre Trees File Tree is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Pierre Trees File Tree use?
About 473 tokens (SKILL.md is roughly 1.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.4k tokens, read only when the agent opens those files.
What are the alternatives to Pierre Trees File Tree?
Skills that share tags, products or a category with Pierre Trees File Tree: Tailwindcss Development (anonaddy/anonaddy, 4.9k stars), React Router Development (remix-run/react-router, 57k stars), React UI State Patterns (ChrisWiles/claude-code-showcase, 6.1k stars) and Chakra UI v3 Builder (chakra-ui/chakra-ui, 41k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Pierre Trees File Tree?
pierrecomputer (a GitHub organization) maintains it in pierrecomputer/pierre, which has 6,243 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 6, 2026.
Source: pierrecomputer/pierre on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.