Agent skill

Fantasia He Tree

Hierarchical tree UI with @he-tree/vue only — full project replacement for Quasar QTree (forbidden).

GPL-3.0Auto-check passed

Install Fantasia He Tree

skills CLI

$ npx skills add vishiri/fantasia-archive --skill fantasia-he-tree -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install vishiri/fantasia-archive fantasia-he-tree --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/vishiri/fantasia-archive.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/fantasia-he-tree .claude/skills/fantasia-he-tree && rm -rf skills-src

Use ~/.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/

Paste into Claude Code

Install the "fantasia-he-tree" agent skill from https://github.com/vishiri/fantasia-archive/tree/master/.cursor/skills/fantasia-he-tree into .claude/skills/fantasia-he-tree/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fantasia-he-tree", 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

$skill-installer install https://github.com/vishiri/fantasia-archive/tree/master/.cursor/skills/fantasia-he-tree

Type 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.

skills CLI

$ npx skills add vishiri/fantasia-archive --skill fantasia-he-tree -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install vishiri/fantasia-archive fantasia-he-tree --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/vishiri/fantasia-archive.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.cursor/skills/fantasia-he-tree .agents/skills/fantasia-he-tree && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "fantasia-he-tree" agent skill from https://github.com/vishiri/fantasia-archive/tree/master/.cursor/skills/fantasia-he-tree into .agents/skills/fantasia-he-tree/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fantasia-he-tree", 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.

skills CLI

$ npx skills add vishiri/fantasia-archive --skill fantasia-he-tree -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install vishiri/fantasia-archive fantasia-he-tree --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/vishiri/fantasia-archive.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.cursor/skills/fantasia-he-tree .cursor/skills/fantasia-he-tree && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "fantasia-he-tree" agent skill from https://github.com/vishiri/fantasia-archive/tree/master/.cursor/skills/fantasia-he-tree into .cursor/skills/fantasia-he-tree/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fantasia-he-tree", 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

$ gemini skills install https://github.com/vishiri/fantasia-archive.git --path .cursor/skills/fantasia-he-tree

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add vishiri/fantasia-archive --skill fantasia-he-tree -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install vishiri/fantasia-archive fantasia-he-tree --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/vishiri/fantasia-archive.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.cursor/skills/fantasia-he-tree .gemini/skills/fantasia-he-tree && rm -rf skills-src

Use ~/.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/

Paste into Gemini CLI

Install the "fantasia-he-tree" agent skill from https://github.com/vishiri/fantasia-archive/tree/master/.cursor/skills/fantasia-he-tree into .gemini/skills/fantasia-he-tree/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fantasia-he-tree", 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.

GitHub CLI

$ gh skill install vishiri/fantasia-archive fantasia-he-tree

Installs 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).

skills CLI

$ npx skills add vishiri/fantasia-archive --skill fantasia-he-tree -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/vishiri/fantasia-archive.git skills-src && mkdir -p .github/skills && cp -r skills-src/.cursor/skills/fantasia-he-tree .github/skills/fantasia-he-tree && rm -rf skills-src

Use ~/.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/

Paste into GitHub Copilot

Install the "fantasia-he-tree" agent skill from https://github.com/vishiri/fantasia-archive/tree/master/.cursor/skills/fantasia-he-tree into .github/skills/fantasia-he-tree/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fantasia-he-tree", 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.

skills CLI

$ npx skills add vishiri/fantasia-archive --skill fantasia-he-tree -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install vishiri/fantasia-archive fantasia-he-tree --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/vishiri/fantasia-archive.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.cursor/skills/fantasia-he-tree .opencode/skills/fantasia-he-tree && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "fantasia-he-tree" agent skill from https://github.com/vishiri/fantasia-archive/tree/master/.cursor/skills/fantasia-he-tree into .opencode/skills/fantasia-he-tree/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fantasia-he-tree", 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: fantasia-he-tree
GitHub stars: 409
Token cost: ~1.6k tokens
SKILL.md length: 494 words
Files: 1
Skills in repo: 35
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: GPL-3.0

At a glance

Hierarchical tree UI with @he-tree/vue only — full project replacement for Quasar QTree (forbidden).

