add built-in Skills selector plugin

Added a builtin plugin that you can open from the chat input plus button menu, which shows you a list of skills that you can directly activate in the current context/project.

Default configs allow users to start over with skills already active, instead of losing time and tokens asking Agent Zero to do it.

Update prompt for manual skill selector

add thumbnail for _skills builtin plugin

plugins/_skills/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

plugins/_skills/README.md

@@ -0,0 +1,24 @@
+# Skills
+
+Skills is a built-in Agent Zero plugin that lets you pin skills into prompt extras for a chosen scope.
+
+## What It Does
+
+- activates selected skills for the current plugin scope
+- injects those skills into prompt extras on every turn
+- supports global and project scoped configurations without agent-profile variants
+- links directly to the built-in Skills list
+- links directly to the active project's Skills section when a project is active
+
+## Why This Exists
+
+Agent Zero already supports loading skills dynamically with `skills_tool`, and already has great built-in skill management surfaces. What it did not have was a lightweight way to make a few skills feel "always on" for a specific scope without modifying the core prompt system.
+
+Skills fills that gap as a bundled built-in plugin.
+
+## Notes
+
+- keep the active list short because every selected skill is injected into prompt extras every turn
+- this plugin enforces the same extras cap as the core `skills_tool`: at most 5 active skills
+- selected skills are stored in normalized `/a0/...` form so configs stay portable across development and Docker-style layouts
+- if a configured skill is not visible in the current agent scope, it is skipped quietly instead of breaking the prompt build

plugins/_skills/__init__.py

@@ -0,0 +1 @@
+# Skill Switchboard community plugin package.

plugins/_skills/api/skills_catalog.py

@@ -0,0 +1,24 @@
+from __future__ import annotations
+
+from helpers.api import ApiHandler, Request, Response
+
+from plugins._skills.helpers.runtime import (
+    get_max_active_skills,
+    list_catalog,
+)
+
+
+class SkillsCatalog(ApiHandler):
+    async def process(self, input: dict, request: Request) -> dict | Response:
+        action = str(input.get("action", "list") or "list").strip().lower()
+
+        if action != "list":
+            return {"ok": False, "error": f"Unknown action: {action}"}
+
+        project_name = str(input.get("project_name", "") or "").strip()
+
+        return {
+            "ok": True,
+            "skills": list_catalog(project_name=project_name),
+            "max_active_skills": get_max_active_skills(),
+        }

plugins/_skills/default_config.yaml

@@ -0,0 +1 @@
+active_skills: []

plugins/_skills/extensions/python/message_loop_prompts_after/_66_include_active_skills.py

@@ -0,0 +1,36 @@
+from __future__ import annotations
+
+from agent import LoopData
+from helpers import plugins, projects
+from helpers.extension import Extension
+
+from plugins._skills.helpers.runtime import PLUGIN_NAME, resolve_active_skills
+
+
+class IncludeActiveSkills(Extension):
+    async def execute(self, loop_data: LoopData = LoopData(), **kwargs):
+        if not self.agent:
+            return
+
+        project_name = projects.get_context_project_name(self.agent.context) or ""
+        config = (
+            plugins.get_plugin_config(
+                PLUGIN_NAME,
+                agent=self.agent,
+                project_name=project_name,
+                agent_profile="",
+            )
+            or {}
+        )
+        active_skills = resolve_active_skills(self.agent, config.get("active_skills"))
+        if not active_skills:
+            return
+
+        content = "\n\n".join(item["content"] for item in active_skills if item.get("content")).strip()
+        if not content:
+            return
+
+        loop_data.extras_persistent["active_skills"] = self.agent.read_prompt(
+            "agent.system.active_skills.md",
+            skills=content,
+        )

plugins/_skills/extensions/webui/initFw_end/skills-menu-injector.js

