From bb87b785f483042802cc3248ea4c4e0e51eac9a7 Mon Sep 17 00:00:00 2001
From: AlphaCat <jinghao_chen@msn.com>
Date: Mon, 20 Jul 2026 22:43:31 +0800
Subject: [PATCH 1/3] =?UTF-8?q?fix(skills-hub):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E6=82=AC=E5=81=9C=E6=B8=B2=E6=9F=93=E4=BC=AA?=
 =?UTF-8?q?=E5=BD=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

移除已安装与商店技能卡片的 backdrop-blur-xl，避免 WebView2 在 hover transform 时产生过期背景采样条纹。
保留卡片背景、边框、阴影、位移与入场动画，并同步 GUI 与 Gateway Web。
---
 .../web/src/pages/skills-hub/SkillsHubPage.tsx              | 6 +++---
 crates/agent-gui/src/pages/skills-hub/SkillsHubPage.tsx     | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/crates/agent-gateway/web/src/pages/skills-hub/SkillsHubPage.tsx b/crates/agent-gateway/web/src/pages/skills-hub/SkillsHubPage.tsx
index 1f09cf2c4..afc84b86a 100644
--- a/crates/agent-gateway/web/src/pages/skills-hub/SkillsHubPage.tsx
+++ b/crates/agent-gateway/web/src/pages/skills-hub/SkillsHubPage.tsx
@@ -1924,7 +1924,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                                         openInstalledSkillPreview(skill);
                                       }}
                                       className={cn(
-                                        "hub-skill-card skill-card-enter group flex h-full w-full cursor-pointer flex-col rounded-2xl border border-border/50 bg-background/75 p-3.5 text-left backdrop-blur-xl shadow-[0_1px_0_rgba(255,255,255,0.55)_inset,0_4px_18px_-12px_rgba(15,23,42,0.16)] transition-all hover:-translate-y-0.5 hover:border-border/60 hover:bg-background/85 hover:shadow-[0_4px_16px_-10px_rgba(15,23,42,0.18)] dark:border-white/[0.08] dark:bg-white/[0.05] dark:shadow-[0_1px_0_rgba(255,255,255,0.05)_inset,0_4px_18px_-12px_rgba(0,0,0,0.5)] dark:hover:border-white/[0.12] dark:hover:bg-white/[0.07] dark:hover:shadow-[0_4px_16px_-10px_rgba(0,0,0,0.55)] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground/15",
+                                        "hub-skill-card skill-card-enter group flex h-full w-full cursor-pointer flex-col rounded-2xl border border-border/50 bg-background/75 p-3.5 text-left shadow-[0_1px_0_rgba(255,255,255,0.55)_inset,0_4px_18px_-12px_rgba(15,23,42,0.16)] transition-all hover:-translate-y-0.5 hover:border-border/60 hover:bg-background/85 hover:shadow-[0_4px_16px_-10px_rgba(15,23,42,0.18)] dark:border-white/[0.08] dark:bg-white/[0.05] dark:shadow-[0_1px_0_rgba(255,255,255,0.05)_inset,0_4px_18px_-12px_rgba(0,0,0,0.5)] dark:hover:border-white/[0.12] dark:hover:bg-white/[0.07] dark:hover:shadow-[0_4px_16px_-10px_rgba(0,0,0,0.55)] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground/15",
                                         bulkMode ? "cursor-default hover:translate-y-0" : null,
                                       )}
                                     >
