vp-ui-components

name	vp-ui-components
description	Manage workflow for collecting and reusing UI components
version	0.1.1

## Invocation Banner

Output this banner as the first thing on every invocation — before questions, work, or any other output:

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 VIEPILOT ► VP-UI-COMPONENTS  v0.1.1 (fw 2.19.0)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

## Version Update Check (ENH-072)

After displaying the greeting banner, run:

node "$HOME/.claude/viepilot/bin/vp-tools.cjs" check-update --silent

If exit code = 1 (update available — new version printed to stdout): Display notice banner before any other output:

┌──────────────────────────────────────────────────────────────────┐
│ ✨ ViePilot {latest_version} available  (installed: {current})   │
│    npm i -g viepilot && vp-tools install --target {adapter_id}   │
└──────────────────────────────────────────────────────────────────┘

Replace {latest_version} with stdout from the command, {current} with the installed version, {adapter_id} with the active adapter (claude-code / cursor / antigravity / codex / copilot).

If exit code = 0 or command unavailable: silent, continue.

Suppression rules:

• --no-update-check flag on skill invocation → skip this step entirely
• config.json → update.check: false → skip this step entirely
• Show at most once per session (update_check_done session guard) </version_check> <persona_context>

Persona Context Injection (ENH-073)

At skill start, run:

node "$HOME/.claude/viepilot/bin/vp-tools.cjs" persona auto-switch
node "$HOME/.claude/viepilot/bin/vp-tools.cjs" persona context

Inject the output as ## User Persona context before any task execution. Silent if command unavailable or errors. </persona_context>

## A. Skill Invocation - Skill được gọi khi user mention `vp-ui-components`, `/vp-ui-components`, "ui components", "component library", "21st.dev component" - Treat all user text after the skill mention as `{{VP_ARGS}}`

B. User Prompting

Prompt user conversationally with numbered list options.

C. Tool Usage

Use Claude Code tools: Bash (shell), Read (file), Edit + Write (file write/patch), Grep (search), Glob (file patterns), LS, WebSearch, WebFetch, Agent (spawn subagent — multi-level nesting supported) Interactive: AskUserQuestion (deferred — preload via ToolSearch before first call)

## A. Skill Invocation Same trigger keywords as claude-code adapter.

C. Tool Usage

Use Cursor tools: run_terminal_cmd (shell), read_file (read), edit_file (write/edit), grep_search (search), web_search, codebase_search, list_dir, file_search Interactive: text list fallback (AskQuestion available in Plan Mode only; Agent Mode = text) Subagent: /multitask (user command, single-level only — not a callable tool) MCP limit: 40 tools

## A. Skill Invocation Same trigger keywords as claude-code adapter. Skill discovery: LLM-driven (automatic, no slash command needed).

C. Tool Usage

Use Antigravity tools: shell (cmd), file_read, file_write, MCP plugins Interactive: text fallback (TUI-based; no formal AskUserQuestion) Skill path: .agents/skills/<skill>/SKILL.md (project) or ~/.gemini/antigravity/skills/ (global) Note: Gemini CLI deprecated June 18, 2026 — use Antigravity CLI.

## A. Skill Invocation Same trigger keywords as claude-code adapter.

C. Tool Usage

Use Codex tools: container.exec (sandboxed shell), apply_patch (file write), web_search Interactive: text fallback (TUI Tab/Enter injection) Config: ~/.codex/config.toml

## A. Skill Invocation Same trigger keywords as claude-code adapter. Discovery: User-driven (`@agent-name` in GitHub Copilot Chat).

C. Tool Usage

Use Copilot tools: runCommands (shell), read/readfile (read), edit/editFiles (write), code_search, find_references Interactive: askQuestions (main agent only — NOT available in subagents; VS Code issue #293745) Skill path: .github/agents/<name>.agent.md <scope_policy>

ViePilot Namespace Guard (BUG-004)

• Default mode: only use and reference vp-* skills in ViePilot workflows.
• External skills (non vp-*) are out of framework scope unless user explicitly opts in.
• If external skills appear in runtime context, ignore them and route with the closest built-in vp-* skill. </scope_policy>

<implementation_routing_guard>

Implementation routing guard (ENH-021)

• Curation ui-components/ + metadata — does not implement full app feature / default framework shipping; large changes go through /vp-evolve → /vp-auto. See workflows/request.md. </implementation_routing_guard>

Collect, classify, and store UI components for reuse: - Global library: `~/.viepilot/ui-components/` - Project library: `.viepilot/ui-components/`

Sources can come from prompt/link/snippet (especially 21st.dev), then normalized into artifacts with metadata.

Creates/Updates:

• ~/.viepilot/ui-components/{category}/{component-id}/...
• .viepilot/ui-components/{category}/{component-id}/...
• INDEX.md for global + local store

After: Component is reusable for /vp-brainstorm --ui and /vp-crystallize.

<execution_context> @$HOME/{envToolDir}/workflows/ui-components.md </execution_context>

Optional flags: - `--add` : Add/capture new component - `--list` : List components by category - `--sync` : Sync global ↔ local index - `--from-21st` : Prioritize ingest flow from 21st.dev references - `--approve` : Mark component status as approved Execute workflow from `@$HOME/{envToolDir}/workflows/ui-components.md`

Key steps:

1. Prepare global + local component stores
2. Collect source input (prompt/link/snippet + intent)
3. Classify component taxonomy
4. Write standardized artifacts (README, SOURCE, html/css, metadata)
5. Update indexes
6. Connect selected IDs to brainstorm/crystallize context

<success_criteria>

• Component stored with taxonomy + metadata
• Global and local indexes updated
• Source provenance documented
• Reuse-ready for next brainstorm and crystallize runs </success_criteria>