Agent skill

Primary Sidebar

Complete guide for adding, updating, and removing tabs in the Primary Sidebar of OrcaQ.

MITAuto-check passedDatabases

Install Primary Sidebar

skills CLI

$ npx skills add cin12211/orca-q --skill primary-sidebar -a claude-code

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

GitHub CLI

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

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 cin12211/orca-q --skill primary-sidebar -a codex

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

GitHub CLI

$ gh skill install cin12211/orca-q primary-sidebar --agent codex

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

Manual copy

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

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

GitHub CLI

$ gh skill install cin12211/orca-q primary-sidebar --agent cursor

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

Manual copy

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

--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 cin12211/orca-q --skill primary-sidebar -a gemini-cli

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

GitHub CLI

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

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 cin12211/orca-q --skill primary-sidebar -a github-copilot

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

Manual copy

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

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

Manual copy

$ git clone --depth 1 https://github.com/cin12211/orca-q.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/primary-sidebar .opencode/skills/primary-sidebar && 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 "primary-sidebar" agent skill from https://github.com/cin12211/orca-q/tree/main/.claude/skills/primary-sidebar into .opencode/skills/primary-sidebar/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "primary-sidebar", 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: primary-sidebar
GitHub stars: 224
Token cost: ~2.6k tokens
SKILL.md length: 521 words
Files: 1
Skills in repo: 16
Repo updated: Sep 21, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Complete guide for adding, updating, and removing tabs in the Primary Sidebar of OrcaQ.

Works in 5 steps: Add enum value → Create the management panel module → Export from the management module → …
Databases work in your project
SKILL.md covers Architecture Overview, File Locations, How the Switcher Works… and How to Add a New Sidebar Tab, plus 5 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Primary Sidebar is an agent skill from cin12211/orca-q. Complete guide for adding, updating, and removing tabs in the Primary Sidebar of OrcaQ. Covers the full flow — ActivityBarItemType enum → useActivityBarStore → PrimarySideBar component → Management panel component. Load this skill for any task involving the left sidebar, activity bar tabs, or management panels (Explorer, Schemas, ERD, Roles, Export, Agent).

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

It sits in Databases. It works with Vue.js. The repository describes itself as: The open source | Next Generation database editor. The licence is MIT.

When your agent uses it

Databases work in your project

Example prompts

“/primary-sidebar”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

Add enum value
Create the management panel module
Export from the management module
Register in PrimarySideBar
Add Activity Bar button

What it can do on your machine

Read from SKILL.md and the folder at commit 3142fe6. 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
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript and vue).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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

Primary Sidebar loads about 2.6k tokens when it runs. Until then it costs about 94 tokens; SKILL.md has 521 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~94
When it runs · the whole SKILL.md, loaded when a task matches: ~2.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 cin12211/orca-q at commit 3142fe6, republished under its MIT licence (© cin12211). 521 words, ~2,554 tokens.

