Agent skill

Vue Tui

Terminal Vue UI development and review for @simonhe/vue-tui.

MITAuto-check passedDevelopment

Install Vue Tui

skills CLI

$ npx skills add Simon-He95/vue-tui --skill vue-tui -a claude-code

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

GitHub CLI

$ gh skill install Simon-He95/vue-tui vue-tui --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/Simon-He95/vue-tui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/vue-tui .claude/skills/vue-tui && 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 "vue-tui" agent skill from https://github.com/Simon-He95/vue-tui/tree/main/.agents/skills/vue-tui into .claude/skills/vue-tui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vue-tui", 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/Simon-He95/vue-tui/tree/main/.agents/skills/vue-tui

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 Simon-He95/vue-tui --skill vue-tui -a codex

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

GitHub CLI

$ gh skill install Simon-He95/vue-tui vue-tui --agent codex

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

Manual copy

$ git clone --depth 1 https://github.com/Simon-He95/vue-tui.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/vue-tui .agents/skills/vue-tui && 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 "vue-tui" agent skill from https://github.com/Simon-He95/vue-tui/tree/main/.agents/skills/vue-tui into .agents/skills/vue-tui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vue-tui", 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 Simon-He95/vue-tui --skill vue-tui -a cursor

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

GitHub CLI

$ gh skill install Simon-He95/vue-tui vue-tui --agent cursor

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

Manual copy

$ git clone --depth 1 https://github.com/Simon-He95/vue-tui.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/vue-tui .cursor/skills/vue-tui && 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 "vue-tui" agent skill from https://github.com/Simon-He95/vue-tui/tree/main/.agents/skills/vue-tui into .cursor/skills/vue-tui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vue-tui", 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/Simon-He95/vue-tui.git --path .agents/skills/vue-tui

--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 Simon-He95/vue-tui --skill vue-tui -a gemini-cli

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

GitHub CLI

$ gh skill install Simon-He95/vue-tui vue-tui --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/Simon-He95/vue-tui.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/vue-tui .gemini/skills/vue-tui && 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 "vue-tui" agent skill from https://github.com/Simon-He95/vue-tui/tree/main/.agents/skills/vue-tui into .gemini/skills/vue-tui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vue-tui", 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 Simon-He95/vue-tui vue-tui

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 Simon-He95/vue-tui --skill vue-tui -a github-copilot

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

Manual copy

$ git clone --depth 1 https://github.com/Simon-He95/vue-tui.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/vue-tui .github/skills/vue-tui && 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 "vue-tui" agent skill from https://github.com/Simon-He95/vue-tui/tree/main/.agents/skills/vue-tui into .github/skills/vue-tui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vue-tui", 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 Simon-He95/vue-tui --skill vue-tui -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 Simon-He95/vue-tui vue-tui --agent opencode

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

Manual copy

$ git clone --depth 1 https://github.com/Simon-He95/vue-tui.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/vue-tui .opencode/skills/vue-tui && 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 "vue-tui" agent skill from https://github.com/Simon-He95/vue-tui/tree/main/.agents/skills/vue-tui into .opencode/skills/vue-tui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vue-tui", 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: vue-tui
GitHub stars: 259
Token cost: ~1.2k tokens
SKILL.md length: 393 words
Files: 3 (incl. references)
Skills in repo: 1
Repo updated: Oct 8, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Terminal Vue UI development and review for @simonhe/vue-tui.

Works in 6 steps: Start with data. Search the package and… → Identify the layer you are touching:… → Design terminal UI in cells. Compute x,… → …
Reviewing vue-tui terminal components
SKILL.md covers Overview, Workflow, Package Anchors and Consumer Anchors, plus 3 more sections
Calls pnpm and rg

What it does

Vue Tui is an agent skill from Simon-He95/vue-tui. Terminal Vue UI development and review for @simonhe/vue-tui. Use when implementing, debugging, testing, documenting, or reviewing vue-tui terminal components, dialogs, inputs, transcripts, keyboard and pointer interactions, render planes, scheduler invalidation, cell-width layout, theming, createTerminalApp tests, or CLI consumer integration patterns.

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `agents/openai.yaml` and `references/terminal-components.md`).