@@ -0,0 +1,63 @@
+import { store as pluginSettingsStore } from "/components/plugins/plugin-settings-store.js";
+import { store as chatsStore } from "/components/sidebar/chats/chats-store.js";
+import { store as chatInputStore } from "/components/chat/input/input-store.js";
+
+const MENU_SELECTOR = ".chat-bottom-actions-menu";
+const BUTTON_ID = "skills-chat-more-item";
+
+function buildButton() {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "chat-bottom-menu-item";
+  button.id = BUTTON_ID;
+  button.innerHTML = `
+    <span class="material-symbols-outlined" aria-hidden="true">menu_book</span>
+    <span>Skills</span>
+  `;
+
+  button.addEventListener("click", async () => {
+    const projectName = chatsStore.selectedContext?.project?.name || "";
+    chatInputStore.closeChatMoreMenu();
+    await pluginSettingsStore.openConfig("_skills", projectName, "");
+  });
+
+  return button;
+}
+
+function injectButton(menu) {
+  if (!(menu instanceof HTMLElement)) return;
+  if (menu.querySelector(`#${BUTTON_ID}`)) return;
+  menu.appendChild(buildButton());
+}
+
+function scan(root = document) {
+  for (const menu of root.querySelectorAll(MENU_SELECTOR)) {
+    injectButton(menu);
+  }
+}
+
+export default async function initSkillsMenuInjector() {
+  scan();
+
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      for (const node of mutation.addedNodes) {
+        if (!(node instanceof Element)) continue;
+
+        if (node.matches?.(MENU_SELECTOR)) {
+          injectButton(node);
+          continue;
+        }
+
+        if (node.querySelectorAll) {
+          scan(node);
+        }
+      }
+    }
+  });
+
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+  });
+}

plugins/_skills/helpers/__init__.py

@@ -0,0 +1 @@
+# Helpers for the Skill Switchboard plugin.

plugins/_skills/helpers/runtime.py