@@ -1971,7 +1971,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                                     }}
                                     className={cn(
                                       "hub-skill-card skill-card-enter group relative flex h-full w-full flex-col rounded-2xl border p-3.5 text-left transition-all",
-                                      "cursor-pointer backdrop-blur-xl focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground/15",
+                                      "cursor-pointer focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground/15",
                                       checked
                                         ? "border-emerald-500/35 bg-emerald-50/90 shadow-[0_1px_0_rgba(255,255,255,0.55)_inset,0_4px_14px_-12px_rgba(16,185,129,0.28)] dark:border-emerald-400/30 dark:bg-emerald-500/12 dark:shadow-[0_1px_0_rgba(255,255,255,0.05)_inset,0_4px_14px_-12px_rgba(16,185,129,0.22)]"
                                         : "border-border/40 bg-muted/45 text-muted-foreground shadow-none hover:-translate-y-0.5 hover:border-border/55 hover:bg-muted/55 dark:border-white/[0.06] dark:bg-white/[0.025] dark:hover:border-white/[0.10] dark:hover:bg-white/[0.04]",
@@ -3174,7 +3174,7 @@ function SkillsStoreView(props: {
                       }
                     }}
                     className={cn(
-                      "skill-card-enter group flex h-full cursor-pointer flex-col rounded-2xl border p-3.5 text-left backdrop-blur-xl transition-all focus:outline-none focus:ring-2 focus:ring-foreground/10",
+                      "skill-card-enter group flex h-full cursor-pointer flex-col rounded-2xl border p-3.5 text-left transition-all focus:outline-none focus:ring-2 focus:ring-foreground/10",
                       done
                         ? "border-border/55 bg-background/80 shadow-[0_1px_0_rgba(255,255,255,0.6)_inset,0_4px_18px_-12px_rgba(15,23,42,0.18)] dark:border-white/[0.10] dark:bg-white/[0.07] dark:shadow-[0_1px_0_rgba(255,255,255,0.07)_inset,0_4px_18px_-12px_rgba(0,0,0,0.55)]"
                         : "border-border/40 bg-background/60 hover:-translate-y-0.5 hover:border-border/55 hover:bg-background/75 hover:shadow-[0_4px_16px_-10px_rgba(15,23,42,0.18)] dark:border-white/[0.05] dark:bg-white/[0.03] dark:hover:border-white/[0.10] dark:hover:bg-white/[0.06] dark:hover:shadow-[0_4px_16px_-10px_rgba(0,0,0,0.55)]",
diff --git a/crates/agent-gui/src/pages/skills-hub/SkillsHubPage.tsx b/crates/agent-gui/src/pages/skills-hub/SkillsHubPage.tsx
index 1df791ae3..1d76f8ede 100644
--- a/crates/agent-gui/src/pages/skills-hub/SkillsHubPage.tsx
+++ b/crates/agent-gui/src/pages/skills-hub/SkillsHubPage.tsx
@@ -2029,7 +2029,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                                       openInstalledSkillPreview(skill);
                                     }}
                                     className={cn(
-                                      "hub-skill-card skill-card-enter group flex h-full w-full cursor-pointer flex-col rounded-2xl border border-border/50 bg-background/75 p-3.5 text-left backdrop-blur-xl shadow-[0_1px_0_rgba(255,255,255,0.55)_inset,0_4px_18px_-12px_rgba(15,23,42,0.16)] transition-all hover:-translate-y-0.5 hover:border-border/60 hover:bg-background/85 hover:shadow-[0_4px_16px_-10px_rgba(15,23,42,0.18)] dark:border-white/[0.08] dark:bg-white/[0.05] dark:shadow-[0_1px_0_rgba(255,255,255,0.05)_inset,0_4px_18px_-12px_rgba(0,0,0,0.5)] dark:hover:border-white/[0.12] dark:hover:bg-white/[0.07] dark:hover:shadow-[0_4px_16px_-10px_rgba(0,0,0,0.55)] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground/15",
+                                      "hub-skill-card skill-card-enter group flex h-full w-full cursor-pointer flex-col rounded-2xl border border-border/50 bg-background/75 p-3.5 text-left shadow-[0_1px_0_rgba(255,255,255,0.55)_inset,0_4px_18px_-12px_rgba(15,23,42,0.16)] transition-all hover:-translate-y-0.5 hover:border-border/60 hover:bg-background/85 hover:shadow-[0_4px_16px_-10px_rgba(15,23,42,0.18)] dark:border-white/[0.08] dark:bg-white/[0.05] dark:shadow-[0_1px_0_rgba(255,255,255,0.05)_inset,0_4px_18px_-12px_rgba(0,0,0,0.5)] dark:hover:border-white/[0.12] dark:hover:bg-white/[0.07] dark:hover:shadow-[0_4px_16px_-10px_rgba(0,0,0,0.55)] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground/15",
                                       bulkMode ? "cursor-default hover:translate-y-0" : null,
                                     )}
                                   >
@@ -2074,7 +2074,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                                   }}
                                   className={cn(
                                     "hub-skill-card skill-card-enter group relative flex h-full w-full flex-col rounded-2xl border p-3.5 text-left transition-all",
-                                    "cursor-pointer backdrop-blur-xl focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground/15",
+                                    "cursor-pointer focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground/15",
                                     // Enabled style always visible; bulk selection overlays primary ring.
                                     checked
                                       ? "border-emerald-500/35 bg-emerald-50/90 shadow-[0_1px_0_rgba(255,255,255,0.55)_inset,0_4px_14px_-12px_rgba(16,185,129,0.28)] dark:border-emerald-400/30 dark:bg-emerald-500/12 dark:shadow-[0_1px_0_rgba(255,255,255,0.05)_inset,0_4px_14px_-12px_rgba(16,185,129,0.22)]"
@@ -3408,7 +3408,7 @@ function SkillsStoreView(props: {
                       }
                     }}
                     className={cn(
-                      "skill-card-enter group flex h-full cursor-pointer flex-col rounded-2xl border p-3.5 text-left backdrop-blur-xl transition-all focus:outline-none focus:ring-2 focus:ring-foreground/10",
+                      "skill-card-enter group flex h-full cursor-pointer flex-col rounded-2xl border p-3.5 text-left transition-all focus:outline-none focus:ring-2 focus:ring-foreground/10",
                       done
                         ? "border-border/55 bg-background/80 shadow-[0_1px_0_rgba(255,255,255,0.6)_inset,0_4px_18px_-12px_rgba(15,23,42,0.18)] dark:border-white/[0.10] dark:bg-white/[0.07] dark:shadow-[0_1px_0_rgba(255,255,255,0.07)_inset,0_4px_18px_-12px_rgba(0,0,0,0.55)]"
                         : "border-border/40 bg-background/60 hover:-translate-y-0.5 hover:border-border/55 hover:bg-background/75 hover:shadow-[0_4px_16px_-10px_rgba(15,23,42,0.18)] dark:border-white/[0.05] dark:bg-white/[0.03] dark:hover:border-white/[0.10] dark:hover:bg-white/[0.06] dark:hover:shadow-[0_4px_16px_-10px_rgba(0,0,0,0.55)]",

From 5237b04b97096c17290af12ab3ec85eeb63f91c9 Mon Sep 17 00:00:00 2001
From: AlphaCat <jinghao_chen@msn.com>
Date: Tue, 21 Jul 2026 02:48:50 +0800
Subject: [PATCH 2/3] =?UTF-8?q?style(skills-hub):=20=E7=A7=BB=E9=99=A4?=
 =?UTF-8?q?=E5=86=97=E4=BD=99=E6=B8=B2=E6=9F=93=E7=89=87=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/src/pages/skills-hub/SkillsHubPage.tsx              | 6 ++----
 crates/agent-gui/src/pages/skills-hub/SkillsHubPage.tsx     | 6 ++----
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/crates/agent-gateway/web/src/pages/skills-hub/SkillsHubPage.tsx b/crates/agent-gateway/web/src/pages/skills-hub/SkillsHubPage.tsx
index afc84b86a..f65044f93 100644
--- a/crates/agent-gateway/web/src/pages/skills-hub/SkillsHubPage.tsx
+++ b/crates/agent-gateway/web/src/pages/skills-hub/SkillsHubPage.tsx
@@ -1607,8 +1607,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                   </GlassPanel>
                 </div>
               ) : (
-                <>
-                  {view === "installed" ? (
+                view === "installed" ? (
                     <div
                       className={cn(
                         "h-full min-h-0 overflow-y-auto px-0.5 pr-1 pt-1.5",
@@ -2040,8 +2039,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                       onRescan={() => void rescanExternalSkills()}
                       onImport={() => void importSelectedExternalSkills()}
                     />
-                  )}
-                </>
+                  )
               )}
             </div>
           </div>
diff --git a/crates/agent-gui/src/pages/skills-hub/SkillsHubPage.tsx b/crates/agent-gui/src/pages/skills-hub/SkillsHubPage.tsx
index 1d76f8ede..bb177c8bf 100644
--- a/crates/agent-gui/src/pages/skills-hub/SkillsHubPage.tsx
+++ b/crates/agent-gui/src/pages/skills-hub/SkillsHubPage.tsx
@@ -1694,8 +1694,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                   </GlassPanel>
                 </div>
               ) : (
-                <>
-                  {view === "installed" ? (
+                view === "installed" ? (
                     <div
                       className={cn(
                         "h-full min-h-0 overflow-y-auto px-0.5 pr-1 pt-1.5",
@@ -2147,8 +2146,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                       onRescan={() => void rescanExternalSkills()}
                       onImport={() => void importSelectedExternalSkills()}
                     />
-                  )}
-                </>
+                  )
               )}
             </div>
           </div>

From 3d7a0cfcbd1bb21381622144c63800b6eb321e06 Mon Sep 17 00:00:00 2001
From: AlphaCat <jinghao_chen@msn.com>
Date: Tue, 21 Jul 2026 03:03:44 +0800
Subject: [PATCH 3/3] =?UTF-8?q?style(skills-hub):=20=E5=AF=B9=E9=BD=90?=
 =?UTF-8?q?=E6=9D=A1=E4=BB=B6=E6=B8=B2=E6=9F=93=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/skills-hub/SkillsHubPage.tsx    | 794 +++++++++--------
 .../src/pages/skills-hub/SkillsHubPage.tsx    | 833 +++++++++---------
 2 files changed, 807 insertions(+), 820 deletions(-)

diff --git a/crates/agent-gateway/web/src/pages/skills-hub/SkillsHubPage.tsx b/crates/agent-gateway/web/src/pages/skills-hub/SkillsHubPage.tsx
index f65044f93..ce17272c3 100644
--- a/crates/agent-gateway/web/src/pages/skills-hub/SkillsHubPage.tsx
+++ b/crates/agent-gateway/web/src/pages/skills-hub/SkillsHubPage.tsx
@@ -1606,440 +1606,432 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                     </div>
                   </GlassPanel>
                 </div>
-              ) : (
-                view === "installed" ? (
-                    <div
-                      className={cn(
-                        "h-full min-h-0 overflow-y-auto px-0.5 pr-1 pt-1.5",
-                        bulkMode ? "pb-24" : "pb-4",
-                      )}
-                    >
-                      <div className="flex flex-col gap-5">
-                        {loadError ? (
-                          <GlassPanel tone="error" className="hub-panel-enter">
-                            <div className="flex items-center gap-2">
-                              <AlertTriangle className="h-4 w-4 shrink-0 text-destructive" />
-                              <span className="text-xs text-destructive">{loadError}</span>
-                            </div>
-                          </GlassPanel>
-                        ) : null}
+              ) : view === "installed" ? (
+                <div
+                  className={cn(
+                    "h-full min-h-0 overflow-y-auto px-0.5 pr-1 pt-1.5",
+                    bulkMode ? "pb-24" : "pb-4",
+                  )}
+                >
+                  <div className="flex flex-col gap-5">
+                    {loadError ? (
+                      <GlassPanel tone="error" className="hub-panel-enter">
+                        <div className="flex items-center gap-2">
+                          <AlertTriangle className="h-4 w-4 shrink-0 text-destructive" />
+                          <span className="text-xs text-destructive">{loadError}</span>
+                        </div>
+                      </GlassPanel>
+                    ) : null}
 
-                        {!skillsEnabled ? (
-                          <GlassPanel tone="muted" className="hub-panel-enter">
-                            <div className="flex items-center gap-2">
-                              <BookOpen className="h-4 w-4 shrink-0 text-muted-foreground" />
-                              <span className="text-xs text-muted-foreground">
-                                {t("settings.skillsDisabledHint")}
-                              </span>
-                            </div>
-                          </GlassPanel>
-                        ) : null}
+                    {!skillsEnabled ? (
+                      <GlassPanel tone="muted" className="hub-panel-enter">
+                        <div className="flex items-center gap-2">
+                          <BookOpen className="h-4 w-4 shrink-0 text-muted-foreground" />
+                          <span className="text-xs text-muted-foreground">
+                            {t("settings.skillsDisabledHint")}
+                          </span>
+                        </div>
+                      </GlassPanel>
+                    ) : null}
 
-                        {!loading && skills.length === 0 && !loadError ? (
-                          <GlassPanel className="hub-panel-enter">
-                            <div className="flex flex-col items-center gap-3 py-8 text-center">
-                              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-muted/60">
-                                <BookOpen className="h-5 w-5 text-muted-foreground" />
+                    {!loading && skills.length === 0 && !loadError ? (
+                      <GlassPanel className="hub-panel-enter">
+                        <div className="flex flex-col items-center gap-3 py-8 text-center">
+                          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-muted/60">
+                            <BookOpen className="h-5 w-5 text-muted-foreground" />
+                          </div>
+                          <div className="space-y-1">
+                            <p className="text-sm font-medium text-muted-foreground">
+                              {t("settings.skillsNotFound")}
+                            </p>
+                            <p className="text-xs text-muted-foreground/70">
+                              {t("settings.skillsNotFoundHint")}
+                            </p>
+                          </div>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            className="mt-1 gap-1.5 rounded-full"
+                            onClick={() => void refresh()}
+                          >
+                            <RefreshCw className="h-3.5 w-3.5" />
+                            {t("settings.skillsRescan")}
+                          </Button>
+                        </div>
+                      </GlassPanel>
+                    ) : null}
+
+                    {loading && skills.length === 0 ? (
+                      <>
+                        <div className="hub-frost-hero hub-panel-enter px-4 py-3.5">
+                          <div className="flex items-center gap-3.5">
+                            <FrostSpinner />
+                            <div className="min-w-0 flex-1">
+                              <div className="text-[13px] font-medium tracking-tight text-foreground">
+                                {t("settings.skillsScanning")}
                               </div>
-                              <div className="space-y-1">
-                                <p className="text-sm font-medium text-muted-foreground">
-                                  {t("settings.skillsNotFound")}
-                                </p>
-                                <p className="text-xs text-muted-foreground/70">
-                                  {t("settings.skillsNotFoundHint")}
-                                </p>
+                              <div className="mt-0.5 truncate text-[11px] text-muted-foreground/80">
+                                {t("settings.skillsHubScanning")}
                               </div>
-                              <Button
-                                variant="outline"
-                                size="sm"
-                                className="mt-1 gap-1.5 rounded-full"
-                                onClick={() => void refresh()}
-                              >
-                                <RefreshCw className="h-3.5 w-3.5" />
-                                {t("settings.skillsRescan")}
-                              </Button>
                             </div>
-                          </GlassPanel>
-                        ) : null}
+                          </div>
+                          <div className="hub-frost-track mt-3.5" />
+                        </div>
 
-                        {loading && skills.length === 0 ? (
-                          <>
-                            <div className="hub-frost-hero hub-panel-enter px-4 py-3.5">
-                              <div className="flex items-center gap-3.5">
-                                <FrostSpinner />
-                                <div className="min-w-0 flex-1">
-                                  <div className="text-[13px] font-medium tracking-tight text-foreground">
-                                    {t("settings.skillsScanning")}
-                                  </div>
-                                  <div className="mt-0.5 truncate text-[11px] text-muted-foreground/80">
-                                    {t("settings.skillsHubScanning")}
-                                  </div>
+                        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                          {[1, 2, 3, 4, 5, 6].map((item) => (
+                            <div key={item} className="hub-frost-skeleton skill-card-enter p-3.5">
+                              <div className="flex items-center gap-3">
+                                <div className="skills-skeleton-shimmer h-9 w-9 shrink-0 rounded-lg" />
+                                <div className="flex-1 space-y-2">
+                                  <div className="skills-skeleton-shimmer h-3.5 w-28 rounded" />
+                                  <div className="skills-skeleton-shimmer h-3 w-full max-w-[12rem] rounded" />
                                 </div>
                               </div>
-                              <div className="hub-frost-track mt-3.5" />
                             </div>
+                          ))}
+                        </div>
+                      </>
+                    ) : null}
 
-                            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-                              {[1, 2, 3, 4, 5, 6].map((item) => (
-                                <div
-                                  key={item}
-                                  className="hub-frost-skeleton skill-card-enter p-3.5"
-                                >
-                                  <div className="flex items-center gap-3">
-                                    <div className="skills-skeleton-shimmer h-9 w-9 shrink-0 rounded-lg" />
-                                    <div className="flex-1 space-y-2">
-                                      <div className="skills-skeleton-shimmer h-3.5 w-28 rounded" />
-                                      <div className="skills-skeleton-shimmer h-3 w-full max-w-[12rem] rounded" />
-                                    </div>
-                                  </div>
-                                </div>
-                              ))}
-                            </div>
-                          </>
+                    {filtered.length > 0 ? (
+                      <div className="flex flex-col gap-3">
+                        {bulkMode ? (
+                          <div className="hub-panel-enter flex items-center gap-2 text-[11px] text-muted-foreground/80">
+                            <ListChecks className="h-3.5 w-3.5 shrink-0" />
+                            <span>{t("settings.skillsBulkHint")}</span>
+                          </div>
                         ) : null}
+                        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                          {filtered.map((skill) => {
+                            const alwaysEnabled = isAlwaysEnabledSkillName(skill.name);
+                            const checked = alwaysEnabled || selected.has(skill.name);
+                            const bulkSelected = bulkSelection.has(skill.name);
+                            const deleting = deletingSkillName === skill.name;
+                            const deleteDisabled = deletingSkillName !== null;
+                            const card = (
+                              <>
+                                <div className="flex items-start justify-between gap-2">
+                                  <div
+                                    className={cn(
+                                      "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border transition-all",
+                                      checked
+                                        ? "border-border/55 bg-background/80 text-foreground/85 shadow-[0_1px_0_rgba(255,255,255,0.55)_inset] dark:border-white/[0.09] dark:bg-white/[0.06] dark:shadow-[0_1px_0_rgba(255,255,255,0.06)_inset]"
+                                        : "border-border/30 bg-muted/50 text-muted-foreground group-hover:border-border/50 group-hover:bg-background/70 group-hover:text-foreground/85",
+                                    )}
+                                  >
+                                    <SkillIcon className="h-6 w-6" />
+                                  </div>
 
-                        {filtered.length > 0 ? (
-                          <div className="flex flex-col gap-3">
-                            {bulkMode ? (
-                              <div className="hub-panel-enter flex items-center gap-2 text-[11px] text-muted-foreground/80">
-                                <ListChecks className="h-3.5 w-3.5 shrink-0" />
-                                <span>{t("settings.skillsBulkHint")}</span>
-                              </div>
-                            ) : null}
-                            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-                              {filtered.map((skill) => {
-                                const alwaysEnabled = isAlwaysEnabledSkillName(skill.name);
-                                const checked = alwaysEnabled || selected.has(skill.name);
-                                const bulkSelected = bulkSelection.has(skill.name);
-                                const deleting = deletingSkillName === skill.name;
-                                const deleteDisabled = deletingSkillName !== null;
-                                const card = (
-                                  <>
-                                    <div className="flex items-start justify-between gap-2">
+                                  {alwaysEnabled && !bulkMode ? (
+                                    <div
+                                      className="inline-flex shrink-0 items-center gap-1 rounded-full bg-foreground/[0.06] px-2 py-0.5 text-[10px] font-medium text-foreground/75 ring-1 ring-border/45"
+                                      title={t("settings.skillsAlwaysOn")}
+                                    >
+                                      <Lock className="h-2.5 w-2.5" />
+                                      <span>{t("settings.skillsAlwaysOn")}</span>
+                                    </div>
+                                  ) : bulkMode ? (
+                                    alwaysEnabled ? (
                                       <div
-                                        className={cn(
-                                          "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border transition-all",
-                                          checked
-                                            ? "border-border/55 bg-background/80 text-foreground/85 shadow-[0_1px_0_rgba(255,255,255,0.55)_inset] dark:border-white/[0.09] dark:bg-white/[0.06] dark:shadow-[0_1px_0_rgba(255,255,255,0.06)_inset]"
-                                            : "border-border/30 bg-muted/50 text-muted-foreground group-hover:border-border/50 group-hover:bg-background/70 group-hover:text-foreground/85",
-                                        )}
+                                        className="flex shrink-0 items-center"
+                                        title={t("settings.skillsBulkAlwaysOnDisabled")}
                                       >
-                                        <SkillIcon className="h-6 w-6" />
-                                      </div>
-
-                                      {alwaysEnabled && !bulkMode ? (
-                                        <div
-                                          className="inline-flex shrink-0 items-center gap-1 rounded-full bg-foreground/[0.06] px-2 py-0.5 text-[10px] font-medium text-foreground/75 ring-1 ring-border/45"
-                                          title={t("settings.skillsAlwaysOn")}
+                                        <span
+                                          aria-hidden="true"
+                                          className="pointer-events-none flex h-5 w-5 items-center justify-center rounded-full border border-border/50 bg-muted/40 text-muted-foreground/50 opacity-60"
                                         >
                                           <Lock className="h-2.5 w-2.5" />
-                                          <span>{t("settings.skillsAlwaysOn")}</span>
-                                        </div>
-                                      ) : bulkMode ? (
-                                        alwaysEnabled ? (
-                                          <div
-                                            className="flex shrink-0 items-center"
-                                            title={t("settings.skillsBulkAlwaysOnDisabled")}
-                                          >
-                                            <span
-                                              aria-hidden="true"
-                                              className="pointer-events-none flex h-5 w-5 items-center justify-center rounded-full border border-border/50 bg-muted/40 text-muted-foreground/50 opacity-60"
-                                            >
-                                              <Lock className="h-2.5 w-2.5" />
-                                            </span>
-                                          </div>
-                                        ) : (
-                                          <div
-                                            className="flex shrink-0 items-center"
-                                            onClick={(event) => event.stopPropagation()}
-                                            onKeyDown={(event) => event.stopPropagation()}
-                                          >
-                                            <label
-                                              className="relative flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center"
-                                              title={t("settings.skillsHubBulkSelectLabel")}
-                                            >
-                                              <input
-                                                type="checkbox"
-                                                checked={bulkSelection.has(skill.name)}
-                                                aria-label={`${t("settings.skillsHubBulkSelectLabel")}: ${skill.name}`}
-                                                onClick={(event) => event.stopPropagation()}
-                                                onChange={(event) => {
-                                                  event.stopPropagation();
-                                                  toggleBulkSelectionName(skill.name);
-                                                }}
-                                                className="peer sr-only"
-                                              />
-                                              <span
-                                                aria-hidden="true"
-                                                className={cn(
-                                                  "pointer-events-none flex h-5 w-5 items-center justify-center rounded-full border transition-all",
-                                                  bulkSelection.has(skill.name)
-                                                    ? "border-primary bg-primary text-primary-foreground"
-                                                    : "border-border bg-background group-hover:border-foreground/40",
-                                                )}
-                                              >
-                                                {bulkSelection.has(skill.name) ? (
-                                                  <Check className="h-3 w-3" />
-                                                ) : null}
-                                              </span>
-                                            </label>
-                                          </div>
-                                        )
-                                      ) : (
-                                        <div
-                                          className="flex shrink-0 items-center gap-1.5"
-                                          onClick={(event) => event.stopPropagation()}
-                                          onKeyDown={(event) => event.stopPropagation()}
+                                        </span>
+                                      </div>
+                                    ) : (
+                                      <div
+                                        className="flex shrink-0 items-center"
+                                        onClick={(event) => event.stopPropagation()}
+                                        onKeyDown={(event) => event.stopPropagation()}
+                                      >
+                                        <label
+                                          className="relative flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center"
+                                          title={t("settings.skillsHubBulkSelectLabel")}
                                         >
-                                          <button
-                                            type="button"
+                                          <input
+                                            type="checkbox"
+                                            checked={bulkSelection.has(skill.name)}
                                             aria-label={`${t("settings.skillsHubBulkSelectLabel")}: ${skill.name}`}
-                                            title={t("settings.skillsHubBulkSelect")}
-                                            onClick={(event) => {
+                                            onClick={(event) => event.stopPropagation()}
+                                            onChange={(event) => {
                                               event.stopPropagation();
-                                              enterBulkMode(skill.name);
+                                              toggleBulkSelectionName(skill.name);
                                             }}
+                                            className="peer sr-only"
+                                          />
+                                          <span
+                                            aria-hidden="true"
                                             className={cn(
-                                              // Google Photos-style bulk entry: hover-faint, touch semi-visible.
-                                              "relative flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-border/60 bg-background/90 text-muted-foreground shadow-sm transition-all hover:border-primary/50 hover:text-foreground",
-                                              "opacity-0 group-hover:opacity-100 focus-visible:opacity-100 [@media(hover:none)]:opacity-70",
+                                              "pointer-events-none flex h-5 w-5 items-center justify-center rounded-full border transition-all",
+                                              bulkSelection.has(skill.name)
+                                                ? "border-primary bg-primary text-primary-foreground"
+                                                : "border-border bg-background group-hover:border-foreground/40",
                                             )}
                                           >
-                                            <span className="h-2 w-2 rounded-full border border-current opacity-40" />
-                                          </button>
+                                            {bulkSelection.has(skill.name) ? (
+                                              <Check className="h-3 w-3" />
+                                            ) : null}
+                                          </span>
+                                        </label>
+                                      </div>
+                                    )
+                                  ) : (
+                                    <div
+                                      className="flex shrink-0 items-center gap-1.5"
+                                      onClick={(event) => event.stopPropagation()}
+                                      onKeyDown={(event) => event.stopPropagation()}
+                                    >
+                                      <button
+                                        type="button"
+                                        aria-label={`${t("settings.skillsHubBulkSelectLabel")}: ${skill.name}`}
+                                        title={t("settings.skillsHubBulkSelect")}
+                                        onClick={(event) => {
+                                          event.stopPropagation();
+                                          enterBulkMode(skill.name);
+                                        }}
+                                        className={cn(
+                                          // Google Photos-style bulk entry: hover-faint, touch semi-visible.
+                                          "relative flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-border/60 bg-background/90 text-muted-foreground shadow-sm transition-all hover:border-primary/50 hover:text-foreground",
+                                          "opacity-0 group-hover:opacity-100 focus-visible:opacity-100 [@media(hover:none)]:opacity-70",
+                                        )}
+                                      >
+                                        <span className="h-2 w-2 rounded-full border border-current opacity-40" />
+                                      </button>
+                                      <button
+                                        type="button"
+                                        role="switch"
+                                        aria-checked={checked}
+                                        aria-label={`${t("skills.select")}: ${skill.name}`}
+                                        title={
+                                          checked
+                                            ? t("settings.skillsHubToggleDisable")
+                                            : t("settings.skillsHubToggleEnable")
+                                        }
+                                        onClick={(event) => {
+                                          event.stopPropagation();
+                                          toggleSkill(skill.name, !checked);
+                                        }}
+                                        className={cn(
+                                          "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full ring-1 transition-all",
+                                          checked
+                                            ? "bg-emerald-500 ring-emerald-400/45"
+                                            : "bg-muted-foreground/25 ring-border/40",
+                                        )}
+                                      >
+                                        <span
+                                          className={cn(
+                                            "pointer-events-none inline-block h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-transform",
+                                            checked
+                                              ? "translate-x-[1.05rem]"
+                                              : "translate-x-[0.15rem]",
+                                          )}
+                                        />
+                                      </button>
+                                    </div>
+                                  )}
+                                </div>
+
+                                <div className="mt-2.5 min-w-0 flex-1">
+                                  <div className="flex min-w-0 items-center gap-1.5">
+                                    <div className="truncate text-[13px] font-semibold leading-tight text-foreground">
+                                      {skill.name}
+                                    </div>
+                                    {checked ? (
+                                      <span className="inline-flex shrink-0 items-center rounded-full bg-emerald-500/12 px-1.5 py-0.5 text-[10px] font-medium text-emerald-700 ring-1 ring-emerald-500/25 dark:bg-emerald-400/12 dark:text-emerald-300 dark:ring-emerald-400/25">
+                                        {t("settings.skillsHubEnabledBadge")}
+                                      </span>
+                                    ) : null}
+                                  </div>
+                                  {skill.description ? (
+                                    <p className="mt-1 line-clamp-2 text-[11.5px] leading-[1.4] text-muted-foreground">
+                                      {skill.description}
+                                    </p>
+                                  ) : null}
+                                </div>
+
+                                <div className="mt-2.5 flex min-h-8 items-center gap-1 border-t border-border/30 pt-2 text-[10.5px] text-muted-foreground/70">
+                                  <FileText className="h-3 w-3 shrink-0" />
+                                  <span className="truncate">{skill.skillFile}</span>
+                                  {!alwaysEnabled && !bulkMode ? (
+                                    <div
+                                      className="ml-auto shrink-0"
+                                      onClick={(event) => event.stopPropagation()}
+                                      onKeyDown={(event) => event.stopPropagation()}
+                                    >
+                                      <ConfirmDeletePopover
+                                        name={skill.name}
+                                        onConfirm={() => void deleteSkill(skill)}
+                                      >
+                                        {(open) => (
                                           <button
                                             type="button"
-                                            role="switch"
-                                            aria-checked={checked}
-                                            aria-label={`${t("skills.select")}: ${skill.name}`}
-                                            title={
-                                              checked
-                                                ? t("settings.skillsHubToggleDisable")
-                                                : t("settings.skillsHubToggleEnable")
-                                            }
+                                            disabled={deleteDisabled}
                                             onClick={(event) => {
                                               event.stopPropagation();
-                                              toggleSkill(skill.name, !checked);
+                                              open();
                                             }}
                                             className={cn(
-                                              "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full ring-1 transition-all",
-                                              checked
-                                                ? "bg-emerald-500 ring-emerald-400/45"
-                                                : "bg-muted-foreground/25 ring-border/40",
+                                              "flex h-6 w-6 items-center justify-center rounded-md border border-border/35 bg-background/65 text-muted-foreground transition-all",
+                                              "hover:border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+                                              "disabled:cursor-not-allowed",
+                                              // Hover-revealed on pointer devices; keyboard focus and
+                                              // touch (no hover — webui mobile) keep it reachable.
+                                              deleting
+                                                ? "pointer-events-auto opacity-100"
+                                                : cn(
+                                                    "pointer-events-none opacity-0 group-hover:pointer-events-auto focus-visible:pointer-events-auto [@media(hover:none)]:pointer-events-auto",
+                                                    deleteDisabled
+                                                      ? "group-hover:opacity-60 focus-visible:opacity-60 [@media(hover:none)]:opacity-60"
+                                                      : "group-hover:opacity-100 focus-visible:opacity-100 [@media(hover:none)]:opacity-100",
+                                                  ),
                                             )}
+                                            title={t("settings.skillsHubDeleteSkill")}
                                           >
-                                            <span
-                                              className={cn(
-                                                "pointer-events-none inline-block h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-transform",
-                                                checked
-                                                  ? "translate-x-[1.05rem]"
-                                                  : "translate-x-[0.15rem]",
-                                              )}
-                                            />
-                                          </button>
-                                        </div>
-                                      )}
-                                    </div>
-
-                                    <div className="mt-2.5 min-w-0 flex-1">
-                                      <div className="flex min-w-0 items-center gap-1.5">
-                                        <div className="truncate text-[13px] font-semibold leading-tight text-foreground">
-                                          {skill.name}
-                                        </div>
-                                        {checked ? (
-                                          <span className="inline-flex shrink-0 items-center rounded-full bg-emerald-500/12 px-1.5 py-0.5 text-[10px] font-medium text-emerald-700 ring-1 ring-emerald-500/25 dark:bg-emerald-400/12 dark:text-emerald-300 dark:ring-emerald-400/25">
-                                            {t("settings.skillsHubEnabledBadge")}
-                                          </span>
-                                        ) : null}
-                                      </div>
-                                      {skill.description ? (
-                                        <p className="mt-1 line-clamp-2 text-[11.5px] leading-[1.4] text-muted-foreground">
-                                          {skill.description}
-                                        </p>
-                                      ) : null}
-                                    </div>
-
-                                    <div className="mt-2.5 flex min-h-8 items-center gap-1 border-t border-border/30 pt-2 text-[10.5px] text-muted-foreground/70">
-                                      <FileText className="h-3 w-3 shrink-0" />
-                                      <span className="truncate">{skill.skillFile}</span>
-                                      {!alwaysEnabled && !bulkMode ? (
-                                        <div
-                                          className="ml-auto shrink-0"
-                                          onClick={(event) => event.stopPropagation()}
-                                          onKeyDown={(event) => event.stopPropagation()}
-                                        >
-                                          <ConfirmDeletePopover
-                                            name={skill.name}
-                                            onConfirm={() => void deleteSkill(skill)}
-                                          >
-                                            {(open) => (
-                                              <button
-                                                type="button"
-                                                disabled={deleteDisabled}
-                                                onClick={(event) => {
-                                                  event.stopPropagation();
-                                                  open();
-                                                }}
-                                                className={cn(
-                                                  "flex h-6 w-6 items-center justify-center rounded-md border border-border/35 bg-background/65 text-muted-foreground transition-all",
-                                                  "hover:border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
-                                                  "disabled:cursor-not-allowed",
-                                                  // Hover-revealed on pointer devices; keyboard focus and
-                                                  // touch (no hover — webui mobile) keep it reachable.
-                                                  deleting
-                                                    ? "pointer-events-auto opacity-100"
-                                                    : cn(
-                                                        "pointer-events-none opacity-0 group-hover:pointer-events-auto focus-visible:pointer-events-auto [@media(hover:none)]:pointer-events-auto",
-                                                        deleteDisabled
-                                                          ? "group-hover:opacity-60 focus-visible:opacity-60 [@media(hover:none)]:opacity-60"
-                                                          : "group-hover:opacity-100 focus-visible:opacity-100 [@media(hover:none)]:opacity-100",
-                                                      ),
-                                                )}
-                                                title={t("settings.skillsHubDeleteSkill")}
-                                              >
-                                                {deleting ? (
-                                                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
-                                                ) : (
-                                                  <Trash2 className="h-3.5 w-3.5" />
-                                                )}
-                                              </button>
+                                            {deleting ? (
+                                              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                                            ) : (
+                                              <Trash2 className="h-3.5 w-3.5" />
                                             )}
-                                          </ConfirmDeletePopover>
-                                        </div>
-                                      ) : null}
+                                          </button>
+                                        )}
+                                      </ConfirmDeletePopover>
                                     </div>
-                                  </>
-                                );
-
-                                const key = `${skill.name}-${rootDir}`;
-                                if (alwaysEnabled) {
-                                  return (
-                                    <button
-                                      key={key}
-                                      type="button"
-                                      aria-label={`${t("settings.skillsInstalledPreviewOpen")}: ${skill.name}`}
-                                      onClick={() => {
-                                        if (bulkMode) return;
-                                        openInstalledSkillPreview(skill);
-                                      }}
-                                      className={cn(
-                                        "hub-skill-card skill-card-enter group flex h-full w-full cursor-pointer flex-col rounded-2xl border border-border/50 bg-background/75 p-3.5 text-left shadow-[0_1px_0_rgba(255,255,255,0.55)_inset,0_4px_18px_-12px_rgba(15,23,42,0.16)] transition-all hover:-translate-y-0.5 hover:border-border/60 hover:bg-background/85 hover:shadow-[0_4px_16px_-10px_rgba(15,23,42,0.18)] dark:border-white/[0.08] dark:bg-white/[0.05] dark:shadow-[0_1px_0_rgba(255,255,255,0.05)_inset,0_4px_18px_-12px_rgba(0,0,0,0.5)] dark:hover:border-white/[0.12] dark:hover:bg-white/[0.07] dark:hover:shadow-[0_4px_16px_-10px_rgba(0,0,0,0.55)] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground/15",
-                                        bulkMode ? "cursor-default hover:translate-y-0" : null,
-                                      )}
-                                    >
-                                      {card}
-                                    </button>
-                                  );
-                                }
+                                  ) : null}
+                                </div>
+                              </>
+                            );
 
-                                return (
-                                  // biome-ignore lint/a11y/useSemanticElements: The card contains nested controls and cannot be a native button.
-                                  <div
-                                    key={key}
-                                    role="button"
-                                    tabIndex={0}
-                                    aria-label={`${t("settings.skillsInstalledPreviewOpen")}: ${skill.name}`}
-                                    onClick={(event) => {
-                                      if (bulkMode) {
-                                        handleBulkInstalledCardClick(
-                                          skill.name,
-                                          filtered.map((item) => item.name),
-                                          event.shiftKey,
-                                        );
-                                        return;
-                                      }
-                                      openInstalledSkillPreview(skill);
-                                    }}
-                                    onMouseDown={(event) => {
-                                      if (bulkMode && event.shiftKey) event.preventDefault();
-                                    }}
-                                    onKeyDown={(event) => {
-                                      if (
-                                        bulkMode &&
-                                        (event.key === "Enter" || event.key === " ")
-                                      ) {
-                                        event.preventDefault();
-                                        handleBulkInstalledCardClick(
-                                          skill.name,
-                                          filtered.map((item) => item.name),
-                                          event.shiftKey,
-                                        );
-                                        return;
-                                      }
-                                      handleInstalledSkillCardKeyDown(event, skill);
-                                    }}
-                                    className={cn(
-                                      "hub-skill-card skill-card-enter group relative flex h-full w-full flex-col rounded-2xl border p-3.5 text-left transition-all",
-                                      "cursor-pointer focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground/15",
-                                      checked
-                                        ? "border-emerald-500/35 bg-emerald-50/90 shadow-[0_1px_0_rgba(255,255,255,0.55)_inset,0_4px_14px_-12px_rgba(16,185,129,0.28)] dark:border-emerald-400/30 dark:bg-emerald-500/12 dark:shadow-[0_1px_0_rgba(255,255,255,0.05)_inset,0_4px_14px_-12px_rgba(16,185,129,0.22)]"
-                                        : "border-border/40 bg-muted/45 text-muted-foreground shadow-none hover:-translate-y-0.5 hover:border-border/55 hover:bg-muted/55 dark:border-white/[0.06] dark:bg-white/[0.025] dark:hover:border-white/[0.10] dark:hover:bg-white/[0.04]",
-                                      bulkSelected
-                                        ? "ring-2 ring-primary/50 ring-offset-1 ring-offset-background"
-                                        : null,
-                                    )}
-                                  >
-                                    {card}
-                                  </div>
-                                );
-                              })}
-                            </div>
-                          </div>
-                        ) : null}
+                            const key = `${skill.name}-${rootDir}`;
+                            if (alwaysEnabled) {
+                              return (
+                                <button
+                                  key={key}
+                                  type="button"
+                                  aria-label={`${t("settings.skillsInstalledPreviewOpen")}: ${skill.name}`}
+                                  onClick={() => {
+                                    if (bulkMode) return;
+                                    openInstalledSkillPreview(skill);
+                                  }}
+                                  className={cn(
+                                    "hub-skill-card skill-card-enter group flex h-full w-full cursor-pointer flex-col rounded-2xl border border-border/50 bg-background/75 p-3.5 text-left shadow-[0_1px_0_rgba(255,255,255,0.55)_inset,0_4px_18px_-12px_rgba(15,23,42,0.16)] transition-all hover:-translate-y-0.5 hover:border-border/60 hover:bg-background/85 hover:shadow-[0_4px_16px_-10px_rgba(15,23,42,0.18)] dark:border-white/[0.08] dark:bg-white/[0.05] dark:shadow-[0_1px_0_rgba(255,255,255,0.05)_inset,0_4px_18px_-12px_rgba(0,0,0,0.5)] dark:hover:border-white/[0.12] dark:hover:bg-white/[0.07] dark:hover:shadow-[0_4px_16px_-10px_rgba(0,0,0,0.55)] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground/15",
+                                    bulkMode ? "cursor-default hover:translate-y-0" : null,
+                                  )}
+                                >
+                                  {card}
+                                </button>
+                              );
+                            }
 
-                        {filter.trim() && filtered.length === 0 && skills.length > 0 ? (
-                          <GlassPanel tone="muted" className="hub-panel-enter">
-                            <p className="py-2 text-center text-sm text-muted-foreground">
-                              {t("settings.skillsNoMatch").replace("{filter}", filter)}
-                            </p>
-                          </GlassPanel>
-                        ) : null}
+                            return (
+                              // biome-ignore lint/a11y/useSemanticElements: The card contains nested controls and cannot be a native button.
+                              <div
+                                key={key}
+                                role="button"
+                                tabIndex={0}
+                                aria-label={`${t("settings.skillsInstalledPreviewOpen")}: ${skill.name}`}
+                                onClick={(event) => {
+                                  if (bulkMode) {
+                                    handleBulkInstalledCardClick(
+                                      skill.name,
+                                      filtered.map((item) => item.name),
+                                      event.shiftKey,
+                                    );
+                                    return;
+                                  }
+                                  openInstalledSkillPreview(skill);
+                                }}
+                                onMouseDown={(event) => {
+                                  if (bulkMode && event.shiftKey) event.preventDefault();
+                                }}
+                                onKeyDown={(event) => {
+                                  if (bulkMode && (event.key === "Enter" || event.key === " ")) {
+                                    event.preventDefault();
+                                    handleBulkInstalledCardClick(
+                                      skill.name,
+                                      filtered.map((item) => item.name),
+                                      event.shiftKey,
+                                    );
+                                    return;
+                                  }
+                                  handleInstalledSkillCardKeyDown(event, skill);
+                                }}
+                                className={cn(
+                                  "hub-skill-card skill-card-enter group relative flex h-full w-full flex-col rounded-2xl border p-3.5 text-left transition-all",
+                                  "cursor-pointer focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground/15",
+                                  checked
+                                    ? "border-emerald-500/35 bg-emerald-50/90 shadow-[0_1px_0_rgba(255,255,255,0.55)_inset,0_4px_14px_-12px_rgba(16,185,129,0.28)] dark:border-emerald-400/30 dark:bg-emerald-500/12 dark:shadow-[0_1px_0_rgba(255,255,255,0.05)_inset,0_4px_14px_-12px_rgba(16,185,129,0.22)]"
+                                    : "border-border/40 bg-muted/45 text-muted-foreground shadow-none hover:-translate-y-0.5 hover:border-border/55 hover:bg-muted/55 dark:border-white/[0.06] dark:bg-white/[0.025] dark:hover:border-white/[0.10] dark:hover:bg-white/[0.04]",
+                                  bulkSelected
+                                    ? "ring-2 ring-primary/50 ring-offset-1 ring-offset-background"
+                                    : null,
+                                )}
+                              >
+                                {card}
+                              </div>
+                            );
+                          })}
+                        </div>
                       </div>
-                    </div>
-                  ) : view === "store" ? (
-                    <SkillsStoreView
-                      items={storeItems}
-                      query={storeQuery}
-                      sort={storeSort}
-                      loading={storeLoading}
-                      loadingMore={storeLoadingMore}
-                      error={storeError}
-                      cursor={storeCursor}
-                      installedKeys={installedStoreKeys}
-                      installedSlugs={installedStoreSlugs}
-                      pendingInstallKeys={pendingInstallKeys}
-                      installingByStoreKey={installingByStoreKey}
-                      installJobs={installJobs}
-                      onSortChange={setStoreSort}
-                      onLoadMore={() => void loadMoreStore()}
-                      onInstall={(skill) => void installStoreSkill(skill)}
-                    />
-                  ) : (
-                    <SkillsImportView
-                      scans={externalScans ?? []}
-                      loading={externalLoading}
-                      error={externalError}
-                      query={importQuery}
-                      selected={selectedExternal}
-                      installedNames={installedSkillNames}
-                      importProgress={importProgress}
-                      importErrors={importErrors}
-                      importedCount={importedCount}
-                      importToast={importToast}
-                      onDismissImportToast={() => {
-                        if (importToastTimerRef.current !== null) {
-                          window.clearTimeout(importToastTimerRef.current);
-                          importToastTimerRef.current = null;
-                        }
-                        setImportToast(null);
-                      }}
-                      bulkMode={bulkMode}
-                      onToggle={toggleExternalSkill}
-                      onBatchToggle={setExternalSkillsSelected}
-                      onRescan={() => void rescanExternalSkills()}
-                      onImport={() => void importSelectedExternalSkills()}
-                    />
-                  )
+                    ) : null}
+
+                    {filter.trim() && filtered.length === 0 && skills.length > 0 ? (
+                      <GlassPanel tone="muted" className="hub-panel-enter">
+                        <p className="py-2 text-center text-sm text-muted-foreground">
+                          {t("settings.skillsNoMatch").replace("{filter}", filter)}
+                        </p>
+                      </GlassPanel>
+                    ) : null}
+                  </div>
+                </div>
+              ) : view === "store" ? (
+                <SkillsStoreView
+                  items={storeItems}
+                  query={storeQuery}
+                  sort={storeSort}
+                  loading={storeLoading}
+                  loadingMore={storeLoadingMore}
+                  error={storeError}
+                  cursor={storeCursor}
+                  installedKeys={installedStoreKeys}
+                  installedSlugs={installedStoreSlugs}
+                  pendingInstallKeys={pendingInstallKeys}
+                  installingByStoreKey={installingByStoreKey}
+                  installJobs={installJobs}
+                  onSortChange={setStoreSort}
+                  onLoadMore={() => void loadMoreStore()}
+                  onInstall={(skill) => void installStoreSkill(skill)}
+                />
+              ) : (
+                <SkillsImportView
+                  scans={externalScans ?? []}
+                  loading={externalLoading}
+                  error={externalError}
+                  query={importQuery}
+                  selected={selectedExternal}
+                  installedNames={installedSkillNames}
+                  importProgress={importProgress}
+                  importErrors={importErrors}
+                  importedCount={importedCount}
+                  importToast={importToast}
+                  onDismissImportToast={() => {
+                    if (importToastTimerRef.current !== null) {
+                      window.clearTimeout(importToastTimerRef.current);
+                      importToastTimerRef.current = null;
+                    }
+                    setImportToast(null);
+                  }}
+                  bulkMode={bulkMode}
+                  onToggle={toggleExternalSkill}
+                  onBatchToggle={setExternalSkillsSelected}
+                  onRescan={() => void rescanExternalSkills()}
+                  onImport={() => void importSelectedExternalSkills()}
+                />
               )}
             </div>
           </div>
@@ -2059,9 +2051,9 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
       ) : null}
 
       {bulkMode &&
-        view === "installed" &&
-        !lockedByChatMode &&
-        (!bulkUndo || bulkSelection.size > 0) ? (
+      view === "installed" &&
+      !lockedByChatMode &&
+      (!bulkUndo || bulkSelection.size > 0) ? (
         <div className="pointer-events-none absolute inset-x-0 bottom-4 z-20 flex justify-center px-3">
           <div className="hub-panel-enter pointer-events-auto flex max-w-full flex-wrap items-center gap-2 rounded-full border border-border/50 bg-background/90 py-2 pl-4 pr-2 text-[12.5px] shadow-[0_8px_24px_-12px_rgba(15,23,42,0.35)] backdrop-blur-xl dark:border-white/[0.1] dark:bg-white/[0.08]">
             {bulkSelection.size > 0 ? (
diff --git a/crates/agent-gui/src/pages/skills-hub/SkillsHubPage.tsx b/crates/agent-gui/src/pages/skills-hub/SkillsHubPage.tsx
index bb177c8bf..8feac8956 100644
--- a/crates/agent-gui/src/pages/skills-hub/SkillsHubPage.tsx
+++ b/crates/agent-gui/src/pages/skills-hub/SkillsHubPage.tsx
@@ -1693,460 +1693,455 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                     </div>
                   </GlassPanel>
                 </div>
-              ) : (
-                view === "installed" ? (
-                    <div
-                      className={cn(
-                        "h-full min-h-0 overflow-y-auto px-0.5 pr-1 pt-1.5",
-                        bulkMode ? "pb-24" : "pb-4",
-                      )}
-                    >
-                      <div className="flex flex-col gap-5">
-                        {skills.length > 0 ? (
-                          <StoreCategoryChips
-                            value={installedCategory}
-                            counts={installedCategoryCounts}
-                            onChange={setInstalledCategory}
-                          />
-                        ) : null}
+              ) : view === "installed" ? (
+                <div
+                  className={cn(
+                    "h-full min-h-0 overflow-y-auto px-0.5 pr-1 pt-1.5",
+                    bulkMode ? "pb-24" : "pb-4",
+                  )}
+                >
+                  <div className="flex flex-col gap-5">
+                    {skills.length > 0 ? (
+                      <StoreCategoryChips
+                        value={installedCategory}
+                        counts={installedCategoryCounts}
+                        onChange={setInstalledCategory}
+                      />
+                    ) : null}
 
-                        {bulkMode ? (
-                          <div className="hub-panel-enter flex items-center gap-2 text-[11px] text-muted-foreground/80">
-                            <ListChecks className="h-3.5 w-3.5 shrink-0" />
-                            <span>{t("settings.skillsBulkHint")}</span>
-                          </div>
-                        ) : null}
+                    {bulkMode ? (
+                      <div className="hub-panel-enter flex items-center gap-2 text-[11px] text-muted-foreground/80">
+                        <ListChecks className="h-3.5 w-3.5 shrink-0" />
+                        <span>{t("settings.skillsBulkHint")}</span>
+                      </div>
+                    ) : null}
 
-                        {loadError ? (
-                          <GlassPanel tone="error" className="hub-panel-enter">
-                            <div className="flex items-center gap-2">
-                              <AlertTriangle className="h-4 w-4 shrink-0 text-destructive" />
-                              <span className="text-xs text-destructive">{loadError}</span>
-                            </div>
-                          </GlassPanel>
-                        ) : null}
+                    {loadError ? (
+                      <GlassPanel tone="error" className="hub-panel-enter">
+                        <div className="flex items-center gap-2">
+                          <AlertTriangle className="h-4 w-4 shrink-0 text-destructive" />
+                          <span className="text-xs text-destructive">{loadError}</span>
+                        </div>
+                      </GlassPanel>
+                    ) : null}
 
-                        {!skillsEnabled ? (
-                          <GlassPanel tone="muted" className="hub-panel-enter">
-                            <div className="flex items-center gap-2">
-                              <BookOpen className="h-4 w-4 shrink-0 text-muted-foreground" />
-                              <span className="text-xs text-muted-foreground">
-                                {t("settings.skillsDisabledHint")}
-                              </span>
-                            </div>
-                          </GlassPanel>
-                        ) : null}
+                    {!skillsEnabled ? (
+                      <GlassPanel tone="muted" className="hub-panel-enter">
+                        <div className="flex items-center gap-2">
+                          <BookOpen className="h-4 w-4 shrink-0 text-muted-foreground" />
+                          <span className="text-xs text-muted-foreground">
+                            {t("settings.skillsDisabledHint")}
+                          </span>
+                        </div>
+                      </GlassPanel>
+                    ) : null}
+
+                    {!loading && skills.length === 0 && !loadError ? (
+                      <GlassPanel className="hub-panel-enter">
+                        <div className="flex flex-col items-center gap-3 py-8 text-center">
+                          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-muted/60">
+                            <BookOpen className="h-5 w-5 text-muted-foreground" />
+                          </div>
+                          <div className="space-y-1">
+                            <p className="text-sm font-medium text-muted-foreground">
+                              {t("settings.skillsNotFound")}
+                            </p>
+                            <p className="text-xs text-muted-foreground/70">
+                              {t("settings.skillsNotFoundHint")}
+                            </p>
+                          </div>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            className="mt-1 gap-1.5 rounded-full"
+                            onClick={() => void refresh()}
+                          >
+                            <RefreshCw className="h-3.5 w-3.5" />
+                            {t("settings.skillsRescan")}
+                          </Button>
+                        </div>
+                      </GlassPanel>
+                    ) : null}
 
-                        {!loading && skills.length === 0 && !loadError ? (
-                          <GlassPanel className="hub-panel-enter">
-                            <div className="flex flex-col items-center gap-3 py-8 text-center">
-                              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-muted/60">
-                                <BookOpen className="h-5 w-5 text-muted-foreground" />
+                    {loading && skills.length === 0 ? (
+                      <>
+                        <div className="hub-frost-hero hub-panel-enter px-4 py-3.5">
+                          <div className="flex items-center gap-3.5">
+                            <FrostSpinner />
+                            <div className="min-w-0 flex-1">
+                              <div className="text-[13px] font-medium tracking-tight text-foreground">
+                                {t("settings.skillsScanning")}
                               </div>
-                              <div className="space-y-1">
-                                <p className="text-sm font-medium text-muted-foreground">
-                                  {t("settings.skillsNotFound")}
-                                </p>
-                                <p className="text-xs text-muted-foreground/70">
-                                  {t("settings.skillsNotFoundHint")}
-                                </p>
+                              <div className="mt-0.5 truncate text-[11px] text-muted-foreground/80">
+                                {t("settings.skillsHubScanning")}
                               </div>
-                              <Button
-                                variant="outline"
-                                size="sm"
-                                className="mt-1 gap-1.5 rounded-full"
-                                onClick={() => void refresh()}
-                              >
-                                <RefreshCw className="h-3.5 w-3.5" />
-                                {t("settings.skillsRescan")}
-                              </Button>
                             </div>
-                          </GlassPanel>
-                        ) : null}
+                          </div>
+                          <div className="hub-frost-track mt-3.5" />
+                        </div>
 
-                        {loading && skills.length === 0 ? (
-                          <>
-                            <div className="hub-frost-hero hub-panel-enter px-4 py-3.5">
-                              <div className="flex items-center gap-3.5">
-                                <FrostSpinner />
-                                <div className="min-w-0 flex-1">
-                                  <div className="text-[13px] font-medium tracking-tight text-foreground">
-                                    {t("settings.skillsScanning")}
-                                  </div>
-                                  <div className="mt-0.5 truncate text-[11px] text-muted-foreground/80">
-                                    {t("settings.skillsHubScanning")}
-                                  </div>
+                        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                          {[1, 2, 3, 4, 5, 6].map((item) => (
+                            <div key={item} className="hub-frost-skeleton skill-card-enter p-3.5">
+                              <div className="flex items-center gap-3">
+                                <div className="skills-skeleton-shimmer h-9 w-9 shrink-0 rounded-lg" />
+                                <div className="flex-1 space-y-2">
+                                  <div className="skills-skeleton-shimmer h-3.5 w-28 rounded" />
+                                  <div className="skills-skeleton-shimmer h-3 w-full max-w-[12rem] rounded" />
                                 </div>
                               </div>
-                              <div className="hub-frost-track mt-3.5" />
                             </div>
+                          ))}
+                        </div>
+                      </>
+                    ) : null}
 
-                            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-                              {[1, 2, 3, 4, 5, 6].map((item) => (
+                    {filtered.length > 0 ? (
+                      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                        {filtered.map(({ skill, categories }) => {
+                          const alwaysEnabled = isAlwaysEnabledSkillName(skill.name);
+                          const checked = alwaysEnabled || selected.has(skill.name);
+                          const bulkSelected = bulkSelection.has(skill.name);
+                          const deleting = deletingSkillName === skill.name;
+                          const deleteDisabled = deletingSkillName !== null;
+                          const PrimaryCategoryIcon =
+                            STORE_CATEGORY_ICONS[categories[0] ?? "other"];
+                          const card = (
+                            <>
+                              <div className="flex items-start justify-between gap-2">
                                 <div
-                                  key={item}
-                                  className="hub-frost-skeleton skill-card-enter p-3.5"
+                                  className={cn(
+                                    "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border transition-all",
+                                    checked
+                                      ? "border-border/55 bg-background/80 text-foreground/85 shadow-[0_1px_0_rgba(255,255,255,0.55)_inset] dark:border-white/[0.09] dark:bg-white/[0.06] dark:shadow-[0_1px_0_rgba(255,255,255,0.06)_inset]"
+                                      : "border-border/30 bg-muted/50 text-muted-foreground group-hover:border-border/50 group-hover:bg-background/70 group-hover:text-foreground/85",
+                                  )}
                                 >
-                                  <div className="flex items-center gap-3">
-                                    <div className="skills-skeleton-shimmer h-9 w-9 shrink-0 rounded-lg" />
-                                    <div className="flex-1 space-y-2">
-                                      <div className="skills-skeleton-shimmer h-3.5 w-28 rounded" />
-                                      <div className="skills-skeleton-shimmer h-3 w-full max-w-[12rem] rounded" />
-                                    </div>
-                                  </div>
+                                  <PrimaryCategoryIcon className="h-5 w-5" />
                                 </div>
-                              ))}
-                            </div>
-                          </>
-                        ) : null}
 
-                        {filtered.length > 0 ? (
-                          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-                            {filtered.map(({ skill, categories }) => {
-                              const alwaysEnabled = isAlwaysEnabledSkillName(skill.name);
-                              const checked = alwaysEnabled || selected.has(skill.name);
-                              const bulkSelected = bulkSelection.has(skill.name);
-                              const deleting = deletingSkillName === skill.name;
-                              const deleteDisabled = deletingSkillName !== null;
-                              const PrimaryCategoryIcon =
-                                STORE_CATEGORY_ICONS[categories[0] ?? "other"];
-                              const card = (
-                                <>
-                                  <div className="flex items-start justify-between gap-2">
+                                {alwaysEnabled && !bulkMode ? (
+                                  <div
+                                    className="inline-flex shrink-0 items-center gap-1 rounded-full bg-foreground/[0.06] px-2 py-0.5 text-[10px] font-medium text-foreground/75 ring-1 ring-border/45"
+                                    title={t("settings.skillsAlwaysOn")}
+                                  >
+                                    <Lock className="h-2.5 w-2.5" />
+                                    <span>{t("settings.skillsAlwaysOn")}</span>
+                                  </div>
+                                ) : bulkMode ? (
+                                  alwaysEnabled ? (
                                     <div
-                                      className={cn(
-                                        "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border transition-all",
-                                        checked
-                                          ? "border-border/55 bg-background/80 text-foreground/85 shadow-[0_1px_0_rgba(255,255,255,0.55)_inset] dark:border-white/[0.09] dark:bg-white/[0.06] dark:shadow-[0_1px_0_rgba(255,255,255,0.06)_inset]"
-                                          : "border-border/30 bg-muted/50 text-muted-foreground group-hover:border-border/50 group-hover:bg-background/70 group-hover:text-foreground/85",
-                                      )}
+                                      className="flex shrink-0 items-center"
+                                      title={t("settings.skillsBulkAlwaysOnDisabled")}
                                     >
-                                      <PrimaryCategoryIcon className="h-5 w-5" />
-                                    </div>
-
-                                    {alwaysEnabled && !bulkMode ? (
-                                      <div
-                                        className="inline-flex shrink-0 items-center gap-1 rounded-full bg-foreground/[0.06] px-2 py-0.5 text-[10px] font-medium text-foreground/75 ring-1 ring-border/45"
-                                        title={t("settings.skillsAlwaysOn")}
+                                      <span
+                                        aria-hidden="true"
+                                        className="pointer-events-none flex h-5 w-5 items-center justify-center rounded-full border border-border/50 bg-muted/40 text-muted-foreground/50 opacity-60"
                                       >
                                         <Lock className="h-2.5 w-2.5" />
-                                        <span>{t("settings.skillsAlwaysOn")}</span>
-                                      </div>
-                                    ) : bulkMode ? (
-                                      alwaysEnabled ? (
-                                        <div
-                                          className="flex shrink-0 items-center"
-                                          title={t("settings.skillsBulkAlwaysOnDisabled")}
-                                        >
-                                          <span
-                                            aria-hidden="true"
-                                            className="pointer-events-none flex h-5 w-5 items-center justify-center rounded-full border border-border/50 bg-muted/40 text-muted-foreground/50 opacity-60"
-                                          >
-                                            <Lock className="h-2.5 w-2.5" />
-                                          </span>
-                                        </div>
-                                      ) : (
-                                        <div
-                                          className="flex shrink-0 items-center"
-                                          onClick={(event) => event.stopPropagation()}
-                                          onKeyDown={(event) => event.stopPropagation()}
-                                        >
-                                          <label
-                                            className="relative flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center"
-                                            title={t("settings.skillsHubBulkSelectLabel")}
-                                          >
-                                            <input
-                                              type="checkbox"
-                                              checked={bulkSelection.has(skill.name)}
-                                              aria-label={`${t("settings.skillsHubBulkSelectLabel")}: ${skill.name}`}
-                                              onClick={(event) => event.stopPropagation()}
-                                              onChange={(event) => {
-                                                event.stopPropagation();
-                                                toggleBulkSelectionName(skill.name);
-                                              }}
-                                              className="peer sr-only"
-                                            />
-                                            <span
-                                              aria-hidden="true"
-                                              className={cn(
-                                                "pointer-events-none flex h-5 w-5 items-center justify-center rounded-full border transition-all",
-                                                bulkSelection.has(skill.name)
-                                                  ? "border-primary bg-primary text-primary-foreground"
-                                                  : "border-border bg-background group-hover:border-foreground/40",
-                                              )}
-                                            >
-                                              {bulkSelection.has(skill.name) ? (
-                                                <Check className="h-3 w-3" />
-                                              ) : null}
-                                            </span>
-                                          </label>
-                                        </div>
-                                      )
-                                    ) : (
-                                      <div
-                                        className="flex shrink-0 items-center gap-1.5"
-                                        onClick={(event) => event.stopPropagation()}
-                                        onKeyDown={(event) => event.stopPropagation()}
+                                      </span>
+                                    </div>
+                                  ) : (
+                                    <div
+                                      className="flex shrink-0 items-center"
+                                      onClick={(event) => event.stopPropagation()}
+                                      onKeyDown={(event) => event.stopPropagation()}
+                                    >
+                                      <label
+                                        className="relative flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center"
+                                        title={t("settings.skillsHubBulkSelectLabel")}
                                       >
-                                        <button
-                                          type="button"
+                                        <input
+                                          type="checkbox"
+                                          checked={bulkSelection.has(skill.name)}
                                           aria-label={`${t("settings.skillsHubBulkSelectLabel")}: ${skill.name}`}
-                                          title={t("settings.skillsHubBulkSelect")}
-                                          onClick={(event) => {
+                                          onClick={(event) => event.stopPropagation()}
+                                          onChange={(event) => {
                                             event.stopPropagation();
-                                            enterBulkMode(skill.name);
+                                            toggleBulkSelectionName(skill.name);
                                           }}
+                                          className="peer sr-only"
+                                        />
+                                        <span
+                                          aria-hidden="true"
                                           className={cn(
-                                            // Google Photos-style bulk entry: hover-faint, touch semi-visible.
-                                            "relative flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-border/60 bg-background/90 text-muted-foreground shadow-sm transition-all hover:border-primary/50 hover:text-foreground",
-                                            "opacity-0 group-hover:opacity-100 focus-visible:opacity-100 [@media(hover:none)]:opacity-70",
+                                            "pointer-events-none flex h-5 w-5 items-center justify-center rounded-full border transition-all",
+                                            bulkSelection.has(skill.name)
+                                              ? "border-primary bg-primary text-primary-foreground"
+                                              : "border-border bg-background group-hover:border-foreground/40",
                                           )}
                                         >
-                                          <span className="h-2 w-2 rounded-full border border-current opacity-40" />
-                                        </button>
+                                          {bulkSelection.has(skill.name) ? (
+                                            <Check className="h-3 w-3" />
+                                          ) : null}
+                                        </span>
+                                      </label>
+                                    </div>
+                                  )
+                                ) : (
+                                  <div
+                                    className="flex shrink-0 items-center gap-1.5"
+                                    onClick={(event) => event.stopPropagation()}
+                                    onKeyDown={(event) => event.stopPropagation()}
+                                  >
+                                    <button
+                                      type="button"
+                                      aria-label={`${t("settings.skillsHubBulkSelectLabel")}: ${skill.name}`}
+                                      title={t("settings.skillsHubBulkSelect")}
+                                      onClick={(event) => {
+                                        event.stopPropagation();
+                                        enterBulkMode(skill.name);
+                                      }}
+                                      className={cn(
+                                        // Google Photos-style bulk entry: hover-faint, touch semi-visible.
+                                        "relative flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-border/60 bg-background/90 text-muted-foreground shadow-sm transition-all hover:border-primary/50 hover:text-foreground",
+                                        "opacity-0 group-hover:opacity-100 focus-visible:opacity-100 [@media(hover:none)]:opacity-70",
+                                      )}
+                                    >
+                                      <span className="h-2 w-2 rounded-full border border-current opacity-40" />
+                                    </button>
+                                    <button
+                                      type="button"
+                                      role="switch"
+                                      aria-checked={checked}
+                                      aria-label={`${t("skills.select")}: ${skill.name}`}
+                                      title={
+                                        checked
+                                          ? t("settings.skillsHubToggleDisable")
+                                          : t("settings.skillsHubToggleEnable")
+                                      }
+                                      onClick={(event) => {
+                                        event.stopPropagation();
+                                        toggleSkill(skill.name, !checked);
+                                      }}
+                                      className={cn(
+                                        "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full ring-1 transition-all",
+                                        checked
+                                          ? "bg-emerald-500 ring-emerald-400/45"
+                                          : "bg-muted-foreground/25 ring-border/40",
+                                      )}
+                                    >
+                                      <span
+                                        className={cn(
+                                          "pointer-events-none inline-block h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-transform",
+                                          checked
+                                            ? "translate-x-[1.05rem]"
+                                            : "translate-x-[0.15rem]",
+                                        )}
+                                      />
+                                    </button>
+                                  </div>
+                                )}
+                              </div>
+
+                              <div className="mt-2.5 min-w-0 flex-1">
+                                <div className="flex min-w-0 items-center gap-1.5">
+                                  <div className="truncate text-[13px] font-semibold leading-tight text-foreground">
+                                    {skill.name}
+                                  </div>
+                                  {checked ? (
+                                    <span className="inline-flex shrink-0 items-center rounded-full bg-emerald-500/12 px-1.5 py-0.5 text-[10px] font-medium text-emerald-700 ring-1 ring-emerald-500/25 dark:bg-emerald-400/12 dark:text-emerald-300 dark:ring-emerald-400/25">
+                                      {t("settings.skillsHubEnabledBadge")}
+                                    </span>
+                                  ) : null}
+                                </div>
+                                {skill.description ? (
+                                  <p className="mt-1 line-clamp-2 text-[11.5px] leading-[1.4] text-muted-foreground">
+                                    {skill.description}
+                                  </p>
+                                ) : null}
+                                {!alwaysEnabled ? (
+                                  <div className="mt-2">
+                                    <SkillCategoryBadges
+                                      categories={categories}
+                                      onSelect={setInstalledCategory}
+                                    />
+                                  </div>
+                                ) : null}
+                              </div>
+
+                              <div className="mt-2.5 flex min-h-8 items-center gap-1 border-t border-border/30 pt-2 text-[10.5px] text-muted-foreground/70">
+                                <FileText className="h-3 w-3 shrink-0" />
+                                <span className="truncate">{skill.skillFile}</span>
+                                {!alwaysEnabled && !bulkMode ? (
+                                  <div
+                                    className="ml-auto shrink-0"
+                                    onClick={(event) => event.stopPropagation()}
+                                    onKeyDown={(event) => event.stopPropagation()}
+                                  >
+                                    <ConfirmDeletePopover
+                                      name={skill.name}
+                                      onConfirm={() => void deleteSkill(skill)}
+                                    >
+                                      {(open) => (
                                         <button
                                           type="button"
-                                          role="switch"
-                                          aria-checked={checked}
-                                          aria-label={`${t("skills.select")}: ${skill.name}`}
-                                          title={
-                                            checked
-                                              ? t("settings.skillsHubToggleDisable")
-                                              : t("settings.skillsHubToggleEnable")
-                                          }
+                                          disabled={deleteDisabled}
                                           onClick={(event) => {
                                             event.stopPropagation();
-                                            toggleSkill(skill.name, !checked);
+                                            open();
                                           }}
                                           className={cn(
-                                            "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full ring-1 transition-all",
-                                            checked
-                                              ? "bg-emerald-500 ring-emerald-400/45"
-                                              : "bg-muted-foreground/25 ring-border/40",
+                                            "flex h-6 w-6 items-center justify-center rounded-md border border-border/35 bg-background/65 text-muted-foreground transition-all",
+                                            "hover:border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+                                            "disabled:cursor-not-allowed",
+                                            // Hover-revealed on pointer devices; keyboard focus and
+                                            // touch (no hover — webui mobile) keep it reachable.
+                                            deleting
+                                              ? "pointer-events-auto opacity-100"
+                                              : cn(
+                                                  "pointer-events-none opacity-0 group-hover:pointer-events-auto focus-visible:pointer-events-auto [@media(hover:none)]:pointer-events-auto",
+                                                  deleteDisabled
+                                                    ? "group-hover:opacity-60 focus-visible:opacity-60 [@media(hover:none)]:opacity-60"
+                                                    : "group-hover:opacity-100 focus-visible:opacity-100 [@media(hover:none)]:opacity-100",
+                                                ),
                                           )}
+                                          title={t("settings.skillsHubDeleteSkill")}
                                         >
-                                          <span
-                                            className={cn(
-                                              "pointer-events-none inline-block h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-transform",
-                                              checked
-                                                ? "translate-x-[1.05rem]"
-                                                : "translate-x-[0.15rem]",
-                                            )}
-                                          />
-                                        </button>
-                                      </div>
-                                    )}
-                                  </div>
-
-                                  <div className="mt-2.5 min-w-0 flex-1">
-                                    <div className="flex min-w-0 items-center gap-1.5">
-                                      <div className="truncate text-[13px] font-semibold leading-tight text-foreground">
-                                        {skill.name}
-                                      </div>
-                                      {checked ? (
-                                        <span className="inline-flex shrink-0 items-center rounded-full bg-emerald-500/12 px-1.5 py-0.5 text-[10px] font-medium text-emerald-700 ring-1 ring-emerald-500/25 dark:bg-emerald-400/12 dark:text-emerald-300 dark:ring-emerald-400/25">
-                                          {t("settings.skillsHubEnabledBadge")}
-                                        </span>
-                                      ) : null}
-                                    </div>
-                                    {skill.description ? (
-                                      <p className="mt-1 line-clamp-2 text-[11.5px] leading-[1.4] text-muted-foreground">
-                                        {skill.description}
-                                      </p>
-                                    ) : null}
-                                    {!alwaysEnabled ? (
-                                      <div className="mt-2">
-                                        <SkillCategoryBadges
-                                          categories={categories}
-                                          onSelect={setInstalledCategory}
-                                        />
-                                      </div>
-                                    ) : null}
-                                  </div>
-
-                                  <div className="mt-2.5 flex min-h-8 items-center gap-1 border-t border-border/30 pt-2 text-[10.5px] text-muted-foreground/70">
-                                    <FileText className="h-3 w-3 shrink-0" />
-                                    <span className="truncate">{skill.skillFile}</span>
-                                    {!alwaysEnabled && !bulkMode ? (
-                                      <div
-                                        className="ml-auto shrink-0"
-                                        onClick={(event) => event.stopPropagation()}
-                                        onKeyDown={(event) => event.stopPropagation()}
-                                      >
-                                        <ConfirmDeletePopover
-                                          name={skill.name}
-                                          onConfirm={() => void deleteSkill(skill)}
-                                        >
-                                          {(open) => (
-                                            <button
-                                              type="button"
-                                              disabled={deleteDisabled}
-                                              onClick={(event) => {
-                                                event.stopPropagation();
-                                                open();
-                                              }}
-                                              className={cn(
-                                                "flex h-6 w-6 items-center justify-center rounded-md border border-border/35 bg-background/65 text-muted-foreground transition-all",
-                                                "hover:border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
-                                                "disabled:cursor-not-allowed",
-                                                // Hover-revealed on pointer devices; keyboard focus and
-                                                // touch (no hover — webui mobile) keep it reachable.
-                                                deleting
-                                                  ? "pointer-events-auto opacity-100"
-                                                  : cn(
-                                                      "pointer-events-none opacity-0 group-hover:pointer-events-auto focus-visible:pointer-events-auto [@media(hover:none)]:pointer-events-auto",
-                                                      deleteDisabled
-                                                        ? "group-hover:opacity-60 focus-visible:opacity-60 [@media(hover:none)]:opacity-60"
-                                                        : "group-hover:opacity-100 focus-visible:opacity-100 [@media(hover:none)]:opacity-100",
-                                                    ),
-                                              )}
-                                              title={t("settings.skillsHubDeleteSkill")}
-                                            >
-                                              {deleting ? (
-                                                <Loader2 className="h-3.5 w-3.5 animate-spin" />
-                                              ) : (
-                                                <Trash2 className="h-3.5 w-3.5" />
-                                              )}
-                                            </button>
+                                          {deleting ? (
+                                            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                                          ) : (
+                                            <Trash2 className="h-3.5 w-3.5" />
                                           )}
-                                        </ConfirmDeletePopover>
-                                      </div>
-                                    ) : null}
+                                        </button>
+                                      )}
+                                    </ConfirmDeletePopover>
                                   </div>
-                                </>
-                              );
-
-                              const key = `${skill.name}-${rootDir}`;
-                              if (alwaysEnabled) {
-                                return (
-                                  <button
-                                    key={key}
-                                    type="button"
-                                    aria-label={`${t("settings.skillsInstalledPreviewOpen")}: ${skill.name}`}
-                                    onClick={() => {
-                                      if (bulkMode) return;
-                                      openInstalledSkillPreview(skill);
-                                    }}
-                                    className={cn(
-                                      "hub-skill-card skill-card-enter group flex h-full w-full cursor-pointer flex-col rounded-2xl border border-border/50 bg-background/75 p-3.5 text-left shadow-[0_1px_0_rgba(255,255,255,0.55)_inset,0_4px_18px_-12px_rgba(15,23,42,0.16)] transition-all hover:-translate-y-0.5 hover:border-border/60 hover:bg-background/85 hover:shadow-[0_4px_16px_-10px_rgba(15,23,42,0.18)] dark:border-white/[0.08] dark:bg-white/[0.05] dark:shadow-[0_1px_0_rgba(255,255,255,0.05)_inset,0_4px_18px_-12px_rgba(0,0,0,0.5)] dark:hover:border-white/[0.12] dark:hover:bg-white/[0.07] dark:hover:shadow-[0_4px_16px_-10px_rgba(0,0,0,0.55)] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground/15",
-                                      bulkMode ? "cursor-default hover:translate-y-0" : null,
-                                    )}
-                                  >
-                                    {card}
-                                  </button>
-                                );
-                              }
-
-                              return (
-                                // biome-ignore lint/a11y/useSemanticElements: The card contains nested controls and cannot be a native button.
-                                <div
-                                  key={key}
-                                  role="button"
-                                  tabIndex={0}
-                                  aria-label={`${t("settings.skillsInstalledPreviewOpen")}: ${skill.name}`}
-                                  onClick={(event) => {
-                                    if (bulkMode) {
-                                      handleBulkInstalledCardClick(
-                                        skill.name,
-                                        filtered.map((entry) => entry.skill.name),
-                                        event.shiftKey,
-                                      );
-                                      return;
-                                    }
-                                    openInstalledSkillPreview(skill);
-                                  }}
-                                  onMouseDown={(event) => {
-                                    // Shift+点击做区间选择时避免浏览器拖出文本选区
-                                    if (bulkMode && event.shiftKey) event.preventDefault();
-                                  }}
-                                  onKeyDown={(event) => {
-                                    if (bulkMode && (event.key === "Enter" || event.key === " ")) {
-                                      event.preventDefault();
-                                      handleBulkInstalledCardClick(
-                                        skill.name,
-                                        filtered.map((entry) => entry.skill.name),
-                                        event.shiftKey,
-                                      );
-                                      return;
-                                    }
-                                    handleInstalledSkillCardKeyDown(event, skill);
-                                  }}
-                                  className={cn(
-                                    "hub-skill-card skill-card-enter group relative flex h-full w-full flex-col rounded-2xl border p-3.5 text-left transition-all",
-                                    "cursor-pointer focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground/15",
-                                    // Enabled style always visible; bulk selection overlays primary ring.
-                                    checked
-                                      ? "border-emerald-500/35 bg-emerald-50/90 shadow-[0_1px_0_rgba(255,255,255,0.55)_inset,0_4px_14px_-12px_rgba(16,185,129,0.28)] dark:border-emerald-400/30 dark:bg-emerald-500/12 dark:shadow-[0_1px_0_rgba(255,255,255,0.05)_inset,0_4px_14px_-12px_rgba(16,185,129,0.22)]"
-                                      : "border-border/40 bg-muted/45 text-muted-foreground shadow-none hover:-translate-y-0.5 hover:border-border/55 hover:bg-muted/55 dark:border-white/[0.06] dark:bg-white/[0.025] dark:hover:border-white/[0.10] dark:hover:bg-white/[0.04]",
-                                    bulkSelected
-                                      ? "ring-2 ring-primary/50 ring-offset-1 ring-offset-background"
-                                      : null,
-                                  )}
-                                >
-                                  {card}
-                                </div>
-                              );
-                            })}
-                          </div>
-                        ) : null}
-
-                        {(filter.trim() || installedCategory !== "all") &&
-                        filtered.length === 0 &&
-                        skills.length > 0 ? (
-                          <GlassPanel tone="muted" className="hub-panel-enter">
-                            <p className="py-2 text-center text-sm text-muted-foreground">
-                              {filter.trim()
-                                ? t("settings.skillsNoMatch").replace("{filter}", filter)
-                                : t("settings.skillsStoreEmptyTitle")}
-                            </p>
-                          </GlassPanel>
-                        ) : null}
+                                ) : null}
+                              </div>
+                            </>
+                          );
+
+                          const key = `${skill.name}-${rootDir}`;
+                          if (alwaysEnabled) {
+                            return (
+                              <button
+                                key={key}
+                                type="button"
+                                aria-label={`${t("settings.skillsInstalledPreviewOpen")}: ${skill.name}`}
+                                onClick={() => {
+                                  if (bulkMode) return;
+                                  openInstalledSkillPreview(skill);
+                                }}
+                                className={cn(
+                                  "hub-skill-card skill-card-enter group flex h-full w-full cursor-pointer flex-col rounded-2xl border border-border/50 bg-background/75 p-3.5 text-left shadow-[0_1px_0_rgba(255,255,255,0.55)_inset,0_4px_18px_-12px_rgba(15,23,42,0.16)] transition-all hover:-translate-y-0.5 hover:border-border/60 hover:bg-background/85 hover:shadow-[0_4px_16px_-10px_rgba(15,23,42,0.18)] dark:border-white/[0.08] dark:bg-white/[0.05] dark:shadow-[0_1px_0_rgba(255,255,255,0.05)_inset,0_4px_18px_-12px_rgba(0,0,0,0.5)] dark:hover:border-white/[0.12] dark:hover:bg-white/[0.07] dark:hover:shadow-[0_4px_16px_-10px_rgba(0,0,0,0.55)] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground/15",
+                                  bulkMode ? "cursor-default hover:translate-y-0" : null,
+                                )}
+                              >
+                                {card}
+                              </button>
+                            );
+                          }
+
+                          return (
+                            // biome-ignore lint/a11y/useSemanticElements: The card contains nested controls and cannot be a native button.
+                            <div
+                              key={key}
+                              role="button"
+                              tabIndex={0}
+                              aria-label={`${t("settings.skillsInstalledPreviewOpen")}: ${skill.name}`}
+                              onClick={(event) => {
+                                if (bulkMode) {
+                                  handleBulkInstalledCardClick(
+                                    skill.name,
+                                    filtered.map((entry) => entry.skill.name),
+                                    event.shiftKey,
+                                  );
+                                  return;
+                                }
+                                openInstalledSkillPreview(skill);
+                              }}
+                              onMouseDown={(event) => {
+                                // Shift+点击做区间选择时避免浏览器拖出文本选区
+                                if (bulkMode && event.shiftKey) event.preventDefault();
+                              }}
+                              onKeyDown={(event) => {
+                                if (bulkMode && (event.key === "Enter" || event.key === " ")) {
+                                  event.preventDefault();
+                                  handleBulkInstalledCardClick(
+                                    skill.name,
+                                    filtered.map((entry) => entry.skill.name),
+                                    event.shiftKey,
+                                  );
+                                  return;
+                                }
+                                handleInstalledSkillCardKeyDown(event, skill);
+                              }}
+                              className={cn(
+                                "hub-skill-card skill-card-enter group relative flex h-full w-full flex-col rounded-2xl border p-3.5 text-left transition-all",
+                                "cursor-pointer focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground/15",
+                                // Enabled style always visible; bulk selection overlays primary ring.
+                                checked
+                                  ? "border-emerald-500/35 bg-emerald-50/90 shadow-[0_1px_0_rgba(255,255,255,0.55)_inset,0_4px_14px_-12px_rgba(16,185,129,0.28)] dark:border-emerald-400/30 dark:bg-emerald-500/12 dark:shadow-[0_1px_0_rgba(255,255,255,0.05)_inset,0_4px_14px_-12px_rgba(16,185,129,0.22)]"
+                                  : "border-border/40 bg-muted/45 text-muted-foreground shadow-none hover:-translate-y-0.5 hover:border-border/55 hover:bg-muted/55 dark:border-white/[0.06] dark:bg-white/[0.025] dark:hover:border-white/[0.10] dark:hover:bg-white/[0.04]",
+                                bulkSelected
+                                  ? "ring-2 ring-primary/50 ring-offset-1 ring-offset-background"
+                                  : null,
+                              )}
+                            >
+                              {card}
+                            </div>
+                          );
+                        })}
                       </div>
-                    </div>
-                  ) : view === "store" ? (
-                    <SkillsStoreView
-                      items={storeItems}
-                      query={storeQuery}
-                      sort={storeSort}
-                      loading={storeLoading}
-                      loadingMore={storeLoadingMore}
-                      error={storeError}
-                      cursor={storeCursor}
-                      installedKeys={installedStoreKeys}
-                      installedSlugs={installedStoreSlugs}
-                      pendingInstallKeys={pendingInstallKeys}
-                      installingByStoreKey={installingByStoreKey}
-                      installJobs={installJobs}
-                      onSortChange={setStoreSort}
-                      onLoadMore={() => void loadMoreStore()}
-                      onInstall={(skill) => void installStoreSkill(skill)}
-                    />
-                  ) : (
-                    <SkillsImportView
-                      scans={externalScans ?? []}
-                      loading={externalLoading}
-                      error={externalError}
-                      query={importQuery}
-                      selected={selectedExternal}
-                      installedNames={installedSkillNames}
-                      importProgress={importProgress}
-                      importErrors={importErrors}
-                      importedCount={importedCount}
-                      importToast={importToast}
-                      onDismissImportToast={() => {
-                        if (importToastTimerRef.current !== null) {
-                          window.clearTimeout(importToastTimerRef.current);
-                          importToastTimerRef.current = null;
-                        }
-                        setImportToast(null);
-                      }}
-                      bulkMode={bulkMode}
-                      onToggle={toggleExternalSkill}
-                      onBatchToggle={batchToggleExternalSkills}
-                      onRescan={() => void rescanExternalSkills()}
-                      onImport={() => void importSelectedExternalSkills()}
-                    />
-                  )
+                    ) : null}
+
+                    {(filter.trim() || installedCategory !== "all") &&
+                    filtered.length === 0 &&
+                    skills.length > 0 ? (
+                      <GlassPanel tone="muted" className="hub-panel-enter">
+                        <p className="py-2 text-center text-sm text-muted-foreground">
+                          {filter.trim()
+                            ? t("settings.skillsNoMatch").replace("{filter}", filter)
+                            : t("settings.skillsStoreEmptyTitle")}
+                        </p>
+                      </GlassPanel>
+                    ) : null}
+                  </div>
+                </div>
+              ) : view === "store" ? (
+                <SkillsStoreView
+                  items={storeItems}
+                  query={storeQuery}
+                  sort={storeSort}
+                  loading={storeLoading}
+                  loadingMore={storeLoadingMore}
+                  error={storeError}
+                  cursor={storeCursor}
+                  installedKeys={installedStoreKeys}
+                  installedSlugs={installedStoreSlugs}
+                  pendingInstallKeys={pendingInstallKeys}
+                  installingByStoreKey={installingByStoreKey}
+                  installJobs={installJobs}
+                  onSortChange={setStoreSort}
+                  onLoadMore={() => void loadMoreStore()}
+                  onInstall={(skill) => void installStoreSkill(skill)}
+                />
+              ) : (
+                <SkillsImportView
+                  scans={externalScans ?? []}
+                  loading={externalLoading}
+                  error={externalError}
+                  query={importQuery}
+                  selected={selectedExternal}
+                  installedNames={installedSkillNames}
+                  importProgress={importProgress}
+                  importErrors={importErrors}
+                  importedCount={importedCount}
+                  importToast={importToast}
+                  onDismissImportToast={() => {
+                    if (importToastTimerRef.current !== null) {
+                      window.clearTimeout(importToastTimerRef.current);
+                      importToastTimerRef.current = null;
+                    }
+                    setImportToast(null);
+                  }}
+                  bulkMode={bulkMode}
+                  onToggle={toggleExternalSkill}
+                  onBatchToggle={batchToggleExternalSkills}
+                  onRescan={() => void rescanExternalSkills()}
+                  onImport={() => void importSelectedExternalSkills()}
+                />
               )}
             </div>
           </div>
@@ -2166,9 +2161,9 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
       ) : null}
 
       {bulkMode &&
-        view === "installed" &&
-        !lockedByChatMode &&
-        (!bulkUndo || bulkSelection.size > 0) ? (
+      view === "installed" &&
+      !lockedByChatMode &&
+      (!bulkUndo || bulkSelection.size > 0) ? (
         <div className="pointer-events-none absolute inset-x-0 bottom-4 z-20 flex justify-center px-3">
           <div className="hub-panel-enter pointer-events-auto flex max-w-full flex-wrap items-center gap-2 rounded-full border border-border/50 bg-background/90 py-2 pl-4 pr-2 text-[12.5px] shadow-[0_8px_24px_-12px_rgba(15,23,42,0.35)] backdrop-blur-xl dark:border-white/[0.1] dark:bg-white/[0.08]">
             {bulkSelection.size > 0 ? (