It sits in Development, covering Theming and dark mode and Third-party API integration. It works with Vue.js. The repository describes itself as: Vue 3 terminal UI toolkit for browser DOM and CLI stdout: components, ANSI rendering, markdown transcripts, log views, and agent consoles. The licence is MIT.

When your agent uses it

Reviewing vue-tui terminal components
Keyboard and pointer interactions
Scheduler invalidation
Cell-width layout

Example prompts

“/vue-tui”

Workflow steps

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

Start with data. Search the package and consumer examples before changing behavior: rg…
Identify the layer you are touching: src/core, src/events, src/runtime, src/cli, src/vue, src/renderer, test, docs, or examples. Keep…
Design terminal UI in cells. Compute x, y, w, and h as integer cells; use vue-tui text utilities for width, slicing, wrapping, and…
Preserve render-plane behavior. Use TRenderPlane, TRenderLayer, render.invalidatePlane(...), scheduler plane invalidation, and dirty-row…
Treat focus, keyboard capture, pointer capture, and selection as public behavior. Modal and input components should own the keys they…
Verify through the narrowest relevant test first. Use createTerminalApp, snapshots, getCell, dispatched events, resize, and package demos…

What it can do on your machine

Read from SKILL.md and the folder at commit 1e6502f. 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
- rg
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

Vue Tui loads about 1.2k tokens when it runs, and up to ~3k if it reads all its reference files. Until then it costs about 91 tokens; SKILL.md has 393 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~91
When it runs · the whole SKILL.md, loaded when a task matches: ~1.2k
With references · SKILL.md plus every file in references/, read only if the agent opens them: ~3k

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 Simon-He95/vue-tui at commit 1e6502f, republished under its MIT licence (© Simon-He95). 393 words, ~1,220 tokens.

Download SKILL.mdSave it as .claude/skills/vue-tui/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.

name: vue-tui
description: Terminal Vue UI development and review for @simon_he/vue-tui. Use when implementing, debugging, testing, documenting, or reviewing vue-tui terminal components, dialogs, inputs, transcripts, keyboard and pointer interactions, render planes, scheduler invalidation, cell-width layout, theming, createTerminalApp tests, or CLI consumer integration patterns.

Vue TUI

Overview

Use this skill to build and review @simon_he/vue-tui terminal components with the patterns proven by the package itself and by CLI consumers such as best-agent's dimsdk UI.

Workflow

Start with data. Search the package and consumer examples before changing behavior: rg "TDialog|TInput|TTranscriptView|createTerminalApp|invalidatePlane|events.dispatch" src test examples /Users/Simon/Github/best-agent/apps/cli/src /Users/Simon/Github/best-agent/apps/cli/test.
Identify the layer you are touching: src/core, src/events, src/runtime, src/cli, src/vue, src/renderer, test, docs, or examples. Keep changes in that layer unless the behavior truly crosses boundaries.
Design terminal UI in cells. Compute x, y, w, and h as integer cells; use vue-tui text utilities for width, slicing, wrapping, and sanitization.
Preserve render-plane behavior. Use TRenderPlane, TRenderLayer, render.invalidatePlane(...), scheduler plane invalidation, and dirty-row APIs consistently with nearby code.
Treat focus, keyboard capture, pointer capture, and selection as public behavior. Modal and input components should own the keys they handle and prevent leakage to background widgets.
Verify through the narrowest relevant test first. Use createTerminalApp, snapshots, getCell, dispatched events, resize, and package demos as needed.

Package Anchors