@@ -0,0 +1,255 @@
+from __future__ import annotations
+
+from pathlib import Path
+from typing import Any, TypedDict
+
+from helpers import files, plugins as plugin_helpers, projects, skills
+
+
+PLUGIN_NAME = "_skills"
+DEFAULT_MAX_ACTIVE_SKILLS = 5
+
+
+class ActiveSkillEntry(TypedDict, total=False):
+    name: str
+    path: str
+
+
+class CatalogSkill(TypedDict):
+    name: str
+    description: str
+    path: str
+    origin: str
+
+
+def get_max_active_skills() -> int:
+    try:
+        from tools.skills_tool import max_loaded_skills
+
+        value = int(max_loaded_skills())
+        return value if value > 0 else DEFAULT_MAX_ACTIVE_SKILLS
+    except Exception:
+        return DEFAULT_MAX_ACTIVE_SKILLS
+
+
+def coerce_config(config: dict[str, Any] | None) -> dict[str, Any]:
+    normalized = dict(config or {})
+    normalized["active_skills"] = normalize_active_skills(normalized.get("active_skills"))
+    return normalized
+
+
+def normalize_active_skills(raw: Any) -> list[ActiveSkillEntry]:
+    if not isinstance(raw, list):
+        return []
+
+    limit = get_max_active_skills()
+    normalized: list[ActiveSkillEntry] = []
+    seen: set[str] = set()
+
+    for item in raw:
+        entry = _normalize_active_skill_entry(item)
+        if not entry:
+            continue
+
+        key = _entry_key(entry)
+        if not key or key in seen:
+            continue
+
+        seen.add(key)
+        normalized.append(entry)
+        if len(normalized) >= limit:
+            break
+
+    return normalized
+
+
+def list_catalog(project_name: str = "") -> list[CatalogSkill]:
+    catalog: list[CatalogSkill] = []
+    seen_paths: set[str] = set()
+
+    for root in _get_catalog_roots(project_name=project_name):
+        root_path = Path(root)
+        for skill_md in skills.discover_skill_md_files(root_path):
+            skill = skills.skill_from_markdown(skill_md, include_content=False)
+            if not skill:
+                continue
+
+            runtime_path = files.normalize_a0_path(str(skill.path))
+            if runtime_path in seen_paths:
+                continue
+
+            seen_paths.add(runtime_path)
+            catalog.append(
+                {
+                    "name": skill.name or skill.path.name,
+                    "description": skill.description or "",
+                    "path": runtime_path,
+                    "origin": classify_origin(runtime_path, project_name=project_name),
+                }
+            )
+
+    catalog.sort(key=lambda item: (item["name"].lower(), item["path"]))
+    return catalog
+
+
+def resolve_active_skills(agent: Any, raw_entries: Any) -> list[dict[str, str]]:
+    visible_roots = [files.fix_dev_path(root) for root in skills.get_skill_roots(agent)]
+    resolved: list[dict[str, str]] = []
+    seen_paths: set[str] = set()
+
+    for entry in normalize_active_skills(raw_entries):
+        skill = _resolve_skill_entry(entry, visible_roots)
+        if not skill:
+            continue
+
+        runtime_path = files.normalize_a0_path(str(skill.path))
+        if runtime_path in seen_paths:
+            continue
+
+        seen_paths.add(runtime_path)
+        resolved.append(
+            {
+                "name": skill.name or skill.path.name,
+                "path": runtime_path,
+                "content": format_skill_for_prompt(skill),
+            }
+        )
+
+    return resolved
+
+
+def format_skill_for_prompt(skill: skills.Skill) -> str:
+    lines = [
+        f"Skill: {skill.name or skill.path.name}",
+        f"Path: {files.normalize_a0_path(str(skill.path))}",
+    ]
+
+    if skill.description:
+        lines.extend(["", "Description:", skill.description.strip()])
+
+    lines.extend(["", "Instructions:", (skill.content or "").strip() or "(empty)"])
+    return "\n".join(lines)
+
+
+def classify_origin(skill_path: str, project_name: str = "") -> str:
+    abs_path = files.fix_dev_path(skill_path)
+
+    if project_name:
+        project_root = projects.get_project_meta(project_name, "skills")
+        if files.exists(project_root) and files.is_in_dir(abs_path, project_root):
+            return "Project"
+
+    user_root = files.get_abs_path("usr", "skills")
+    if files.exists(user_root) and files.is_in_dir(abs_path, user_root):
+        return "User"
+
+    normalized_path = files.normalize_a0_path(abs_path)
+    if "/usr/plugins/" in normalized_path:
+        return "Community plugin"
+    if "/plugins/" in normalized_path:
+        return "Built-in plugin"
+    return "Built-in"
+
+
+def _entry_key(entry: ActiveSkillEntry) -> str:
+    return str(entry.get("path") or entry.get("name") or "").strip().lower()
+
+
+def _normalize_active_skill_entry(item: Any) -> ActiveSkillEntry | None:
+    if isinstance(item, str):
+        stripped = item.strip()
+        if not stripped:
+            return None
+        if "/" in stripped:
+            return {"path": _normalize_skill_path(stripped)}
+        return {"name": stripped}
+
+    if not isinstance(item, dict):
+        return None
+
+    name = str(item.get("name") or "").strip()
+    path = str(item.get("path") or "").strip()
+
+    if path:
+        path = _normalize_skill_path(path)
+    if not (path or name):
+        return None
+
+    entry: ActiveSkillEntry = {}
+    if name:
+        entry["name"] = name
+    if path:
+        entry["path"] = path
+    return entry
+
+
+def _normalize_skill_path(path: str) -> str:
+    fixed = path.strip().replace("\\", "/")
+    if fixed.startswith("/a0/"):
+        return fixed.rstrip("/")
+    if fixed.startswith("/"):
+        return files.normalize_a0_path(fixed).rstrip("/")
+    return files.normalize_a0_path(files.get_abs_path(fixed)).rstrip("/")
+
+
+def _get_catalog_roots(project_name: str = "") -> list[str]:
+    roots: list[str] = []
+    seen: set[str] = set()
+
+    def add(path: str) -> None:
+        if not path:
+            return
+        fixed = files.fix_dev_path(path)
+        if not files.exists(fixed) or fixed in seen:
+            return
+        seen.add(fixed)
+        roots.append(fixed)
+
+    if project_name:
+        add(projects.get_project_meta(project_name, "skills"))
+
+    add(files.get_abs_path("usr", "skills"))
+    for path in plugin_helpers.get_enabled_plugin_paths(None, "skills"):
+        add(path)
+    add(files.get_abs_path("skills"))
+
+    return roots
+
+
+def _resolve_skill_entry(entry: ActiveSkillEntry, visible_roots: list[str]) -> skills.Skill | None:
+    skill_path = str(entry.get("path") or "").strip()
+    if skill_path:
+        skill = _load_skill_from_path(skill_path, visible_roots)
+        if skill:
+            return skill
+
+    skill_name = str(entry.get("name") or "").strip()
+    if not skill_name:
+        return None
+
+    target = skill_name.lower().strip()
+    for root in visible_roots:
+        for skill_md in skills.discover_skill_md_files(Path(root)):
+            skill = skills.skill_from_markdown(skill_md, include_content=True)
+            if not skill:
+                continue
+            candidates = {
+                (skill.name or "").strip().lower(),
+                skill.path.name.strip().lower(),
+            }
+            if target in candidates:
+                return skill
+
+    return None
+
+
+def _load_skill_from_path(skill_path: str, visible_roots: list[str]) -> skills.Skill | None:
+    abs_path = files.fix_dev_path(skill_path)
+    if not any(files.is_in_dir(abs_path, root) for root in visible_roots):
+        return None
+
+    skill_md = Path(abs_path) / "SKILL.md"
+    if not skill_md.is_file():
+        return None
+
+    return skills.skill_from_markdown(skill_md, include_content=True)