Download SKILL.mdSave it as .claude/skills/primary-sidebar/SKILL.md (or your agent's skills folder).

name: primary-sidebar
description: Complete guide for adding, updating, and removing tabs in the Primary Sidebar of OrcaQ. Covers the full flow — ActivityBarItemType enum → useActivityBarStore → PrimarySideBar component → Management panel component. Load this skill for any task involving the left sidebar, activity bar tabs, or management panels (Explorer, Schemas, ERD, Roles, Export, Agent).

Architecture Overview

The Primary Sidebar is driven by a single active tab value in a Pinia store. The flow is:

ActivityBarItemType (enum)           ← Tab identity
useActivityBarStore.activityActive   ← Which tab is currently active (persisted)
PrimarySideBar.vue                   ← Watches activityActive, renders the matching component
Management***.vue                    ← The actual panel content (KeepAlive'd)

The Activity Bar (the narrow icon strip on the far left) calls setActivityActive(type). The Primary Sidebar reacts to the change and swaps the rendered panel — all panels are wrapped in <KeepAlive> so their state is preserved when the user switches tabs.

File Locations

Purpose	File
Tab type enum + store	`core/stores/useActivityBarStore.ts`
Sidebar shell (switcher)	`components/modules/app-shell/primary-side-bar/components/PrimarySideBar.vue`
Sidebar public API	`components/modules/app-shell/primary-side-bar/index.ts`
All management panels	`components/modules/management/`
Management public API	`components/modules/management/index.ts`
Shared header component	`components/modules/management/shared/components/ManagementSidebarHeader.vue`

Management panel locations

Tab	Panel component file
Explorer	`components/modules/management/explorer/ManagementExplorer.vue`
Schemas	`components/modules/management/schemas/ManagementSchemas.vue`
ERD Diagram	`components/modules/management/erd-diagram/ManagementErdDiagram.vue`
Users & Roles	`components/modules/management/role-permission/ManagementUsersAndPermission.vue`
Export	`components/modules/management/export/ManagementExport.vue`
Agent	`components/modules/management/agent/ManagementAgent.vue`

How the Switcher Works (`PrimarySideBar.vue`)

vue

<script setup lang="ts">
const activityStore = useActivityBarStore();
const current = shallowRef();

watch(
  () => activityStore.activityActive,
  () => {
    if (activityStore.activityActive === ActivityBarItemType.Explorer)
      current.value = ManagementExplorer;
    if (activityStore.activityActive === ActivityBarItemType.Schemas)
      current.value = ManagementSchemas;
    // ... one branch per tab
  },
  { immediate: true }
);
</script>

<template>
  <div class="w-full h-full flex flex-col" v-if="appConfigStore.layoutSize[0]">
    <KeepAlive>
      <component :is="current" />
    </KeepAlive>
  </div>
</template>

Key points:

Uses shallowRef (not ref) for the component — avoids deep reactivity on component objects.
immediate: true so the correct panel is rendered on first mount.
<KeepAlive> preserves scroll position and internal state when switching tabs.
The panel is only mounted when the sidebar is open (layoutSize[0] > 0).

Step 1 — Add enum value

In core/stores/useActivityBarStore.ts:

export enum ActivityBarItemType {
  Explorer = 'Explorer',
  Schemas = 'Schemas',
  ErdDiagram = 'ERDiagram',
  UsersRoles = 'UsersRoles',
  DatabaseExport = 'DatabaseExport',
  Agent = 'Agent',
  MyNewTab = 'MyNewTab', // ← new
}

Step 2 — Create the management panel module

Create the folder components/modules/management/my-new-tab/ with this structure:

my-new-tab/
├── index.ts                    ← exports ManagementMyNewTab
├── ManagementMyNewTab.vue      ← entry component
├── components/                 ← sub-components (optional)
├── hooks/                      ← business logic composables (optional)
└── services/                   ← API calls (optional)

ManagementMyNewTab.vue minimum template:

vue

<script setup lang="ts">
import { ManagementSidebarHeader } from '../shared';
</script>

<template>
  <div class="flex flex-col h-full w-full overflow-y-auto">
    <ManagementSidebarHeader title="My New Tab" />
    <!-- panel content here -->
  </div>
</template>

index.ts:

export { default as ManagementMyNewTab } from './ManagementMyNewTab.vue';

Step 3 — Export from the management module

In components/modules/management/index.ts:

export * from './my-new-tab'; // ← add this line

Step 4 — Register in PrimarySideBar

In components/modules/app-shell/primary-side-bar/components/PrimarySideBar.vue:

// 1. Import the component
import { ManagementMyNewTab } from '#components';

// 2. Add a branch in the watch
watch(
  () => activityStore.activityActive,
  () => {
    // ... existing branches ...
    if (activityStore.activityActive === ActivityBarItemType.MyNewTab)
      current.value = ManagementMyNewTab;
  },
  { immediate: true }
);

Step 5 — Add Activity Bar button

The Activity Bar icon strip that calls setActivityActive is separate from the management module. Find the component that renders the icon list and add a button:

activityStore.setActivityActive(ActivityBarItemType.MyNewTab);

How to Update an Existing Panel

Find the panel in components/modules/management/<tab-name>/Management<Tab>.vue.
Business logic (API calls, state) belongs in a hook under <tab-name>/hooks/.
Static structure (sub-components) belongs in <tab-name>/components/.
Persisted UI state (expanded nodes, scroll position) goes into useActivityBarStore — see schemasExpandedState, schemaCurrentScrollTop as examples.

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

ManagementSidebarHeader — Shared Header Component

All panels use the shared header. Props:

Prop	Type	Default	Purpose
`title`	`string`	required	Panel title text
`showConnection`	`boolean`	`false`	Show ConnectionSelector dropdown
`showSchema`	`boolean`	`false`	Show SchemaSelector dropdown
`workspaceId`	`string`	—	Required when `showConnection` is true
`showSearch`	`boolean`	`false`	Show search input
`searchPlaceholder`	`string`	`'Search...'`	Input placeholder

It also accepts a v-model:search for two-way search binding and an #actions slot for icon buttons in the title bar.

Standard usage:

vue

<ManagementSidebarHeader
  title="My Panel"
  :show-connection="true"
  :workspaceId="workspaceId"
  :show-search="true"
  v-model:search="searchInput"
>
  <template #actions>
    <Button size="iconSm" variant="ghost" @click="onRefresh">
      <Icon name="hugeicons:refresh" class="size-4!" />
    </Button>
  </template>
</ManagementSidebarHeader>

import {
  useActivityBarStore,
  ActivityBarItemType,
} from '~/core/stores/useActivityBarStore';

const activityStore = useActivityBarStore();

// Switch to a tab
activityStore.setActivityActive(ActivityBarItemType.Schemas);

// Read current active tab
const isSchemas = activityStore.activityActive === ActivityBarItemType.Schemas;

The sidebar visibility is controlled by appConfigStore.layoutSize[0]. Use onToggleActivityBarPanel() from useAppConfigStore to open/close it — do NOT manipulate layoutSize directly.

Hook Pattern for Panel Logic

Every non-trivial panel delegates logic to a hook. The hook receives UI callbacks via parameter (avoid importing component refs directly):

// hooks/useMyPanelTree.ts
export function useMyPanelTree(callbacks: {
  focusNode: (id: string) => void;
  collapseAll: () => void;
  expandAll: () => void;
  isExpandedAll: ComputedRef<boolean>;
}) {
  // state, API calls, event handlers
  return {
    treeData,
    searchInput,
    onClickNode,
    // ...
  };
}

Usage in the container:

vue

<script setup lang="ts">
const treePanelRef = useTemplateRef<TreeInstance | null>('treePanelRef');

const { treeData, searchInput, onClickNode } = useMyPanelTree({
  focusNode: id => treePanelRef.value?.focusItem(id),
  collapseAll: () => treePanelRef.value?.collapseAll(),
  expandAll: () => treePanelRef.value?.expandAll(),
  isExpandedAll: computed(() => treePanelRef.value?.isExpandedAll ?? false),
});
</script>

Key Constraints

Never add business logic directly in PrimarySideBar.vue — it is a pure switcher. All logic lives in the management panel or its hooks.
Always use shallowRef for the current component — ref() causes deep reactivity overhead on component objects.
Always wrap the <component :is="current"> in <KeepAlive> — this preserves scroll position and tree expand state when switching tabs.
Persisted tree state (expanded keys, scroll positions) goes into useActivityBarStore, not into local component state.
Imports in PrimarySideBar.vue use #components (Nuxt auto-import barrel) — not direct relative paths.
Each management sub-module must have its own index.ts exporting its root component, and be re-exported from components/modules/management/index.ts.

Files

Just SKILL.md in .claude/skills/primary-sidebar of cin12211/orca-q.

Open the folder on GitHubat commit 3142fe6

Compare with similar skills

Primary Sidebar 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.

Primary Sidebar compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Primary Sidebar this skillcin12211/orca-q	224	—	~2.6k	Automated safety check: Pass	MIT	16 days ago
Ant Design Vue UIlazzyfu/goInsight	730	—	~2k	Automated safety check: Pass	MIT	6 mo ago
Greptimedb Perses DashboardGreptimeTeam/dashboard	111	—	~3.9k	Automated safety check: Pass	Apache-2.0	8 days ago
Abp Pro InfrastructureWangJunZzz/abp-vnext-pro	859	—	~258	Automated safety check: Pass	MIT	1 mo ago
MigrationJaguarJack/catch-admin	935	—	~474	Automated safety check: Pass	Apache-2.0	22 days ago
Alsacreations Guidelinesalsacreations/kiwipedia	338	—	~900	Automated safety check: Pass	None	19 days ago

Similar skills

Ant Design Vue UI
lazzyfu/goInsight
Build, refactor, or review production-grade admin interfaces with Vue 3 + JavaScript + Ant Design Vue 4.x.
730 GitHub stars~2k tokensUpdated 6 mo ago
DatabasesAuto-check passed
Greptimedb Perses Dashboard
GreptimeTeam/dashboard
Generate Perses dashboards or single panels for GreptimeDB. An agent skill from GreptimeTeam/dashboard.
111 GitHub stars~3.9k tokensUpdated 8 days ago
DevOps & CloudAuto-check passed
Abp Pro Infrastructure
WangJunZzz/abp-vnext-pro
本项目的基础设施集成规则。修改 CAP 分布式事件、Hangfire、Redis、SignalR、后台任务、租户传播、事务 Outbox 或 Host 集成时使用。
859 GitHub stars~258 tokensUpdated 1 mo ago
DatabasesAuto-check passed
Migration
JaguarJack/catch-admin
Generate database migration file for CatchAdmin module. An agent skill from JaguarJack/catch-admin.
935 GitHub stars~474 tokensUpdated 22 days ago
DatabasesAuto-check passed
Alsacreations Guidelines
alsacreations/kiwipedia
Guidelines techniques et conventions internes d'Alsacréations (Kiwipedia) — HTML, CSS, JavaScript, TypeScript, Vue.js, WordPress, PHP/MySQL, accessibilité, performance, SEO, RGPD, écoconception…
338 GitHub stars~900 tokensUpdated 19 days ago
DatabasesAuto-check passed
Devinggo Project Init
huagelong/devinggo
DevingGo 项目初始化与本地开发环境配置流程。用于用户询问项目初始化、开发环境搭建、依赖检查、配置文件生成、数据库迁移、本地启动后端/前端/Worker 服务、或希望 AI 大模型一步步把 DevingGo 跑起来时。适用于基于本项目 CLI、Makefile、manifest/config、hack/config、admin-ui 前端工作区的初始化排障与启动验证。
122 GitHub stars~1.1k tokensUpdated 3 mo ago
DatabasesAuto-check: notes

Questions about Primary Sidebar

What does Primary Sidebar do?

Complete guide for adding, updating, and removing tabs in the Primary Sidebar of OrcaQ. Primary Sidebar is an agent skill from cin12211/orca-q. Complete guide for adding, updating, and removing tabs in the Primary Sidebar of OrcaQ.

When should I use Primary Sidebar?

Primary Sidebar fits situations like: databases work in your project.

How do I install Primary Sidebar in Claude Code?

Run `npx skills add cin12211/orca-q --skill primary-sidebar -a claude-code`. Or copy the skill folder (.claude/skills/primary-sidebar in cin12211/orca-q) into .claude/skills/primary-sidebar in your project. Claude Code loads it when a task matches its description.

How do I install Primary Sidebar in Codex?

Run `npx skills add cin12211/orca-q --skill primary-sidebar -a codex`. Or copy the skill folder (.claude/skills/primary-sidebar in cin12211/orca-q) into .agents/skills/primary-sidebar in your project. Codex loads it when a task matches its description.

Can I use Primary Sidebar 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 cin12211/orca-q --skill primary-sidebar -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/primary-sidebar, .gemini/skills/primary-sidebar, .github/skills/primary-sidebar and .opencode/skills/primary-sidebar in your project.

What does Primary Sidebar need to run?

SKILL.md names no scripts, command-line tools or credentials: Primary Sidebar is instructions for the agent only.

Does Primary Sidebar 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 Primary Sidebar 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 Primary Sidebar use?

Primary Sidebar 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 Primary Sidebar use?

About 2.6k tokens (SKILL.md is roughly 10k 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 Primary Sidebar?

Skills that share tags, products or a category with Primary Sidebar: Ant Design Vue UI (lazzyfu/goInsight, 730 stars), Greptimedb Perses Dashboard (GreptimeTeam/dashboard, 111 stars), Abp Pro Infrastructure (WangJunZzz/abp-vnext-pro, 859 stars) and Migration (JaguarJack/catch-admin, 935 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Primary Sidebar?

cin12211 (a GitHub user) maintains it in cin12211/orca-q, which has 224 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on September 21, 2026.

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

Install Primary Sidebar

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

Primary Sidebar Flow — OrcaQ

Architecture Overview

File Locations

Management panel locations

How the Switcher Works (PrimarySideBar.vue)

How to Add a New Sidebar Tab

Step 1 — Add enum value

Step 2 — Create the management panel module

Step 3 — Export from the management module

Step 4 — Register in PrimarySideBar

Step 5 — Add Activity Bar button

How to Update an Existing Panel

ManagementSidebarHeader — Shared Header Component

Controlling the Sidebar Programmatically

Hook Pattern for Panel Logic

Key Constraints

Files

Compare with similar skills

Similar skills

More from cin12211/orca-q

Related

Questions about Primary Sidebar

How the Switcher Works (`PrimarySideBar.vue`)