Terminal app/test harness: src/create-terminal-app.ts, src/cli.ts, test/ui-regressions-support.ts
Rendering: src/vue/render/render-manager.ts, src/vue/components/TRenderPlane.ts, src/vue/components/TRenderLayer.ts
Scheduler: src/vue/components/terminal-provider/scheduler.ts, src/vue/scheduler/frame-scheduler.ts
Components: src/vue/components/TText.ts, TView.ts, TInput.ts, TDialog.ts, TCommandPalette.ts, TTranscriptView.ts, TVirtualRows.ts
Text and geometry: src/vue/utils/text.ts, src/vue/utils/rect.ts, src/core/buffer/width.ts
Events and selection: src/events/manager/event-manager.ts, src/events/manager/types.ts, src/selection/terminal-selection.ts
Tests: test/p1-p2-components.test.ts, test/tlog-view.test.ts, test/tlog-scrollbar.test.ts, test/tinput-restrict-text.test.ts, test/text-newlines.test.ts
Examples: examples/tlog-view-lab.ts, examples/agent-console/src/AgentConsoleSurface.ts, scripts/run-component-terminal.ts

Consumer Anchors

Use these when validating best practices against a real CLI app:

/Users/Simon/Github/best-agent/apps/cli/src/dimsdk/pages/ChatPage/index.ts
/Users/Simon/Github/best-agent/apps/cli/src/dimsdk/pages/ChatPage/components/ChatMessages.ts
/Users/Simon/Github/best-agent/apps/cli/src/dimsdk/pages/ChatPage/components/ChatBottomPanel.ts
/Users/Simon/Github/best-agent/apps/cli/src/dimsdk/ui/components/CommandPalette.ts
/Users/Simon/Github/best-agent/apps/cli/src/dimsdk/ui/components/ProviderConnectDialog.ts
/Users/Simon/Github/best-agent/apps/cli/test/dimsdk-command-palette.test.ts
/Users/Simon/Github/best-agent/apps/cli/test/provider-connect-dialog-input-clear-tip.test.ts

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

Best Practices

Read references/terminal-components.md for the detailed source-derived practices. Load it for any non-trivial component, renderer, input, transcript, or test task.

Implementation Notes

Prefer package primitives over app-local inventions: TView, TText, TInput, TDialog, TBox, TSelect, TCommandPalette, TTranscriptView, TVirtualRows, TLogView, TLogScrollbar, and TPathPicker.
Keep source/API changes close to existing file ownership. Do not add helpers unless multiple package components need the behavior.
Preserve renderer-agnostic semantics. Component behavior should work for CLI/headless and DOM renderers unless the file is explicitly renderer-specific.
Public prop/event changes may require docs generation or API manifest checks. Follow AGENTS.md validation guidance.
Keep tests deterministic. Avoid assertions that depend on cursor blinking, real wall-clock timing, or animation frames unless the nearby tests already control those inputs.

Verification

Run the nearest Vitest target first, for example pnpm vitest run test/p1-p2-components.test.ts -t "TDialog" or pnpm vitest run test/tinput-restrict-text.test.ts. For broader package changes, consider pnpm run typecheck, pnpm run lint, pnpm run test, and relevant demo commands from package.json.

Files

SKILL.md and 2 other files (references) in .agents/skills/vue-tui of Simon-He95/vue-tui.

SKILL.md
agents/openai.yaml
references/terminal-components.md

Open the folder on GitHubat commit 1e6502f

Compare with similar skills

Vue Tui 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.

Vue Tui compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Vue Tui this skillSimon-He95/vue-tui	259	—	~1.2k	Automated safety check: Pass	MIT	yesterday
Enforce Rules For Unocssmoeru-ai/airi	50k	—	~525	Automated safety check: Pass	MIT	today
Winui AppLanceMcCarthy/DevOpsExamples	172	1 repos	~2.8k	Automated safety check: Pass	Apache-2.0	yesterday
Vuetify Skilldlogue/vite-vuetify-ts-starter	181	1 repos	~1.9k	Automated safety check: Pass	MIT	7 days ago
Flowfile Frontend ConventionsEdwardvaneechoud/Flowfile	375	—	~8.5k	Automated safety check: Pass	MIT	today
Zodjasonjgardner/blockbench-mcp-plugin	495	3 repos	~1.4k	Automated safety check: Pass	GPL-3.0	8 days ago

Similar skills