plugins/_skills/hooks.py

@@ -0,0 +1,11 @@
+from __future__ import annotations
+
+from plugins._skills.helpers.runtime import coerce_config
+
+
+def get_plugin_config(default=None, **kwargs):
+    return coerce_config(default)
+
+
+def save_plugin_config(settings=None, **kwargs):
+    return coerce_config(settings)

plugins/_skills/plugin.yaml

@@ -0,0 +1,9 @@
+name: _skills
+title: Skills
+description: Pin skills into prompt extras on every turn.
+version: 1.0.0
+always_enabled: true
+settings_sections:
+  - agent
+per_project_config: true
+per_agent_config: false

plugins/_skills/prompts/agent.system.active_skills.md

@@ -0,0 +1,5 @@
+## active skills
+The following skills were manually activated by the User.
+Treat them as already loaded instructions and follow them when relevant.
+
+{{skills}}

plugins/_skills/webui/config-store.js

@@ -0,0 +1,271 @@
+import * as API from "/js/api.js";
+import { store as settingsStore } from "/components/settings/settings-store.js";
+import { store as chatsStore } from "/components/sidebar/chats/chats-store.js";
+import { store as projectsStore } from "/components/projects/projects-store.js";
+import {
+  toastFrontendError,
+  toastFrontendInfo,
+} from "/components/notifications/notification-store.js";
+
+const CATALOG_API = "/plugins/_skills/skills_catalog";
+const MAX_ACTIVE_SKILLS_FALLBACK = 5;
+
+function normalizeEntry(entry) {
+  if (!entry) return null;
+  if (typeof entry === "string") {
+    const trimmed = entry.trim();
+    if (!trimmed) return null;
+    return trimmed.includes("/")
+      ? { path: trimmed.replace(/\/+$/, "") }
+      : { name: trimmed };
+  }
+
+  if (typeof entry !== "object") return null;
+  const name = String(entry.name || "").trim();
+  const path = String(entry.path || "").trim().replace(/\/+$/, "");
+  if (!name && !path) return null;
+  return {
+    ...(name ? { name } : {}),
+    ...(path ? { path } : {}),
+  };
+}
+
+function entryKey(entry) {
+  if (!entry) return "";
+  return String(entry.path || entry.name || "").trim().toLowerCase();
+}
+
+function ensureConfig(config) {
+  if (!config || typeof config !== "object") return;
+  const activeSkills = Array.isArray(config.active_skills) ? config.active_skills : [];
+  const normalized = [];
+  const seen = new Set();
+
+  for (const item of activeSkills) {
+    const entry = normalizeEntry(item);
+    const key = entryKey(entry);
+    if (!entry || !key || seen.has(key)) continue;
+    seen.add(key);
+    normalized.push(entry);
+  }
+
+  config.active_skills = normalized;
+}
+
+window.createSkillsConfigModel = (context, config) => ({
+  loadingCatalog: false,
+  catalog: [],
+  search: "",
+  maxActiveSkills: MAX_ACTIVE_SKILLS_FALLBACK,
+
+  initDefaults() {
+    ensureConfig(config);
+  },
+
+  get activeEntries() {
+    ensureConfig(config);
+    return config.active_skills;
+  },
+
+  get selectedCount() {
+    return this.activeEntries.length;
+  },
+
+  get selectedCountLabel() {
+    return `${this.selectedCount} / ${this.maxActiveSkills}`;
+  },
+
+  get limitDescription() {
+    return `Max in extras: ${this.maxActiveSkills}`;
+  },
+
+  get activeProject() {
+    return chatsStore.selectedContext?.project || null;
+  },
+
+  get scopeSummary() {
+    if (context.projectName) {
+      return `Project: ${context.projectLabel(context.projectName)}`;
+    }
+    return "Project: Global";
+  },
+
+  get catalogMap() {
+    const byKey = new Map();
+    for (const skill of this.catalog) {
+      byKey.set(entryKey(skill), skill);
+      if (skill.name) {
+        byKey.set(String(skill.name).trim().toLowerCase(), skill);
+      }
+    }
+    return byKey;
+  },
+
+  get filteredCatalog() {
+    const query = this.search.trim().toLowerCase();
+    if (!query) return this.catalog;
+
+    return this.catalog.filter((skill) => {
+      const haystack = [
+        skill.name,
+        skill.description,
+        skill.path,
+        skill.origin,
+      ]
+        .filter(Boolean)
+        .join(" ")
+        .toLowerCase();
+      return haystack.includes(query);
+    });
+  },
+
+  entryKey(entry) {
+    return entryKey(entry);
+  },
+
+  isSelected(skill) {
+    return this.activeEntries.some((entry) => entryKey(entry) === entryKey(skill));
+  },
+
+  isCheckboxDisabled(skill) {
+    return !this.isSelected(skill) && this.selectedCount >= this.maxActiveSkills;
+  },
+
+  isEntryMissing(entry) {
+    const key = entryKey(entry);
+    if (!key) return false;
+    if (this.catalogMap.has(key)) return false;
+    if (entry.name && this.catalogMap.has(String(entry.name).trim().toLowerCase())) return false;
+    return true;
+  },
+
+  labelForEntry(entry) {
+    const skill = this._resolveEntry(entry);
+    if (skill?.name) return skill.name;
+    return entry?.name || "(unnamed skill)";
+  },
+
+  secondaryLabelForEntry(entry) {
+    const skill = this._resolveEntry(entry);
+    if (skill) {
+      return `${skill.origin} | ${skill.path}`;
+    }
+    if (entry?.path) return `Not visible in the current catalog | ${entry.path}`;
+    return "Not visible in the current catalog";
+  },
+
+  _resolveEntry(entry) {
+    const key = entryKey(entry);
+    if (key && this.catalogMap.has(key)) {
+      return this.catalogMap.get(key);
+    }
+    const name = String(entry?.name || "").trim().toLowerCase();
+    return name ? this.catalogMap.get(name) || null : null;
+  },
+
+  toggleSkill(skill, selected) {
+    ensureConfig(config);
+    const key = entryKey(skill);
+    const nextEntries = this.activeEntries.filter((entry) => entryKey(entry) !== key);
+
+    if (selected) {
+      if (this.selectedCount >= this.maxActiveSkills) {
+        void toastFrontendInfo(
+          `You can activate at most ${this.maxActiveSkills} skills in extras.`,
+          "Skills"
+        );
+        return;
+      }
+
+      nextEntries.push({
+        name: String(skill.name || "").trim(),
+        path: String(skill.path || "").trim(),
+      });
+    }
+
+    config.active_skills = nextEntries;
+  },
+
+  removeEntry(entry) {
+    ensureConfig(config);
+    const key = entryKey(entry);
+    config.active_skills = this.activeEntries.filter((item) => entryKey(item) !== key);
+  },
+
+  clearSelections() {
+    ensureConfig(config);
+    config.active_skills = [];
+  },
+
+  async loadCatalog() {
+    this.loadingCatalog = true;
+    try {
+      const response = await API.callJsonApi(CATALOG_API, {
+        action: "list",
+        project_name: context.projectName || "",
+      });
+
+      if (!response?.ok) {
+        throw new Error(response?.error || "Failed to load skills catalog");
+      }
+
+      this.catalog = Array.isArray(response.skills) ? response.skills : [];
+      this.maxActiveSkills = Number(response.max_active_skills) || MAX_ACTIVE_SKILLS_FALLBACK;
+    } catch (error) {
+      this.catalog = [];
+      this.maxActiveSkills = MAX_ACTIVE_SKILLS_FALLBACK;
+      await toastFrontendError(error?.message || "Failed to load skills catalog", "Skills");
+    } finally {
+      this.loadingCatalog = false;
+    }
+  },
+
+  async navigateAway(callback) {
+    if (context.hasUnsavedChanges && !context.confirmDiscardUnsavedChanges()) {
+      return;
+    }
+
+    await window.closeModal?.();
+    await callback();
+  },
+
+  async openSettingsSkills() {
+    await this.navigateAway(async () => {
+      await settingsStore.open("skills");
+    });
+  },
+
+  async openActiveProjectSkills() {
+    const projectName = this.activeProject?.name;
+    if (!projectName) {
+      await toastFrontendInfo("No active project is selected in the current chat.", "Skills");
+      return;
+    }
+
+    await this.navigateAway(async () => {
+      await projectsStore.openEditModal(projectName);
+      this.scrollProjectSkillsSection();
+    });
+  },
+
+  scrollProjectSkillsSection(attempt = 0) {
+    const headers = Array.from(
+      document.querySelectorAll(".project-detail-header .projects-project-card-title")
+    );
+    const target = headers.find(
+      (header) => header.textContent?.trim().toLowerCase() === "skills"
+    );
+    const section = target?.closest(".project-detail");
+
+    if (section) {
+      section.scrollIntoView({ behavior: "smooth", block: "start" });
+      return;
+    }
+
+    if (attempt < 12) {
+      window.setTimeout(() => this.scrollProjectSkillsSection(attempt + 1), 120);
+    }
+  },
+});
+
+export {};