Works in 4 steps: Prop virtualization on BaseTree /… → Fixed height or max-height on tree or… → Lazy-load children from main/SQLite on… → …
Changing any nested tree in the renderer
SKILL.md covers Policy, Why he-tree (not QTree), Installation (already in repo) and Basic usage (Vue 3 + script…, plus 8 more sections
Calls yarn

What it does

Fantasia He Tree is an agent skill from vishiri/fantasia-archive. Hierarchical tree UI with @he-tree/vue only — full project replacement for Quasar QTree (forbidden). Virtualization, drag-and-drop, Quasar slot styling. Use when adding or changing any nested tree in the renderer.

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It works with Vue.js. The repository describes itself as: A world-builder's best friend! The licence is GPL-3.0.

When your agent uses it

Changing any nested tree in the renderer

Example prompts

“/fantasia-he-tree”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

Prop virtualization on BaseTree / Draggable.
Fixed height or max-height on tree or bounded scroll parent.
Lazy-load children from main/SQLite on first expand for huge projects.
Avoid expand-all on huge trees in one tick.

What it can do on your machine

Read from SKILL.md and the folder at commit 26d4648. 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:
- yarn
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
- hetree.phphe.com
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

Fantasia He Tree loads about 1.6k tokens when it runs. Until then it costs about 58 tokens; SKILL.md has 494 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~58
When it runs · the whole SKILL.md, loaded when a task matches: ~1.6k

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 vishiri/fantasia-archive at commit 26d4648, republished under its GPL-3.0 licence (© vishiri). 494 words, ~1,617 tokens.

Download SKILL.mdSave it as .claude/skills/fantasia-he-tree/SKILL.md (or your agent's skills folder).

name: fantasia-he-tree
description: Hierarchical tree UI with @he-tree/vue only — full project replacement for Quasar QTree (forbidden). Virtualization, drag-and-drop, Quasar slot styling. Use when adding or changing any nested tree in the renderer.

Fantasia Archive — hierarchical trees (`@he-tree/vue`)

Policy

Enforced detail: fa-he-tree.mdc.

@he-tree/vue only tree UI (package.json dependency).
Quasar QTree / q-tree forbidden — production, dialogs, layouts, Storybook, experiments.
Upstream: hetree.phphe.com (Vue 3 / v2).

Why he-tree (not QTree)

QTree excluded. @he-tree/vue: virtual list for scale, optional DnD, slots for Quasar-styled rows.

Installation (already in repo)

bash

yarn add @he-tree/vue

Basic usage (Vue 3 + script setup)

vue

<template>
  <Draggable
    v-model="treeData"
    virtualization
    class="myFeatureTree hasScrollbar"
    :style="{ height: treeHeightPx + 'px' }"
    data-test-locator="myFeature-tree"
  >
    <template #default="{ node, stat }">
      <!-- Quasar + i18n inside the slot -->
      <span
        class="myFeatureTree__label"
        :data-test-locator="'myFeature-tree-node-' + node.id"
      >
        {{ node.label }}
      </span>
    </template>
  </Draggable>
</template>

<script setup lang="ts">
import { Draggable } from '@he-tree/vue'
import '@he-tree/vue/style/default.css'

const treeData = defineModel<Array<{ id: string, label: string, children?: unknown[] }>>('treeData', {
  required: true
})

const treeHeightPx = 400
</script>

BaseTree — same API without drag when reorder not required.
Import @he-tree/vue/style/default.css in owning SFC or wrapper.

Virtualization checklist

Prop virtualization on BaseTree / Draggable.
Fixed height or max-height on tree or bounded scroll parent.
Lazy-load children from main/SQLite on first expand for huge projects.
Avoid expand-all on huge trees in one tick.

Related props: virtualization, virtualizationPrerenderCount.

Drag-and-drop

Draggable when users reorder nodes.
No vue-draggable-plus on trees — he-tree owns hierarchical reorder (fantasia-drag-drop).
Tune dragOverThrottleInterval on large trees.
Persist via Pinia + IPC after drop; validate in main with Zod where structured.

DnD + scroll preservation (layout tree playbook)

Full postmortem: this skill section below (DnD + scroll preservation). Reference: DialogProjectSettingsWorldTemplateLayoutTree.vue.

Symptom: drop moves data OK; scrollTop jumps (often top). Or add row does not scroll into view.

Cause	Fix
`:key` on `Draggable` changes on reorder/remount	No `:key` for sort; `resyncTreeDataFromProps` updates `treeData`
Topology key uses draft array order or sort fields	Canonical key: sorted ids + `groupId` only — `mapDialogProjectSettingsWorldTemplateLayoutToTreeStructureKey`
Resync rebuilds `treeData` when topology unchanged	Match keys → `patchWorldTemplateLayoutDisplayLabelsInHeTreeNodes` only
`overflow: auto` on wrapper, not he-tree root	Scroll on `.dialogProjectSettingsWorldTemplateLayoutTree`; host sizing only — `resolveDialogProjectSettingsWorldTemplateLayoutTreeScrollContainer`
Post-drop `scrollTop` restore	Do not — fights virtualization; fix remount/rebuild instead

Workspace hierarchy (ProjectHierarchyTree): expand truth = openNodeIds / he-tree stats — never derive drag expand snapshots from mounted DOM rows (virt omits off-screen). No :key remount; soft resync only. Post-drop expand reapply can zero vtlist scrollTop — preserve/restore around commit finalize (not a substitute for remount). he-tree does not forward @virtual-list/vue buffer; hierarchy manager mutates VirtualList default (~10 row heights) before mount.

Pipeline: @before-drag-start → v-model during drag → @after-drop → deferred emitLayoutFromTreeDataIfChanged → props watch resyncTreeDataFromProps. Append: separate count watch → scheduleScrollContainerToRevealLastItem.

Debug: compare topology keys layout vs mapHeTreeNodesToWorldTemplateLayoutDraft(treeData) after drop; check resync rebuild vs patch; find real scroll element in DevTools.

Show full SKILL.md (153 more words)Show less

Data and architecture

Concern	Location
Node row UI, locators	Feature `.vue` (thin script)
DB → nodes, filter, selection	Feature `scripts/` or `src/scripts/<domain>/`
Shared walk/flatten/id-index	Colocate with feature until ≥2 consumers need same helpers (no `src/scripts/faHeTree/` yet)
Shared interfaces	*`types/I_.ts`** (`app/types/...`)

Two-level: pure transforms in functions/ (import type only); managers wire stores + IPC.

Styling

Override defaults in feature styles/ (component-styles-folder.mdc); BEM + semantic $ tokens (project-scss.mdc).
hasScrollbar when gutter stability matters.
User strings in i18n/; node labels from data OK dynamic.

Utilities

import { walkTreeData } from '@he-tree/vue'

walkTreeData(nodes, (node, index, parent) => {
  // visit
}, { childrenKey: 'children' })

Use walkTreeData for search, bulk expand, validation — not ad hoc recursion everywhere.

Project Settings — world template layout

DialogProjectSettingsWorldTemplateLayoutTree.vue — Draggable, max depth 2, DnD rules in dialogProjectSettingsWorldTemplateLayoutDnD.ts, commit policy + wiring in feature scripts/. DnD scroll playbook: this skill DnD + scroll preservation. Full map: fa-he-tree.mdc and fa-drag-drop-lists.mdc.

Tests

Vitest — mount SFC; stub IPC; assert data-test-locator
Playwright — locators; rebuild Electron when wiring changes (fantasia-testing)
Storybook — modest mocked tree; import default CSS

Files

Just SKILL.md in .cursor/skills/fantasia-he-tree of vishiri/fantasia-archive.

Open the folder on GitHubat commit 26d4648

Compare with similar skills

Fantasia He 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.

Fantasia He Tree compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Fantasia He Tree this skillvishiri/fantasia-archive	409	—	~1.6k	Automated safety check: Pass	GPL-3.0	3 days ago
Tailwindcss Developmentanonaddy/anonaddy	4.9k	10 repos	~865	Automated safety check: Pass	MIT	4 days ago
GSAP Core Animationgreensock/gsap-skills	16k	3 repos	~3.7k	Automated safety check: Pass	MIT	2 mo ago
GSAP in Vue, Nuxt and Sveltegreensock/gsap-skills	16k	3 repos	~2.6k	Automated safety check: Pass	MIT	2 mo ago
Vuetify Playgroundvuetifyjs/vuetify	41k	—	~730	Automated safety check: Pass	Custom licence	today
Inertia Vue Developmentanonaddy/anonaddy	4.9k	3 repos	~3.4k	Automated safety check: Pass	MIT	4 days ago

Similar skills

Tailwindcss Development
anonaddy/anonaddy
Always invoke when the user's message includes 'tailwind' in any form.
4.9k GitHub starsUsed in 10 repos~865 tokens
Frontend & DesignAuto-check passed
GSAP Core Animation
greensock/gsap-skills
Covers the GSAP core API for tweens, easing, staggers, defaults and matchMedia, and when to choose GSAP over CSS animations or other JavaScript animation libraries.
16k GitHub starsUsed in 3 repos~3.7k tokens
Frontend & DesignAuto-check passed
GSAP in Vue, Nuxt and Svelte
greensock/gsap-skills
Shows how to use GSAP in Vue, Nuxt, Svelte and other lifecycle-based frameworks: create after mount, scope selectors to the component, and revert on unmount.
16k GitHub starsUsed in 3 repos~2.6k tokens
Frontend & DesignAuto-check passed
Vuetify Playground
vuetifyjs/vuetify
Maintains the Vuetify repo's local Playground.vue so contributors get a realistic reproduction and a short demo they can paste into a pull request description.
41k GitHub stars~730 tokensUpdated today
Frontend & DesignAuto-check passed
Inertia Vue Development
anonaddy/anonaddy
Develops Inertia.js v3 Vue client-side applications. An agent skill from anonaddy/anonaddy.
4.9k GitHub starsUsed in 3 repos~3.4k tokens
Auto-check passed
Web Clone
Jane-xiaoer/claude-skill-web-clone
网站复刻 / 克隆方法论。USE WHEN 用户说复刻网站、克隆网站、clone website、抄个站、仿站、照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 /…
1k GitHub starsUsed in 1 repo~2.7k tokens
Game DevelopmentAuto-check passed

Questions about Fantasia He Tree

What does Fantasia He Tree do?

Hierarchical tree UI with @he-tree/vue only — full project replacement for Quasar QTree (forbidden). Fantasia He Tree is an agent skill from vishiri/fantasia-archive. Hierarchical tree UI with @he-tree/vue only — full project replacement for Quasar QTree (forbidden).

When should I use Fantasia He Tree?

Fantasia He Tree fits situations like: changing any nested tree in the renderer.

How do I install Fantasia He Tree in Claude Code?

Run `npx skills add vishiri/fantasia-archive --skill fantasia-he-tree -a claude-code`. Or copy the skill folder (.cursor/skills/fantasia-he-tree in vishiri/fantasia-archive) into .claude/skills/fantasia-he-tree in your project. Claude Code loads it when a task matches its description.

How do I install Fantasia He Tree in Codex?

Run `npx skills add vishiri/fantasia-archive --skill fantasia-he-tree -a codex`. Or copy the skill folder (.cursor/skills/fantasia-he-tree in vishiri/fantasia-archive) into .agents/skills/fantasia-he-tree in your project. Codex loads it when a task matches its description.

Can I use Fantasia He 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 vishiri/fantasia-archive --skill fantasia-he-tree -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/fantasia-he-tree, .gemini/skills/fantasia-he-tree, .github/skills/fantasia-he-tree and .opencode/skills/fantasia-he-tree in your project.

What does Fantasia He Tree need to run?

Going by SKILL.md and its folder, Fantasia He Tree needs the command-line tools its instructions call (yarn).

Does Fantasia He Tree access the network?

SKILL.md names 1 domain. As links in the text: hetree.phphe.com. This is read from the text; nothing was executed.

Is Fantasia He 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 Fantasia He Tree use?

Fantasia He Tree is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Fantasia He Tree use?

About 1.6k tokens (SKILL.md is roughly 6.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Fantasia He Tree?

Skills that share tags, products or a category with Fantasia He Tree: Tailwindcss Development (anonaddy/anonaddy, 4.9k stars), GSAP Core Animation (greensock/gsap-skills, 16k stars), GSAP in Vue, Nuxt and Svelte (greensock/gsap-skills, 16k stars) and Vuetify Playground (vuetifyjs/vuetify, 41k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Fantasia He Tree?

vishiri (a GitHub user) maintains it in vishiri/fantasia-archive, which has 409 GitHub stars. The repository holds 35 skills in this directory. The repository was last updated on October 7, 2026.

Source: vishiri/fantasia-archive on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Fantasia He Tree

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Fantasia Archive — hierarchical trees (@he-tree/vue)

Policy

Why he-tree (not QTree)

Installation (already in repo)

Basic usage (Vue 3 + script setup)

Virtualization checklist

Drag-and-drop

DnD + scroll preservation (layout tree playbook)

Data and architecture

Styling

Utilities

Project Settings — world template layout

Tests

Related docs

Files

Compare with similar skills

Similar skills

More from vishiri/fantasia-archive

Related

Questions about Fantasia He Tree

Fantasia Archive — hierarchical trees (`@he-tree/vue`)