Enforce Rules For Unocss
moeru-ai/airi
Enforce AIRI's UnoCSS, Vue styling, shared UI component, animation, icon, and color-mode practices.
50k GitHub stars~525 tokensUpdated today
DevelopmentAuto-check passed
Winui App
LanceMcCarthy/DevOpsExamples
Bootstrap, develop, and design modern WinUI 3 desktop applications with C and the Windows App SDK using official Microsoft guidance, WinUI Gallery patterns, Windows App SDK samples, and…
172 GitHub starsUsed in 1 repo~2.8k tokens
DevOps & CloudAuto-check passed
Vuetify Skilld
logue/vite-vuetify-ts-starter
Vue Material Component Framework. An agent skill from logue/vite-vuetify-ts-starter.
181 GitHub starsUsed in 1 repo~1.9k tokens
Frontend & DesignAuto-check passed
Flowfile Frontend Conventions
Edwardvaneechoud/Flowfile
Vue 3 renderer + Tauri 2 shell conventions for flowfilefrontend and flowfilewasm — path aliases, Pinia store map, the axios trailing-slash 307 trap, the node-settings-by-glob-convention resolution…
375 GitHub stars~8.5k tokensUpdated today
Frontend & DesignAuto-check passed
Zod
jasonjgardner/blockbench-mcp-plugin
Zod schema validation best practices for type safety, parsing, and error handling.
495 GitHub starsUsed in 3 repos~1.4k tokens
DevelopmentAuto-check passed
Passport Development
trypostit/trypost
Develops OAuth2 API authentication with Laravel Passport. An agent skill from trypostit/trypost.
685 GitHub stars~1.9k tokensUpdated yesterday
Backend & APIsAuto-check passed

Works with

Vue.js

Questions about Vue Tui

What does Vue Tui do?

Terminal Vue UI development and review for @simonhe/vue-tui. Vue Tui is an agent skill from Simon-He95/vue-tui. Terminal Vue UI development and review for @simonhe/vue-tui.

When should I use Vue Tui?

Vue Tui fits situations like: reviewing vue-tui terminal components; keyboard and pointer interactions; scheduler invalidation; cell-width layout.

How do I install Vue Tui in Claude Code?

Run `npx skills add Simon-He95/vue-tui --skill vue-tui -a claude-code`. Or copy the skill folder (.agents/skills/vue-tui in Simon-He95/vue-tui) into .claude/skills/vue-tui in your project. Claude Code loads it when a task matches its description.

How do I install Vue Tui in Codex?

Run `npx skills add Simon-He95/vue-tui --skill vue-tui -a codex`. Or copy the skill folder (.agents/skills/vue-tui in Simon-He95/vue-tui) into .agents/skills/vue-tui in your project. Codex loads it when a task matches its description.

Can I use Vue Tui 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 Simon-He95/vue-tui --skill vue-tui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vue-tui, .gemini/skills/vue-tui, .github/skills/vue-tui and .opencode/skills/vue-tui in your project.

What does Vue Tui need to run?

Going by SKILL.md and its folder, Vue Tui needs the command-line tools its instructions call (pnpm and rg).

Does Vue Tui 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 Vue Tui 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 Vue Tui use?

Vue Tui is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Vue Tui use?

About 1.2k tokens (SKILL.md is roughly 4.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 1.8k tokens, read only when the agent opens those files.

What are the alternatives to Vue Tui?

Skills that share tags, products or a category with Vue Tui: Enforce Rules For Unocss (moeru-ai/airi, 50k stars), Winui App (LanceMcCarthy/DevOpsExamples, 172 stars), Vuetify Skilld (logue/vite-vuetify-ts-starter, 181 stars) and Flowfile Frontend Conventions (Edwardvaneechoud/Flowfile, 375 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Vue Tui?

Simon-He95 (a GitHub user) maintains it in Simon-He95/vue-tui, which has 259 GitHub stars. The repository was last updated on October 8, 2026.

Source: Simon-He95/vue-tui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Vue Tui

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

Vue TUI

Overview

Workflow

Package Anchors

Consumer Anchors

Best Practices

Implementation Notes

Verification

Files

Compare with similar skills

Similar skills

Enforce Rules For Unocss

Winui App

Vuetify Skilld

Flowfile Frontend Conventions

Zod

Passport Development

Related

Questions about Vue Tui