plugins/_skills/webui/config.html

@@ -0,0 +1,333 @@
+<html>
+<head>
+  <title>Skills</title>
+  <script type="module" src="/plugins/_skills/webui/config-store.js"></script>
+</head>
+<body>
+  <div
+    x-data="createSkillsConfigModel(context, config)"
+    x-init="
+      initDefaults();
+      await loadCatalog();
+      $watch('context.projectName', async () => { await loadCatalog(); });
+    "
+  >
+    <div class="ssb-layout">
+      <div class="section-title">Skills</div>
+      <div class="section-description">
+        Pin skills for the selected project scope. Every active skill is injected into prompt extras on each turn, so keep this list lean and intentional.
+      </div>
+
+      <div class="ssb-link-row">
+        <button type="button" class="button" @click="openSettingsSkills()">
+          <span class="icon material-symbols-outlined">menu_book</span>
+          Open Skills List
+        </button>
+        <button
+          type="button"
+          class="button"
+          x-show="activeProject"
+          @click="openActiveProjectSkills()"
+        >
+          <span class="icon material-symbols-outlined">snippet_folder</span>
+          Open Active Project Skills
+        </button>
+      </div>
+
+      <div class="ssb-summary-grid">
+        <div class="ssb-summary-card">
+          <span class="ssb-summary-label">Selected scope</span>
+          <strong x-text="scopeSummary"></strong>
+        </div>
+        <div class="ssb-summary-card">
+          <span class="ssb-summary-label">Active skills</span>
+          <strong x-text="selectedCountLabel"></strong>
+        </div>
+        <div class="ssb-summary-card" x-show="activeProject">
+          <span class="ssb-summary-label">Current chat project</span>
+          <strong x-text="activeProject?.title || activeProject?.name || ''"></strong>
+        </div>
+      </div>
+
+      <div class="ssb-controls">
+        <label class="ssb-search">
+          <span class="material-symbols-outlined">search</span>
+          <input
+            type="text"
+            x-model.trim="search"
+            placeholder="Filter skills by name, description, path, or origin"
+          >
+        </label>
+
+        <div class="ssb-control-actions">
+          <button type="button" class="button" @click="loadCatalog()" :disabled="loadingCatalog">
+            <span class="icon material-symbols-outlined">refresh</span>
+            Refresh
+          </button>
+          <button type="button" class="button cancel" @click="clearSelections()" :disabled="selectedCount === 0">
+            <span class="icon material-symbols-outlined">ink_eraser</span>
+            Clear
+          </button>
+        </div>
+      </div>
+
+      <div class="ssb-panel" x-show="activeEntries.length > 0">
+        <div class="ssb-panel-title">Selected for this scope</div>
+        <div class="ssb-selected-list">
+          <template x-for="entry in activeEntries" :key="entryKey(entry)">
+            <div class="ssb-selected-card" :class="{ 'is-missing': isEntryMissing(entry) }">
+              <div class="ssb-selected-copy">
+                <div class="ssb-selected-title" x-text="labelForEntry(entry)"></div>
+                <div class="ssb-selected-meta" x-text="secondaryLabelForEntry(entry)"></div>
+              </div>
+              <button type="button" class="button cancel icon-button" title="Remove" @click="removeEntry(entry)">
+                <span class="icon material-symbols-outlined">close</span>
+              </button>
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <div class="ssb-panel">
+        <div class="ssb-panel-title">Available skills</div>
+        <div class="ssb-panel-subtitle">
+          The catalog below resolves for the currently selected plugin scope. Changing the project selector above refreshes the available set.
+        </div>
+        <div class="ssb-panel-subtitle" x-text="limitDescription"></div>
+
+        <div class="ssb-loading" x-show="loadingCatalog">
+          <span class="material-symbols-outlined spinning">progress_activity</span>
+          <span>Loading skills catalog...</span>
+        </div>
+
+        <template x-if="!loadingCatalog && filteredCatalog.length === 0">
+          <div class="ssb-empty">No skills matched the current scope or filter.</div>
+        </template>
+
+        <div class="ssb-skill-list">
+          <template x-for="skill in filteredCatalog" :key="skill.path">
+            <label class="ssb-skill-card">
+              <div class="ssb-skill-main">
+                <input
+                  type="checkbox"
+                  :checked="isSelected(skill)"
+                  :disabled="isCheckboxDisabled(skill)"
+                  @change="toggleSkill(skill, $event.target.checked)"
+                >
+                <div class="ssb-skill-copy">
+                  <div class="ssb-skill-header">
+                    <div class="ssb-skill-title" x-text="skill.name || '(unnamed skill)'"></div>
+                    <span class="ssb-origin-pill" x-text="skill.origin"></span>
+                  </div>
+                  <div class="ssb-skill-description" x-text="skill.description || 'No description provided.'"></div>
+                  <code class="ssb-skill-path" x-text="skill.path"></code>
+                </div>
+              </div>
+            </label>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <style>
+    .ssb-layout {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .ssb-link-row {
+      display: flex;
+      gap: 0.75rem;
+      flex-wrap: wrap;
+    }
+
+    .ssb-summary-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+      gap: 0.75rem;
+    }
+
+    .ssb-summary-card,
+    .ssb-panel {
+      border: 1px solid var(--color-border);
+      border-radius: 0.75rem;
+      background: var(--color-bg-secondary);
+      padding: 0.9rem 1rem;
+    }
+
+    .ssb-summary-card {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+
+    .ssb-summary-label,
+    .ssb-panel-subtitle,
+    .ssb-selected-meta,
+    .ssb-skill-description,
+    .ssb-skill-path {
+      color: var(--color-text-secondary);
+      font-size: var(--font-size-small);
+    }
+
+    .ssb-controls {
+      display: flex;
+      gap: 0.75rem;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+
+    .ssb-search {
+      flex: 1 1 18rem;
+      min-width: 14rem;
+      display: flex;
+      align-items: center;
+      gap: 0.65rem;
+      border: 1px solid var(--color-border);
+      border-radius: 999px;
+      background: var(--color-bg-primary);
+      padding: 0.55rem 0.85rem;
+    }
+
+    .ssb-search input {
+      width: 100%;
+      border: none;
+      background: transparent;
+      outline: none;
+    }
+
+    .ssb-control-actions {
+      display: flex;
+      gap: 0.5rem;
+      flex-wrap: wrap;
+      margin-left: auto;
+    }
+
+    .ssb-panel-title {
+      font-weight: 700;
+      margin-bottom: 0.3rem;
+    }
+
+    .ssb-selected-list,
+    .ssb-skill-list {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+      margin-top: 0.75rem;
+    }
+
+    .ssb-selected-card,
+    .ssb-skill-card {
+      border: 1px solid var(--color-border);
+      border-radius: 0.75rem;
+      background: var(--color-bg-primary);
+    }
+
+    .ssb-selected-card {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.75rem;
+      padding: 0.8rem 0.9rem;
+    }
+
+    .ssb-selected-card.is-missing {
+      border-style: dashed;
+    }
+
+    .ssb-selected-copy {
+      min-width: 0;
+    }
+
+    .ssb-selected-title {
+      font-weight: 600;
+      word-break: break-word;
+    }
+
+    .ssb-skill-card {
+      padding: 0.9rem;
+      cursor: pointer;
+    }
+
+    .ssb-skill-main {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.9rem;
+    }
+
+    .ssb-skill-copy {
+      min-width: 0;
+      flex: 1 1 auto;
+      display: flex;
+      flex-direction: column;
+      gap: 0.35rem;
+    }
+
+    .ssb-skill-header {
+      display: flex;
+      gap: 0.75rem;
+      justify-content: space-between;
+      align-items: flex-start;
+      flex-wrap: wrap;
+    }
+
+    .ssb-skill-title {
+      font-weight: 600;
+      font-size: 1rem;
+    }
+
+    .ssb-origin-pill {
+      display: inline-flex;
+      align-items: center;
+      border-radius: 999px;
+      padding: 0.15rem 0.55rem;
+      background: var(--color-bg-tertiary);
+      color: var(--color-text-secondary);
+      font-size: 0.78rem;
+      white-space: nowrap;
+    }
+
+    .ssb-skill-path {
+      white-space: pre-wrap;
+      word-break: break-word;
+      overflow-wrap: anywhere;
+    }
+
+    .ssb-empty,
+    .ssb-loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.6rem;
+      margin-top: 0.75rem;
+      padding: 1rem;
+      border: 1px dashed var(--color-border);
+      border-radius: 0.75rem;
+      color: var(--color-text-secondary);
+      text-align: center;
+    }
+
+    .spinning {
+      animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+
+    @media (max-width: 640px) {
+      .ssb-control-actions {
+        margin-left: 0;
+        width: 100%;
+      }
+
+      .ssb-control-actions .button {
+        flex: 1 1 0;
+      }
+    }
+  </style>
+</body>
+</html>