diff --git a/crates/agent-gateway/web/src/i18n/config.ts b/crates/agent-gateway/web/src/i18n/config.ts
index 2cd03651d..8d2daea6f 100644
--- a/crates/agent-gateway/web/src/i18n/config.ts
+++ b/crates/agent-gateway/web/src/i18n/config.ts
@@ -1750,6 +1750,10 @@ export const translations: Record<Locale, Record<string, string>> = {
       "在应用 Skills 目录中添加 skill.json、SKILL.md 或 README.md 文件",
     "settings.skillsRescan": "重新扫描",
     "settings.skillsSearch": "搜索技能...",
+    "settings.skillsInstalledSortLabel": "已安装技能排序",
+    "settings.skillsInstalledSortNameAsc": "名称 A→Z",
+    "settings.skillsInstalledSortNameDesc": "名称 Z→A",
+    "settings.skillsInstalledSortNewest": "安装时间 新→旧",
     "settings.skillsNoMatch": "没有匹配「{filter}」的技能",
     "settings.skillsStoreSearch": "搜索 ClawHub 技能",
     "settings.skillsStoreSortMostDownloaded": "下载最多",
@@ -3673,6 +3677,10 @@ export const translations: Record<Locale, Record<string, string>> = {
       "Add skill.json, SKILL.md, or README.md files to the Skills directory",
     "settings.skillsRescan": "Rescan",
     "settings.skillsSearch": "Search Skills...",
+    "settings.skillsInstalledSortLabel": "Sort installed skills",
+    "settings.skillsInstalledSortNameAsc": "Name A→Z",
+    "settings.skillsInstalledSortNameDesc": "Name Z→A",
+    "settings.skillsInstalledSortNewest": "Installation time: newest first",
     "settings.skillsNoMatch": 'No skills matching "{filter}"',
     "settings.skillsStoreSearch": "Search ClawHub Skills",
     "settings.skillsStoreSortMostDownloaded": "Most Downloaded",
diff --git a/crates/agent-gateway/web/src/lib/skills/index.ts b/crates/agent-gateway/web/src/lib/skills/index.ts
index 3e8cda8c5..6bd490953 100644
--- a/crates/agent-gateway/web/src/lib/skills/index.ts
+++ b/crates/agent-gateway/web/src/lib/skills/index.ts
@@ -24,6 +24,8 @@ export type SkillSummary = {
   baseDir: string;
   /** true only when the backend verified LiveAgent ownership metadata */
   builtIn?: boolean;
+  /** skill directory creation/modification time in epoch milliseconds */
+  installedAt?: number | null;
   /** full README.md content for fallback skills that do not declare metadata */
   inlineContent?: string;
   inlineContentTruncated?: boolean;
@@ -123,6 +125,7 @@ type SystemManageSkillResponse = {
     skillFile: string;
     baseDir: string;
     builtIn?: boolean;
+    installedAt?: number | null;
     source?: SkillSourceMetadata | null;
   }> | null;
   invalid?: Array<{ path: string; error: string }> | null;
@@ -445,6 +448,10 @@ async function managedSkillListToDiscovery(
         skillFile,
         baseDir,
         builtIn: raw.builtIn === true,
+        installedAt:
+          typeof raw.installedAt === "number" && Number.isFinite(raw.installedAt)
+            ? raw.installedAt
+            : null,
         source: normalizeSkillSourceMetadata(raw.source),
       }),
     );
diff --git a/crates/agent-gateway/web/src/lib/skills/installedSort.ts b/crates/agent-gateway/web/src/lib/skills/installedSort.ts
new file mode 100644
index 000000000..29f8f0115
--- /dev/null
+++ b/crates/agent-gateway/web/src/lib/skills/installedSort.ts
@@ -0,0 +1,59 @@
+import { isAlwaysEnabledSkillName } from "./builtin";
+import type { SkillSummary } from "./index";
+
+export type InstalledSkillSort = "name-asc" | "name-desc" | "installed-desc";
+
+export const DEFAULT_INSTALLED_SKILL_SORT: InstalledSkillSort = "name-asc";
+
+export function isInstalledSkillSort(value: unknown): value is InstalledSkillSort {
+  return value === "name-asc" || value === "name-desc" || value === "installed-desc";
+}
+
+function installedAtValue(skill: SkillSummary) {
+  return typeof skill.installedAt === "number" && Number.isFinite(skill.installedAt)
+    ? skill.installedAt
+    : null;
+}
+
+export function sortInstalledSkillItems<T>(
+  items: readonly T[],
+  sort: InstalledSkillSort,
+  selectedNames: ReadonlySet<string>,
+  getSkill: (item: T) => SkillSummary,
+): T[] {
+  return [...items].sort((left, right) => {
+    const leftSkill = getSkill(left);
+    const rightSkill = getSkill(right);
+    const leftRank = isAlwaysEnabledSkillName(leftSkill.name)
+      ? 0
+      : selectedNames.has(leftSkill.name)
+        ? 1
+        : 2;
+    const rightRank = isAlwaysEnabledSkillName(rightSkill.name)
+      ? 0
+      : selectedNames.has(rightSkill.name)
+        ? 1
+        : 2;
+
+    if (leftRank !== rightRank) {
+      return leftRank - rightRank;
+    }
+
+    if (sort === "installed-desc") {
+      const leftInstalledAt = installedAtValue(leftSkill);
+      const rightInstalledAt = installedAtValue(rightSkill);
+      if (leftInstalledAt !== null || rightInstalledAt !== null) {
+        if (leftInstalledAt === null) return 1;
+        if (rightInstalledAt === null) return -1;
+        if (leftInstalledAt !== rightInstalledAt) return rightInstalledAt - leftInstalledAt;
+      }
+    }
+
+    const nameOrder = leftSkill.name.localeCompare(rightSkill.name);
+    if (nameOrder !== 0) {
+      return sort === "name-desc" ? -nameOrder : nameOrder;
+    }
+
+    return leftSkill.baseDir.localeCompare(rightSkill.baseDir);
+  });
+}
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 ce17272c3..7687a43e5 100644
--- a/crates/agent-gateway/web/src/pages/skills-hub/SkillsHubPage.tsx
+++ b/crates/agent-gateway/web/src/pages/skills-hub/SkillsHubPage.tsx
@@ -1,4 +1,12 @@
-import { type KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  type KeyboardEvent,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { createPortal } from "react-dom";
 import { GlassPanel, HubBackdrop, HubHeader } from "../../components/hub/HubChrome";
 import {
@@ -60,6 +68,12 @@ import {
   resolveClawHubSkillOwner,
   searchClawHubSkills,
 } from "../../lib/skills/clawHub";
+import {
+  DEFAULT_INSTALLED_SKILL_SORT,
+  type InstalledSkillSort,
+  isInstalledSkillSort,
+  sortInstalledSkillItems,
+} from "../../lib/skills/installedSort";
 
 type SkillsHubView = "installed" | "store" | "import";
 
@@ -81,6 +95,11 @@ const STORE_SORT_OPTIONS: Array<{ value: ClawHubSort; labelKey: string }> = [
   { value: "newest", labelKey: "settings.skillsStoreSortNewest" },
 ];
 
+const INSTALLED_SORT_OPTIONS: Array<{ value: InstalledSkillSort; labelKey: string }> = [
+  { value: "name-asc", labelKey: "settings.skillsInstalledSortNameAsc" },
+  { value: "name-desc", labelKey: "settings.skillsInstalledSortNameDesc" },
+  { value: "installed-desc", labelKey: "settings.skillsInstalledSortNewest" },
+];
 type StoreSkillInstallState = {
   done: boolean;
   installing: boolean;
@@ -326,6 +345,7 @@ function buildSkillDiscoverySignature(rootDir: string, skills: SkillSummary[]) {
           skill.skillFile,
           skill.source?.registry ?? "",
           skill.source?.slug ?? "",
+          skill.installedAt ?? "",
           skill.source?.version ?? "",
         ].join("\0"),
       )
@@ -333,6 +353,254 @@ function buildSkillDiscoverySignature(rootDir: string, skills: SkillSummary[]) {
   ].join("\n");
 }
 
+const INSTALLED_SORT_STORAGE_KEY = "skillsHub.installedSort";
+const FLIP_HERO_DURATION_MS = 380;
+const FLIP_BATCH_HERO_DELAY_MS = 90;
+const FLIP_BATCH_STAGGER_LIMIT = 8;
+const FLIP_WAVE_DURATION_MS = 280;
+const FLIP_WAVE_DELAY_MS = 30;
+const FLIP_WAVE_MAX_DELAY_MS = 400;
+const FLIP_HERO_TRANSITION = `translate ${FLIP_HERO_DURATION_MS}ms cubic-bezier(0.34, 1.3, 0.64, 1)`;
+const FLIP_WAVE_TRANSITION = `translate ${FLIP_WAVE_DURATION_MS}ms cubic-bezier(0.16, 1, 0.3, 1)`;
+
+type FlipMode = "single" | "wave" | "batch";
+type FlipPosition = { left: number; top: number };
+type FlipRequest = {
+  mode: FlipMode;
+  heroKeys: ReadonlySet<string>;
+  followKeys: ReadonlySet<string>;
+};
+
+function readInstalledSortPreference(): InstalledSkillSort {
+  if (typeof window === "undefined") return DEFAULT_INSTALLED_SKILL_SORT;
+  try {
+    const stored = window.localStorage.getItem(INSTALLED_SORT_STORAGE_KEY);
+    return isInstalledSkillSort(stored) ? stored : DEFAULT_INSTALLED_SKILL_SORT;
+  } catch {
+    return DEFAULT_INSTALLED_SKILL_SORT;
+  }
+}
+
+function resetFlipStyles(element: HTMLElement) {
+  element.style.transition = "";
+  element.style.translate = "";
+  element.style.willChange = "";
+  element.style.zIndex = "";
+}
+
+function useFlipGrid() {
+  const gridRef = useRef<HTMLDivElement>(null);
+  const previousRectsRef = useRef<Map<string, FlipPosition>>(new Map());
+  const previousOrderRef = useRef<string[]>([]);
+  const pendingRequestRef = useRef<FlipRequest | null>(null);
+  const frameRef = useRef<number | null>(null);
+  const phaseTimerRef = useRef<number | null>(null);
+  const cleanupTimerRef = useRef<number | null>(null);
+  const activeElementsRef = useRef<HTMLElement[]>([]);
+
+  const requestFlip = useCallback(
+    (mode: FlipMode, heroKeys: readonly string[], followKeys: readonly string[] = heroKeys) => {
+      pendingRequestRef.current = {
+        mode,
+        heroKeys: new Set(heroKeys),
+        followKeys: new Set(followKeys),
+      };
+    },
+    [],
+  );
+
+  const captureVisibleKey = useCallback(() => {
+    const grid = gridRef.current;
+    if (!grid) return null;
+    let scrollParent = grid.parentElement;
+    while (scrollParent) {
+      const overflowY = window.getComputedStyle(scrollParent).overflowY;
+      if (/auto|scroll|overlay/.test(overflowY)) break;
+      scrollParent = scrollParent.parentElement;
+    }
+    const viewport = scrollParent?.getBoundingClientRect();
+    const viewportTop = viewport?.top ?? 0;
+    const viewportBottom = viewport?.bottom ?? window.innerHeight;
+    const elements = grid.querySelectorAll<HTMLElement>("[data-flip-key]");
+    for (const element of elements) {
+      const rect = element.getBoundingClientRect();
+      if (rect.bottom > viewportTop && rect.top < viewportBottom) {
+        return element.dataset.flipKey ?? null;
+      }
+    }
+    return null;
+  }, []);
+
+  const clearAnimation = useCallback(() => {
+    if (frameRef.current !== null) {
+      window.cancelAnimationFrame(frameRef.current);
+      frameRef.current = null;
+    }
+    if (phaseTimerRef.current !== null) {
+      window.clearTimeout(phaseTimerRef.current);
+      phaseTimerRef.current = null;
+    }
+    if (cleanupTimerRef.current !== null) {
+      window.clearTimeout(cleanupTimerRef.current);
+      cleanupTimerRef.current = null;
+    }
+    for (const element of activeElementsRef.current) {
+      resetFlipStyles(element);
+    }
+    activeElementsRef.current = [];
+  }, []);
+
+  useLayoutEffect(() => {
+    clearAnimation();
+    const grid = gridRef.current;
+    if (!grid) {
+      previousRectsRef.current.clear();
+      previousOrderRef.current = [];
+      pendingRequestRef.current = null;
+      return;
+    }
+
+    const elements = Array.from(grid.querySelectorAll<HTMLElement>("[data-flip-key]"));
+    const nextOrder = elements.map((element) => element.dataset.flipKey ?? "");
+    const request = pendingRequestRef.current;
+    pendingRequestRef.current = null;
+    const reducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+    const followElement = request
+      ? elements.find((element) => {
+          const key = element.dataset.flipKey;
+          return key ? request.followKeys.has(key) : false;
+        })
+      : undefined;
+
+    followElement?.scrollIntoView({
+      block: "nearest",
+      inline: "nearest",
+      behavior: reducedMotion ? "auto" : "smooth",
+    });
+
+    const gridRect = grid.getBoundingClientRect();
+    const nextRects = new Map<string, FlipPosition>();
+    for (const element of elements) {
+      const key = element.dataset.flipKey;
+      if (!key) continue;
+      const rect = element.getBoundingClientRect();
+      nextRects.set(key, {
+        left: rect.left - gridRect.left,
+        top: rect.top - gridRect.top,
+      });
+    }
+
+    const previousRects = previousRectsRef.current;
+    const previousOrder = previousOrderRef.current;
+    const orderChanged =
+      previousOrder.length !== nextOrder.length ||
+      nextOrder.some((key, index) => key !== previousOrder[index]);
+    previousRectsRef.current = nextRects;
+    previousOrderRef.current = nextOrder;
+
+    if (previousRects.size === 0 || previousOrder.length === 0 || !orderChanged || reducedMotion) {
+      return;
+    }
+
+    const movedElements: Array<{ element: HTMLElement; hero: boolean }> = [];
+    for (const element of elements) {
+      const key = element.dataset.flipKey;
+      const previousRect = key ? previousRects.get(key) : undefined;
+      const nextRect = key ? nextRects.get(key) : undefined;
+      if (!previousRect || !nextRect) continue;
+      const deltaX = previousRect.left - nextRect.left;
+      const deltaY = previousRect.top - nextRect.top;
+      if (Math.abs(deltaX) < 0.5 && Math.abs(deltaY) < 0.5) continue;
+      element.style.transition = "none";
+      element.style.translate = `${deltaX}px ${deltaY}px`;
+      element.style.willChange = "translate";
+      const hero = key ? (request?.heroKeys.has(key) ?? false) : false;
+      if (hero) element.style.zIndex = "30";
+      movedElements.push({ element, hero });
+    }
+
+    if (movedElements.length === 0) return;
+    activeElementsRef.current = movedElements.map(({ element }) => element);
+    void grid.offsetWidth;
+    frameRef.current = window.requestAnimationFrame(() => {
+      frameRef.current = null;
+      const mode = request?.mode ?? "wave";
+      const heroElements = movedElements.filter(({ hero }) => hero);
+      const waveElements = movedElements.filter(({ hero }) => !hero);
+      const maxWaveDelay = Math.min(
+        Math.max(0, waveElements.length - 1) * FLIP_WAVE_DELAY_MS,
+        FLIP_WAVE_MAX_DELAY_MS,
+      );
+      const startWave = () => {
+        waveElements.forEach(({ element }, index) => {
+          const delay = Math.min(index * FLIP_WAVE_DELAY_MS, FLIP_WAVE_MAX_DELAY_MS);
+          element.style.transition = `${FLIP_WAVE_TRANSITION} ${delay}ms`;
+          element.style.translate = "0 0";
+        });
+      };
+      const scheduleCleanup = (delay: number) => {
+        cleanupTimerRef.current = window.setTimeout(() => {
+          for (const { element } of movedElements) {
+            resetFlipStyles(element);
+          }
+          activeElementsRef.current = [];
+          cleanupTimerRef.current = null;
+        }, delay + 40);
+      };
+
+      if (mode === "batch") {
+        const staggerHeroes = (request?.heroKeys.size ?? 0) <= FLIP_BATCH_STAGGER_LIMIT;
+        heroElements.forEach(({ element }, index) => {
+          const delay = staggerHeroes ? index * FLIP_BATCH_HERO_DELAY_MS : 0;
+          element.style.transition = `${FLIP_HERO_TRANSITION} ${delay}ms`;
+          element.style.translate = "0 0";
+        });
+        const lastHeroDelay =
+          staggerHeroes && heroElements.length > 0
+            ? (heroElements.length - 1) * FLIP_BATCH_HERO_DELAY_MS
+            : 0;
+        const heroPhaseDuration =
+          heroElements.length > 0 ? lastHeroDelay + FLIP_HERO_DURATION_MS : 0;
+        if (waveElements.length > 0) {
+          if (heroPhaseDuration > 0) {
+            phaseTimerRef.current = window.setTimeout(() => {
+              phaseTimerRef.current = null;
+              startWave();
+            }, heroPhaseDuration);
+          } else {
+            startWave();
+          }
+        }
+        const wavePhaseDuration =
+          waveElements.length > 0 ? FLIP_WAVE_DURATION_MS + maxWaveDelay : 0;
+        scheduleCleanup(heroPhaseDuration + wavePhaseDuration);
+        return;
+      }
+
+      heroElements.forEach(({ element }) => {
+        element.style.transition = FLIP_HERO_TRANSITION;
+        element.style.translate = "0 0";
+      });
+      startWave();
+      const heroDuration = heroElements.length > 0 ? FLIP_HERO_DURATION_MS : 0;
+      const waveDuration = waveElements.length > 0 ? FLIP_WAVE_DURATION_MS + maxWaveDelay : 0;
+      scheduleCleanup(Math.max(heroDuration, waveDuration));
+    });
+  });
+
+  useLayoutEffect(
+    () => () => {
+      clearAnimation();
+      previousRectsRef.current.clear();
+      previousOrderRef.current = [];
+      pendingRequestRef.current = null;
+    },
+    [clearAnimation],
+  );
+
+  return { captureVisibleKey, gridRef, requestFlip };
+}
+
 type SkillsHubPageProps = {
   settings: AppSettings;
   setSettings: (updater: (prev: AppSettings) => AppSettings) => void;
@@ -357,11 +625,19 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
   const lockedByChatMode = !isAgentMode;
 
   const [skills, setSkills] = useState<SkillSummary[]>(initialSkills ?? []);
+  const {
+    captureVisibleKey: captureInstalledFlipKey,
+    gridRef: installedGridRef,
+    requestFlip: requestInstalledFlip,
+  } = useFlipGrid();
   const [rootDir, setRootDir] = useState(initialRootDir ?? "");
   const [loading, setLoading] = useState(false);
   const [loadError, setLoadError] = useState<string | null>(null);
   const [filter, setFilter] = useState("");
   const [view, setView] = useState<SkillsHubView>("installed");
+  const [installedSort, setInstalledSort] = useState<InstalledSkillSort>(
+    readInstalledSortPreference,
+  );
   const [storeQuery, setStoreQuery] = useState("");
   const [storeSort, setStoreSort] = useState<ClawHubSort>("downloads");
   const [storeItems, setStoreItems] = useState<ClawHubSkillCard[]>([]);
@@ -464,8 +740,23 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
     [settings.skills.selected],
   );
   const selectableSkills = useMemo(() => skills.filter(isUserSelectableSkill), [skills]);
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(INSTALLED_SORT_STORAGE_KEY, installedSort);
+    } catch {
+      // The preference is non-critical when storage is unavailable.
+    }
+  }, [installedSort]);
   const selectedCount = selectableSkills.filter((skill) => selected.has(skill.name)).length;
   const installedSkillNames = useMemo(() => new Set(skills.map((skill) => skill.name)), [skills]);
+  const requestInstalledSkillFlip = useCallback(
+    (mode: FlipMode, names: readonly string[], followNames: readonly string[] = names) => {
+      const keys = names.map((name) => `${name}-${rootDir}`);
+      const followKeys = followNames.map((name) => `${name}-${rootDir}`);
+      requestInstalledFlip(mode, keys, followKeys);
+    },
+    [requestInstalledFlip, rootDir],
+  );
 
   const filtered = useMemo(() => {
     const text = filter.trim().toLowerCase();
@@ -476,9 +767,14 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
     );
   }, [filter, skills]);
 
+  const sortedFiltered = useMemo(
+    () => sortInstalledSkillItems(filtered, installedSort, selected, (skill) => skill),
+    [filtered, installedSort, selected],
+  );
   const filteredSelectableInstalledNames = useMemo(
-    () => filtered.map((skill) => skill.name).filter((name) => !isAlwaysEnabledSkillName(name)),
-    [filtered],
+    () =>
+      sortedFiltered.map((skill) => skill.name).filter((name) => !isAlwaysEnabledSkillName(name)),
+    [sortedFiltered],
   );
 
   useEffect(() => {
@@ -1040,6 +1336,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
     const next = new Set(settings.skills.selected);
     if (on) next.add(name);
     else next.delete(name);
+    requestInstalledSkillFlip("single", [name], on ? [name] : []);
     setSettings((prev) => updateSkills(prev, { selected: Array.from(next) }));
   }
 
@@ -1131,11 +1428,13 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
 
       const before = settings.skills.selected;
       const current = new Set(before);
-      const changed = names.filter((name) =>
+      const changedNames = names.filter((name) =>
         target ? !current.has(name) : current.has(name),
-      ).length;
+      );
+      const changed = changedNames.length;
       if (changed === 0) return;
 
+      requestInstalledSkillFlip("batch", changedNames, target ? changedNames : []);
       clearBulkUndoTimer();
       setBulkUndo({ selected: before, count: changed });
       bulkUndoTimerRef.current = window.setTimeout(() => {
@@ -1156,17 +1455,36 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
         });
       });
     },
-    [bulkSelection, clearBulkUndoTimer, setSettings, settings.skills.selected],
+    [
+      bulkSelection,
+      clearBulkUndoTimer,
+      requestInstalledSkillFlip,
+      setSettings,
+      settings.skills.selected,
+    ],
   );
 
   const undoBulkSelection = useCallback(() => {
     clearBulkUndoTimer();
     if (bulkUndo) {
       const restore = bulkUndo.selected;
+      const current = new Set(settings.skills.selected);
+      const restoreSet = new Set(restore);
+      const changedNames = [...new Set([...current, ...restoreSet])].filter(
+        (name) => !isAlwaysEnabledSkillName(name) && current.has(name) !== restoreSet.has(name),
+      );
+      const followNames = changedNames.filter((name) => restoreSet.has(name) && !current.has(name));
+      requestInstalledSkillFlip("batch", changedNames, followNames);
       setSettings((prev) => updateSkills(prev, { selected: restore }));
     }
     setBulkUndo(null);
-  }, [bulkUndo, clearBulkUndoTimer, setSettings]);
+  }, [
+    bulkUndo,
+    clearBulkUndoTimer,
+    requestInstalledSkillFlip,
+    setSettings,
+    settings.skills.selected,
+  ]);
 
   async function deleteBulkSelectedInstalledSkills() {
     if (lockedByChatMode || deletingSkillName || !bulkMode) return;
@@ -1480,8 +1798,8 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
               </div>
             </div>
 
-            <div className="hub-panel-enter flex items-center justify-between gap-3">
-              <div className="inline-flex shrink-0 rounded-2xl border border-border/40 bg-background/60 p-1 backdrop-blur-xl shadow-[0_1px_0_rgba(255,255,255,0.5)_inset] dark:border-white/[0.06] dark:bg-white/[0.04] dark:shadow-[0_1px_0_rgba(255,255,255,0.04)_inset]">
+            <div className="hub-panel-enter flex items-center justify-between gap-3 max-sm:flex-col max-sm:items-stretch max-sm:gap-2">
+              <div className="inline-flex shrink-0 rounded-2xl border border-border/40 bg-background/60 p-1 backdrop-blur-xl shadow-[0_1px_0_rgba(255,255,255,0.5)_inset] max-sm:max-w-full max-sm:overflow-x-auto max-sm:[scrollbar-width:none] max-sm:[&::-webkit-scrollbar]:hidden dark:border-white/[0.06] dark:bg-white/[0.04] dark:shadow-[0_1px_0_rgba(255,255,255,0.04)_inset]">
                 {[
                   {
                     value: "installed" as const,
@@ -1510,7 +1828,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                       type="button"
                       onClick={() => setView(item.value)}
                       className={cn(
-                        "relative inline-flex h-9 items-center justify-center gap-2 rounded-xl px-4 text-[12.5px] font-medium transition-all",
+                        "relative inline-flex h-9 items-center justify-center gap-2 rounded-xl px-4 text-[12.5px] font-medium transition-all max-sm:shrink-0",
                         active
                           ? "bg-background/85 text-foreground shadow-[0_1px_0_rgba(255,255,255,0.6)_inset,0_4px_12px_-8px_rgba(15,23,42,0.18)] ring-1 ring-border/45 dark:bg-white/[0.08] dark:ring-white/[0.09] dark:shadow-[0_1px_0_rgba(255,255,255,0.07)_inset,0_4px_12px_-8px_rgba(0,0,0,0.55)]"
                           : "text-muted-foreground hover:bg-background/70 hover:text-foreground",
@@ -1551,7 +1869,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                           : t("settings.skillsBulkImportHint")
                       }
                       className={cn(
-                        "inline-flex h-10 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-xl border px-3.5 text-[12.5px] font-medium backdrop-blur-xl transition-all",
+                        "inline-flex h-10 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-xl border px-3.5 text-[12.5px] font-medium backdrop-blur-xl transition-all max-sm:px-2.5",
                         bulkMode
                           ? "border-primary/50 bg-primary/10 text-foreground shadow-[0_1px_0_rgba(255,255,255,0.6)_inset,0_4px_12px_-8px_rgba(15,23,42,0.18)] ring-1 ring-primary/30 dark:border-primary/40 dark:bg-primary/15"
                           : "border-border/40 bg-background/60 text-muted-foreground hover:bg-background/80 hover:text-foreground dark:border-white/[0.06] dark:bg-white/[0.04]",
@@ -1563,7 +1881,32 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                       </span>
                     </button>
                   ) : null}
-                  <div className="relative w-full min-w-0 max-w-md">
+                  {view === "installed" ? (
+                    <select
+                      value={installedSort}
+                      onChange={(event) => {
+                        const value = event.currentTarget.value;
+                        if (!isInstalledSkillSort(value) || value === installedSort) return;
+                        const followKey = captureInstalledFlipKey();
+                        requestInstalledFlip("wave", [], followKey ? [followKey] : []);
+                        setInstalledSort(value);
+                      }}
+                      aria-label={t("settings.skillsInstalledSortLabel")}
+                      title={t("settings.skillsInstalledSortLabel")}
+                      className="h-10 max-w-[11rem] shrink-0 cursor-pointer rounded-xl border border-border/40 bg-background/95 px-3 text-[12.5px] font-medium text-foreground outline-hidden [color-scheme:light] transition-all hover:bg-background focus:border-border/60 focus:ring-2 focus:ring-foreground/10 max-sm:max-w-[7.5rem] max-sm:px-2 dark:border-white/[0.06] dark:bg-popover/95 dark:[color-scheme:dark]"
+                    >
+                      {INSTALLED_SORT_OPTIONS.map((option) => (
+                        <option
+                          key={option.value}
+                          value={option.value}
+                          className="bg-background text-foreground"
+                        >
+                          {t(option.labelKey)}
+                        </option>
+                      ))}
+                    </select>
+                  ) : null}
+                  <div className="relative w-full min-w-0 max-w-md max-sm:flex-1">
                     <Search className="absolute left-3.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
                     <input
                       type="text"
@@ -1587,7 +1930,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                             ? t("settings.skillsStoreSearch")
                             : t("settings.skillsImportSearchPlaceholder")
                       }
-                      className="h-10 w-full rounded-xl border border-border/40 bg-background/60 pl-10 pr-3 text-[13px] outline-hidden backdrop-blur-xl transition-all placeholder:text-muted-foreground/60 focus:border-border/60 focus:bg-background/85 focus:ring-2 focus:ring-foreground/10"
+                      className="h-10 w-full rounded-xl border border-border/40 bg-background/95 pl-10 pr-3 text-[13px] outline-hidden transition-all placeholder:text-muted-foreground/60 focus:border-border/60 focus:bg-background focus:ring-2 focus:ring-foreground/10 dark:bg-popover/95"
                     />
                   </div>
                 </div>
@@ -1606,432 +1949,447 @@ 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}
-
-                    {!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}
+              ) : (
+                <>
+                  {view === "installed" ? (
+                    <div
+                      className={cn(
+                        "h-full min-h-0 overflow-y-auto px-0.5 pr-1 pt-1.5 [overflow-anchor:none]",
+                        bulkMode ? "pb-[calc(10rem+env(safe-area-inset-bottom))] sm: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}
 
-                    {!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}
+                        {!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 ? (
-                      <>
-                        <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")}
+                        {!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="mt-0.5 truncate text-[11px] text-muted-foreground/80">
-                                {t("settings.skillsHubScanning")}
+                              <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>
-                          </div>
-                          <div className="hub-frost-track mt-3.5" />
-                        </div>
+                          </GlassPanel>
+                        ) : 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" />
+                        {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>
                               </div>
+                              <div className="hub-frost-track mt-3.5" />
                             </div>
-                          ))}
-                        </div>
-                      </>
-                    ) : null}
 
-                    {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 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>
+                          </>
+                        ) : null}
 
-                                  {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 ? (
+                        {sortedFiltered.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
+                              ref={installedGridRef}
+                              className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+                            >
+                              {sortedFiltered.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="flex shrink-0 items-center"
-                                        title={t("settings.skillsBulkAlwaysOnDisabled")}
+                                        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",
+                                        )}
                                       >
-                                        <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"
+                                        <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")}
                                         >
                                           <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")}
+                                          <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()}
                                         >
-                                          <input
-                                            type="checkbox"
-                                            checked={bulkSelection.has(skill.name)}
+                                          <button
+                                            type="button"
                                             aria-label={`${t("settings.skillsHubBulkSelectLabel")}: ${skill.name}`}
-                                            onClick={(event) => event.stopPropagation()}
-                                            onChange={(event) => {
+                                            title={t("settings.skillsHubBulkSelect")}
+                                            onClick={(event) => {
                                               event.stopPropagation();
-                                              toggleBulkSelectionName(skill.name);
+                                              enterBulkMode(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",
+                                              // 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",
                                             )}
                                           >
-                                            {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) => (
+                                            <span className="h-2 w-2 rounded-full border border-current opacity-40" />
+                                          </button>
                                           <button
                                             type="button"
-                                            disabled={deleteDisabled}
+                                            role="switch"
+                                            aria-checked={checked}
+                                            aria-label={`${t("skills.select")}: ${skill.name}`}
+                                            title={
+                                              checked
+                                                ? t("settings.skillsHubToggleDisable")
+                                                : t("settings.skillsHubToggleEnable")
+                                            }
                                             onClick={(event) => {
                                               event.stopPropagation();
-                                              open();
+                                              toggleSkill(skill.name, !checked);
                                             }}
                                             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",
-                                                  ),
+                                              "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",
                                             )}
-                                            title={t("settings.skillsHubDeleteSkill")}
                                           >
-                                            {deleting ? (
-                                              <Loader2 className="h-3.5 w-3.5 animate-spin" />
-                                            ) : (
-                                              <Trash2 className="h-3.5 w-3.5" />
-                                            )}
+                                            <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>
-                                        )}
-                                      </ConfirmDeletePopover>
+                                        </div>
+                                      )}
                                     </div>
-                                  ) : 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>
-                              );
-                            }
+                                    <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>
 
-                            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}
+                                    <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>
+                                            )}
+                                          </ConfirmDeletePopover>
+                                        </div>
+                                      ) : null}
+                                    </div>
+                                  </>
+                                );
+
+                                const key = `${skill.name}-${rootDir}`;
+                                if (alwaysEnabled) {
+                                  return (
+                                    <button
+                                      key={key}
+                                      data-flip-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}
-                  </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()}
-                />
+                                return (
+                                  // biome-ignore lint/a11y/useSemanticElements: The card contains nested controls and cannot be a native button.
+                                  <div
+                                    key={key}
+                                    data-flip-key={key}
+                                    role="button"
+                                    tabIndex={0}
+                                    aria-label={`${t("settings.skillsInstalledPreviewOpen")}: ${skill.name}`}
+                                    onClick={(event) => {
+                                      if (bulkMode) {
+                                        handleBulkInstalledCardClick(
+                                          skill.name,
+                                          sortedFiltered.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,
+                                          sortedFiltered.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}
+
+                        {filter.trim() && sortedFiltered.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>
@@ -2054,8 +2412,8 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
       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]">
+        <div className="pointer-events-none absolute inset-x-0 bottom-4 z-20 flex justify-center px-3 max-sm:bottom-[calc(1rem+env(safe-area-inset-bottom))]">
+          <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/95 py-2 pl-4 pr-2 text-[12.5px] shadow-[0_8px_24px_-12px_rgba(15,23,42,0.35)] max-sm:justify-center max-sm:rounded-3xl max-sm:whitespace-nowrap dark:border-white/[0.1] dark:bg-popover/95">
             {bulkSelection.size > 0 ? (
               <>
                 <span className="whitespace-nowrap text-foreground/85">
@@ -2067,7 +2425,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                     ? ` ${t("settings.skillsBulkNotInFilter").replace("{count}", String(bulkSelectedHiddenCount))}`
                     : ""}
                 </span>
-                <span className="text-muted-foreground/50" aria-hidden="true">
+                <span className="hidden text-muted-foreground/50 sm:inline" aria-hidden="true">
                   │
                 </span>
                 <button
@@ -2087,7 +2445,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                 >
                   {t("settings.skillsBulkClear")}
                 </button>
-                <span className="text-muted-foreground/50" aria-hidden="true">
+                <span className="hidden text-muted-foreground/50 sm:inline" aria-hidden="true">
                   │
                 </span>
                 <button
@@ -2152,8 +2510,8 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
       ) : null}
 
       {bulkUndo && bulkSelection.size === 0 ? (
-        <div className="pointer-events-none absolute inset-x-0 bottom-4 z-20 flex justify-center">
-          <div className="hub-panel-enter pointer-events-auto flex items-center gap-3 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]">
+        <div className="pointer-events-none absolute inset-x-0 bottom-4 z-20 flex justify-center px-3 max-sm:bottom-[calc(1rem+env(safe-area-inset-bottom))]">
+          <div className="hub-panel-enter pointer-events-auto flex max-w-full flex-wrap items-center justify-center gap-3 rounded-full border border-border/50 bg-background/95 py-2 pl-4 pr-2 text-[12.5px] shadow-[0_8px_24px_-12px_rgba(15,23,42,0.35)] dark:border-white/[0.1] dark:bg-popover/95">
             <span className="text-foreground/85">
               {t("settings.skillsBulkUpdated").replace("{count}", String(bulkUndo.count))}
             </span>
@@ -2273,12 +2631,12 @@ function SkillsImportView(props: {
     <div
       className={cn(
         "relative h-full min-h-0 overflow-y-auto px-0.5 pr-1 pt-1.5",
-        bulkMode ? "pb-24" : "pb-4",
+        bulkMode ? "pb-[calc(8rem+env(safe-area-inset-bottom))] sm:pb-24" : "pb-4",
       )}
     >
       {importToast ? (
         <div className="pointer-events-none sticky top-2 z-[80] flex justify-end px-1">
-          <div className="notify-toast-enter pointer-events-auto flex max-w-sm items-start gap-2.5 rounded-lg border border-amber-500/30 bg-amber-50/95 px-3 py-2.5 text-sm shadow-lg backdrop-blur-xl dark:border-amber-500/25 dark:bg-amber-950/80">
+          <div className="notify-toast-enter pointer-events-auto flex max-w-sm items-start gap-2.5 rounded-lg border border-amber-500/30 bg-amber-50 px-3 py-2.5 text-sm shadow-lg dark:border-amber-500/25 dark:bg-amber-950">
             <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-600 dark:text-amber-400" />
             <p className="min-w-0 flex-1 leading-relaxed text-amber-800 dark:text-amber-200">
               {importToast}
@@ -2586,8 +2944,8 @@ function SkillsImportView(props: {
       </div>
 
       {bulkMode ? (
-        <div className="pointer-events-none sticky bottom-3 z-20 flex justify-center px-1 pt-2">
-          <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]">
+        <div className="pointer-events-none sticky bottom-3 z-20 flex justify-center px-1 pt-2 max-sm:bottom-[calc(0.75rem+env(safe-area-inset-bottom))]">
+          <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/95 py-2 pl-4 pr-2 text-[12.5px] shadow-[0_8px_24px_-12px_rgba(15,23,42,0.35)] max-sm:justify-center max-sm:rounded-3xl max-sm:whitespace-nowrap dark:border-white/[0.1] dark:bg-popover/95">
             {importableSelectedCount > 0 || importing ? (
               <>
                 <span className="whitespace-nowrap text-foreground/85">
@@ -2596,7 +2954,7 @@ function SkillsImportView(props: {
                     String(importableSelectedCount),
                   )}
                 </span>
-                <span className="text-muted-foreground/50" aria-hidden="true">
+                <span className="hidden text-muted-foreground/50 sm:inline" aria-hidden="true">
                   │
                 </span>
                 <button
@@ -2668,7 +3026,7 @@ function InstalledSkillPreviewDrawer(props: {
   return createPortal(
     <div
       className={cn(
-        "fixed inset-0 z-50 flex justify-end bg-background/35 backdrop-blur-[2px]",
+        "fixed inset-0 z-50 flex justify-end bg-background/55",
         closing ? "skills-drawer-backdrop-closing" : "skills-drawer-backdrop",
       )}
       role="dialog"
@@ -2681,7 +3039,7 @@ function InstalledSkillPreviewDrawer(props: {
     >
       <aside
         className={cn(
-          "flex h-full w-full flex-col border-l border-border/45 bg-background/95 shadow-[-18px_0_45px_-28px_rgba(15,23,42,0.45)] dark:border-white/[0.08] dark:bg-popover/95 dark:shadow-[-18px_0_45px_-28px_rgba(0,0,0,0.7)] backdrop-blur-xl md:w-2/5 md:max-w-[34rem]",
+          "flex h-full w-full flex-col border-l border-border/45 bg-background shadow-[-18px_0_45px_-28px_rgba(15,23,42,0.45)] dark:border-white/[0.08] dark:bg-popover dark:shadow-[-18px_0_45px_-28px_rgba(0,0,0,0.7)] md:w-2/5 md:max-w-[34rem]",
           closing ? "skills-drawer-panel-closing" : "skills-drawer-panel",
         )}
       >
@@ -3400,7 +3758,7 @@ function SkillsStorePreviewDrawer(props: {
   return createPortal(
     <div
       className={cn(
-        "fixed inset-0 z-50 flex justify-end bg-background/35 backdrop-blur-[2px]",
+        "fixed inset-0 z-50 flex justify-end bg-background/55",
         closing ? "skills-drawer-backdrop-closing" : "skills-drawer-backdrop",
       )}
       role="dialog"
@@ -3413,7 +3771,7 @@ function SkillsStorePreviewDrawer(props: {
     >
       <aside
         className={cn(
-          "flex h-full w-full flex-col border-l border-border/45 bg-background/95 shadow-[-18px_0_45px_-28px_rgba(15,23,42,0.45)] dark:border-white/[0.08] dark:bg-popover/95 dark:shadow-[-18px_0_45px_-28px_rgba(0,0,0,0.7)] backdrop-blur-xl md:w-2/5 md:max-w-[34rem]",
+          "flex h-full w-full flex-col border-l border-border/45 bg-background shadow-[-18px_0_45px_-28px_rgba(15,23,42,0.45)] dark:border-white/[0.08] dark:bg-popover dark:shadow-[-18px_0_45px_-28px_rgba(0,0,0,0.7)] md:w-2/5 md:max-w-[34rem]",
           closing ? "skills-drawer-panel-closing" : "skills-drawer-panel",
         )}
       >
diff --git a/crates/agent-gui/src-tauri/src/services/skills/library.rs b/crates/agent-gui/src-tauri/src/services/skills/library.rs
index 71b70444e..a94e76040 100644
--- a/crates/agent-gui/src-tauri/src/services/skills/library.rs
+++ b/crates/agent-gui/src-tauri/src/services/skills/library.rs
@@ -4,6 +4,7 @@ use serde_json::Value;
 use std::fs;
 use std::io::{self, BufRead, BufReader};
 use std::path::{Component, Path, PathBuf};
+use std::time::UNIX_EPOCH;
 use walkdir::WalkDir;
 use zip::write::SimpleFileOptions;
 use zip::{CompressionMethod, ZipWriter};
@@ -291,6 +292,11 @@ pub(crate) fn skill_summary_from_dir(
         skill_file,
         base_dir,
         built_in,
+        installed_at: fs::metadata(skill_dir)
+            .ok()
+            .and_then(|metadata| metadata.created().or_else(|_| metadata.modified()).ok())
+            .and_then(|time| time.duration_since(UNIX_EPOCH).ok())
+            .and_then(|duration| u64::try_from(duration.as_millis()).ok()),
         source: read_skill_source_metadata(skill_dir),
     })
 }
diff --git a/crates/agent-gui/src-tauri/src/services/skills/tests.rs b/crates/agent-gui/src-tauri/src/services/skills/tests.rs
index 52a2b0721..fa6cdf037 100644
--- a/crates/agent-gui/src-tauri/src/services/skills/tests.rs
+++ b/crates/agent-gui/src-tauri/src/services/skills/tests.rs
@@ -4,6 +4,7 @@ use std::collections::HashMap;
 use std::fs;
 use std::io::Write;
 use std::path::{Path, PathBuf};
+use std::time::{SystemTime, UNIX_EPOCH};
 use zip::write::SimpleFileOptions;
 use zip::{CompressionMethod, ZipWriter};
 
@@ -405,6 +406,23 @@ fn list_installed_skills_skips_hidden_backup_dirs() {
     );
 }
 
+#[test]
+fn list_installed_skills_reports_install_timestamp() {
+    let tmp = TempDir::new("liveagent-skill-installed-at-test").expect("temp dir");
+    let root = tmp.path().join("skills");
+    write_skill(&root, "timestamped-skill", "Timestamped");
+
+    let (skills, invalid) = list_installed_skills(&root).expect("list skills");
+
+    assert!(invalid.is_empty(), "{invalid:?}");
+    let installed_at = skills[0].installed_at.expect("installed timestamp");
+    let now = SystemTime::now()
+        .duration_since(UNIX_EPOCH)
+        .expect("system time after epoch");
+    let now_millis = u64::try_from(now.as_millis()).expect("current time fits u64");
+    assert!(installed_at <= now_millis);
+}
+
 #[test]
 fn install_source_from_local_skill_archive_installs_skill() {
     let tmp = TempDir::new("liveagent-skill-archive-install-test").expect("temp dir");
diff --git a/crates/agent-gui/src-tauri/src/services/skills/types.rs b/crates/agent-gui/src-tauri/src/services/skills/types.rs
index 2773ca693..9f276a59d 100644
--- a/crates/agent-gui/src-tauri/src/services/skills/types.rs
+++ b/crates/agent-gui/src-tauri/src/services/skills/types.rs
@@ -62,6 +62,7 @@ pub struct SystemSkillSummary {
     pub skill_file: String,
     pub base_dir: String,
     pub built_in: bool,
+    pub installed_at: Option<u64>,
     pub source: Option<SystemSkillSourceMetadata>,
 }
 
diff --git a/crates/agent-gui/src/i18n/config.ts b/crates/agent-gui/src/i18n/config.ts
index 72df5f3bc..5899713c8 100644
--- a/crates/agent-gui/src/i18n/config.ts
+++ b/crates/agent-gui/src/i18n/config.ts
@@ -1797,6 +1797,10 @@ export const translations: Record<Locale, Record<string, string>> = {
       "在应用 Skills 目录中添加 skill.json、SKILL.md 或 README.md 文件",
     "settings.skillsRescan": "重新扫描",
     "settings.skillsSearch": "搜索技能...",
+    "settings.skillsInstalledSortLabel": "已安装技能排序",
+    "settings.skillsInstalledSortNameAsc": "名称 A→Z",
+    "settings.skillsInstalledSortNameDesc": "名称 Z→A",
+    "settings.skillsInstalledSortNewest": "安装时间 新→旧",
     "settings.skillsNoMatch": "没有匹配「{filter}」的技能",
     "settings.skillsStoreSearch": "搜索 ClawHub 技能",
     "settings.skillsBulkSelect": "批量选择",
@@ -3808,6 +3812,10 @@ export const translations: Record<Locale, Record<string, string>> = {
       "Add skill.json, SKILL.md, or README.md files to the Skills directory",
     "settings.skillsRescan": "Rescan",
     "settings.skillsSearch": "Search Skills...",
+    "settings.skillsInstalledSortLabel": "Sort installed skills",
+    "settings.skillsInstalledSortNameAsc": "Name A→Z",
+    "settings.skillsInstalledSortNameDesc": "Name Z→A",
+    "settings.skillsInstalledSortNewest": "Installation time: newest first",
     "settings.skillsNoMatch": 'No skills matching "{filter}"',
     "settings.skillsStoreSearch": "Search ClawHub Skills",
     "settings.skillsBulkSelect": "Bulk Select",
diff --git a/crates/agent-gui/src/lib/skills/index.ts b/crates/agent-gui/src/lib/skills/index.ts
index 3e8cda8c5..6bd490953 100644
--- a/crates/agent-gui/src/lib/skills/index.ts
+++ b/crates/agent-gui/src/lib/skills/index.ts
@@ -24,6 +24,8 @@ export type SkillSummary = {
   baseDir: string;
   /** true only when the backend verified LiveAgent ownership metadata */
   builtIn?: boolean;
+  /** skill directory creation/modification time in epoch milliseconds */
+  installedAt?: number | null;
   /** full README.md content for fallback skills that do not declare metadata */
   inlineContent?: string;
   inlineContentTruncated?: boolean;
@@ -123,6 +125,7 @@ type SystemManageSkillResponse = {
     skillFile: string;
     baseDir: string;
     builtIn?: boolean;
+    installedAt?: number | null;
     source?: SkillSourceMetadata | null;
   }> | null;
   invalid?: Array<{ path: string; error: string }> | null;
@@ -445,6 +448,10 @@ async function managedSkillListToDiscovery(
         skillFile,
         baseDir,
         builtIn: raw.builtIn === true,
+        installedAt:
+          typeof raw.installedAt === "number" && Number.isFinite(raw.installedAt)
+            ? raw.installedAt
+            : null,
         source: normalizeSkillSourceMetadata(raw.source),
       }),
     );
diff --git a/crates/agent-gui/src/lib/skills/installedSort.ts b/crates/agent-gui/src/lib/skills/installedSort.ts
new file mode 100644
index 000000000..29f8f0115
--- /dev/null
+++ b/crates/agent-gui/src/lib/skills/installedSort.ts
@@ -0,0 +1,59 @@
+import { isAlwaysEnabledSkillName } from "./builtin";
+import type { SkillSummary } from "./index";
+
+export type InstalledSkillSort = "name-asc" | "name-desc" | "installed-desc";
+
+export const DEFAULT_INSTALLED_SKILL_SORT: InstalledSkillSort = "name-asc";
+
+export function isInstalledSkillSort(value: unknown): value is InstalledSkillSort {
+  return value === "name-asc" || value === "name-desc" || value === "installed-desc";
+}
+
+function installedAtValue(skill: SkillSummary) {
+  return typeof skill.installedAt === "number" && Number.isFinite(skill.installedAt)
+    ? skill.installedAt
+    : null;
+}
+
+export function sortInstalledSkillItems<T>(
+  items: readonly T[],
+  sort: InstalledSkillSort,
+  selectedNames: ReadonlySet<string>,
+  getSkill: (item: T) => SkillSummary,
+): T[] {
+  return [...items].sort((left, right) => {
+    const leftSkill = getSkill(left);
+    const rightSkill = getSkill(right);
+    const leftRank = isAlwaysEnabledSkillName(leftSkill.name)
+      ? 0
+      : selectedNames.has(leftSkill.name)
+        ? 1
+        : 2;
+    const rightRank = isAlwaysEnabledSkillName(rightSkill.name)
+      ? 0
+      : selectedNames.has(rightSkill.name)
+        ? 1
+        : 2;
+
+    if (leftRank !== rightRank) {
+      return leftRank - rightRank;
+    }
+
+    if (sort === "installed-desc") {
+      const leftInstalledAt = installedAtValue(leftSkill);
+      const rightInstalledAt = installedAtValue(rightSkill);
+      if (leftInstalledAt !== null || rightInstalledAt !== null) {
+        if (leftInstalledAt === null) return 1;
+        if (rightInstalledAt === null) return -1;
+        if (leftInstalledAt !== rightInstalledAt) return rightInstalledAt - leftInstalledAt;
+      }
+    }
+
+    const nameOrder = leftSkill.name.localeCompare(rightSkill.name);
+    if (nameOrder !== 0) {
+      return sort === "name-desc" ? -nameOrder : nameOrder;
+    }
+
+    return leftSkill.baseDir.localeCompare(rightSkill.baseDir);
+  });
+}
diff --git a/crates/agent-gui/src/pages/skills-hub/SkillsHubPage.tsx b/crates/agent-gui/src/pages/skills-hub/SkillsHubPage.tsx
index 8feac8956..1bb645743 100644
--- a/crates/agent-gui/src/pages/skills-hub/SkillsHubPage.tsx
+++ b/crates/agent-gui/src/pages/skills-hub/SkillsHubPage.tsx
@@ -1,4 +1,12 @@
-import { type KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  type KeyboardEvent,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { createPortal } from "react-dom";
 import { GlassPanel, HubBackdrop, HubHeader } from "../../components/hub/HubChrome";
 import {
@@ -77,6 +85,12 @@ import {
   type ClawHubCategorySlug,
   classifyClawHubSkill,
 } from "../../lib/skills/clawHubCategories";
+import {
+  DEFAULT_INSTALLED_SKILL_SORT,
+  type InstalledSkillSort,
+  isInstalledSkillSort,
+  sortInstalledSkillItems,
+} from "../../lib/skills/installedSort";
 
 type SkillsHubView = "installed" | "store" | "import";
 
@@ -98,6 +112,12 @@ const STORE_SORT_OPTIONS: Array<{ value: ClawHubSort; labelKey: string }> = [
   { value: "newest", labelKey: "settings.skillsStoreSortNewest" },
 ];
 
+const INSTALLED_SORT_OPTIONS: Array<{ value: InstalledSkillSort; labelKey: string }> = [
+  { value: "name-asc", labelKey: "settings.skillsInstalledSortNameAsc" },
+  { value: "name-desc", labelKey: "settings.skillsInstalledSortNameDesc" },
+  { value: "installed-desc", labelKey: "settings.skillsInstalledSortNewest" },
+];
+
 type StoreCategoryValue = "all" | ClawHubCategorySlug;
 
 // 图标与 ClawHub 官网分类侧边栏一一对应（layers/plug/zap/globe/wrench/…）。
@@ -383,6 +403,7 @@ function buildSkillDiscoverySignature(rootDir: string, skills: SkillSummary[]) {
           skill.skillFile,
           skill.source?.registry ?? "",
           skill.source?.slug ?? "",
+          skill.installedAt ?? "",
           skill.source?.version ?? "",
         ].join("\0"),
       )
@@ -390,6 +411,254 @@ function buildSkillDiscoverySignature(rootDir: string, skills: SkillSummary[]) {
   ].join("\n");
 }
 
+const INSTALLED_SORT_STORAGE_KEY = "skillsHub.installedSort";
+const FLIP_HERO_DURATION_MS = 380;
+const FLIP_BATCH_HERO_DELAY_MS = 90;
+const FLIP_BATCH_STAGGER_LIMIT = 8;
+const FLIP_WAVE_DURATION_MS = 280;
+const FLIP_WAVE_DELAY_MS = 30;
+const FLIP_WAVE_MAX_DELAY_MS = 400;
+const FLIP_HERO_TRANSITION = `translate ${FLIP_HERO_DURATION_MS}ms cubic-bezier(0.34, 1.3, 0.64, 1)`;
+const FLIP_WAVE_TRANSITION = `translate ${FLIP_WAVE_DURATION_MS}ms cubic-bezier(0.16, 1, 0.3, 1)`;
+
+type FlipMode = "single" | "wave" | "batch";
+type FlipPosition = { left: number; top: number };
+type FlipRequest = {
+  mode: FlipMode;
+  heroKeys: ReadonlySet<string>;
+  followKeys: ReadonlySet<string>;
+};
+
+function readInstalledSortPreference(): InstalledSkillSort {
+  if (typeof window === "undefined") return DEFAULT_INSTALLED_SKILL_SORT;
+  try {
+    const stored = window.localStorage.getItem(INSTALLED_SORT_STORAGE_KEY);
+    return isInstalledSkillSort(stored) ? stored : DEFAULT_INSTALLED_SKILL_SORT;
+  } catch {
+    return DEFAULT_INSTALLED_SKILL_SORT;
+  }
+}
+
+function resetFlipStyles(element: HTMLElement) {
+  element.style.transition = "";
+  element.style.translate = "";
+  element.style.willChange = "";
+  element.style.zIndex = "";
+}
+
+function useFlipGrid() {
+  const gridRef = useRef<HTMLDivElement>(null);
+  const previousRectsRef = useRef<Map<string, FlipPosition>>(new Map());
+  const previousOrderRef = useRef<string[]>([]);
+  const pendingRequestRef = useRef<FlipRequest | null>(null);
+  const frameRef = useRef<number | null>(null);
+  const phaseTimerRef = useRef<number | null>(null);
+  const cleanupTimerRef = useRef<number | null>(null);
+  const activeElementsRef = useRef<HTMLElement[]>([]);
+
+  const requestFlip = useCallback(
+    (mode: FlipMode, heroKeys: readonly string[], followKeys: readonly string[] = heroKeys) => {
+      pendingRequestRef.current = {
+        mode,
+        heroKeys: new Set(heroKeys),
+        followKeys: new Set(followKeys),
+      };
+    },
+    [],
+  );
+
+  const captureVisibleKey = useCallback(() => {
+    const grid = gridRef.current;
+    if (!grid) return null;
+    let scrollParent = grid.parentElement;
+    while (scrollParent) {
+      const overflowY = window.getComputedStyle(scrollParent).overflowY;
+      if (/auto|scroll|overlay/.test(overflowY)) break;
+      scrollParent = scrollParent.parentElement;
+    }
+    const viewport = scrollParent?.getBoundingClientRect();
+    const viewportTop = viewport?.top ?? 0;
+    const viewportBottom = viewport?.bottom ?? window.innerHeight;
+    const elements = grid.querySelectorAll<HTMLElement>("[data-flip-key]");
+    for (const element of elements) {
+      const rect = element.getBoundingClientRect();
+      if (rect.bottom > viewportTop && rect.top < viewportBottom) {
+        return element.dataset.flipKey ?? null;
+      }
+    }
+    return null;
+  }, []);
+
+  const clearAnimation = useCallback(() => {
+    if (frameRef.current !== null) {
+      window.cancelAnimationFrame(frameRef.current);
+      frameRef.current = null;
+    }
+    if (phaseTimerRef.current !== null) {
+      window.clearTimeout(phaseTimerRef.current);
+      phaseTimerRef.current = null;
+    }
+    if (cleanupTimerRef.current !== null) {
+      window.clearTimeout(cleanupTimerRef.current);
+      cleanupTimerRef.current = null;
+    }
+    for (const element of activeElementsRef.current) {
+      resetFlipStyles(element);
+    }
+    activeElementsRef.current = [];
+  }, []);
+
+  useLayoutEffect(() => {
+    clearAnimation();
+    const grid = gridRef.current;
+    if (!grid) {
+      previousRectsRef.current.clear();
+      previousOrderRef.current = [];
+      pendingRequestRef.current = null;
+      return;
+    }
+
+    const elements = Array.from(grid.querySelectorAll<HTMLElement>("[data-flip-key]"));
+    const nextOrder = elements.map((element) => element.dataset.flipKey ?? "");
+    const request = pendingRequestRef.current;
+    pendingRequestRef.current = null;
+    const reducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+    const followElement = request
+      ? elements.find((element) => {
+          const key = element.dataset.flipKey;
+          return key ? request.followKeys.has(key) : false;
+        })
+      : undefined;
+
+    followElement?.scrollIntoView({
+      block: "nearest",
+      inline: "nearest",
+      behavior: reducedMotion ? "auto" : "smooth",
+    });
+
+    const gridRect = grid.getBoundingClientRect();
+    const nextRects = new Map<string, FlipPosition>();
+    for (const element of elements) {
+      const key = element.dataset.flipKey;
+      if (!key) continue;
+      const rect = element.getBoundingClientRect();
+      nextRects.set(key, {
+        left: rect.left - gridRect.left,
+        top: rect.top - gridRect.top,
+      });
+    }
+
+    const previousRects = previousRectsRef.current;
+    const previousOrder = previousOrderRef.current;
+    const orderChanged =
+      previousOrder.length !== nextOrder.length ||
+      nextOrder.some((key, index) => key !== previousOrder[index]);
+    previousRectsRef.current = nextRects;
+    previousOrderRef.current = nextOrder;
+
+    if (previousRects.size === 0 || previousOrder.length === 0 || !orderChanged || reducedMotion) {
+      return;
+    }
+
+    const movedElements: Array<{ element: HTMLElement; hero: boolean }> = [];
+    for (const element of elements) {
+      const key = element.dataset.flipKey;
+      const previousRect = key ? previousRects.get(key) : undefined;
+      const nextRect = key ? nextRects.get(key) : undefined;
+      if (!previousRect || !nextRect) continue;
+      const deltaX = previousRect.left - nextRect.left;
+      const deltaY = previousRect.top - nextRect.top;
+      if (Math.abs(deltaX) < 0.5 && Math.abs(deltaY) < 0.5) continue;
+      element.style.transition = "none";
+      element.style.translate = `${deltaX}px ${deltaY}px`;
+      element.style.willChange = "translate";
+      const hero = key ? (request?.heroKeys.has(key) ?? false) : false;
+      if (hero) element.style.zIndex = "30";
+      movedElements.push({ element, hero });
+    }
+
+    if (movedElements.length === 0) return;
+    activeElementsRef.current = movedElements.map(({ element }) => element);
+    void grid.offsetWidth;
+    frameRef.current = window.requestAnimationFrame(() => {
+      frameRef.current = null;
+      const mode = request?.mode ?? "wave";
+      const heroElements = movedElements.filter(({ hero }) => hero);
+      const waveElements = movedElements.filter(({ hero }) => !hero);
+      const maxWaveDelay = Math.min(
+        Math.max(0, waveElements.length - 1) * FLIP_WAVE_DELAY_MS,
+        FLIP_WAVE_MAX_DELAY_MS,
+      );
+      const startWave = () => {
+        waveElements.forEach(({ element }, index) => {
+          const delay = Math.min(index * FLIP_WAVE_DELAY_MS, FLIP_WAVE_MAX_DELAY_MS);
+          element.style.transition = `${FLIP_WAVE_TRANSITION} ${delay}ms`;
+          element.style.translate = "0 0";
+        });
+      };
+      const scheduleCleanup = (delay: number) => {
+        cleanupTimerRef.current = window.setTimeout(() => {
+          for (const { element } of movedElements) {
+            resetFlipStyles(element);
+          }
+          activeElementsRef.current = [];
+          cleanupTimerRef.current = null;
+        }, delay + 40);
+      };
+
+      if (mode === "batch") {
+        const staggerHeroes = (request?.heroKeys.size ?? 0) <= FLIP_BATCH_STAGGER_LIMIT;
+        heroElements.forEach(({ element }, index) => {
+          const delay = staggerHeroes ? index * FLIP_BATCH_HERO_DELAY_MS : 0;
+          element.style.transition = `${FLIP_HERO_TRANSITION} ${delay}ms`;
+          element.style.translate = "0 0";
+        });
+        const lastHeroDelay =
+          staggerHeroes && heroElements.length > 0
+            ? (heroElements.length - 1) * FLIP_BATCH_HERO_DELAY_MS
+            : 0;
+        const heroPhaseDuration =
+          heroElements.length > 0 ? lastHeroDelay + FLIP_HERO_DURATION_MS : 0;
+        if (waveElements.length > 0) {
+          if (heroPhaseDuration > 0) {
+            phaseTimerRef.current = window.setTimeout(() => {
+              phaseTimerRef.current = null;
+              startWave();
+            }, heroPhaseDuration);
+          } else {
+            startWave();
+          }
+        }
+        const wavePhaseDuration =
+          waveElements.length > 0 ? FLIP_WAVE_DURATION_MS + maxWaveDelay : 0;
+        scheduleCleanup(heroPhaseDuration + wavePhaseDuration);
+        return;
+      }
+
+      heroElements.forEach(({ element }) => {
+        element.style.transition = FLIP_HERO_TRANSITION;
+        element.style.translate = "0 0";
+      });
+      startWave();
+      const heroDuration = heroElements.length > 0 ? FLIP_HERO_DURATION_MS : 0;
+      const waveDuration = waveElements.length > 0 ? FLIP_WAVE_DURATION_MS + maxWaveDelay : 0;
+      scheduleCleanup(Math.max(heroDuration, waveDuration));
+    });
+  });
+
+  useLayoutEffect(
+    () => () => {
+      clearAnimation();
+      previousRectsRef.current.clear();
+      previousOrderRef.current = [];
+      pendingRequestRef.current = null;
+    },
+    [clearAnimation],
+  );
+
+  return { captureVisibleKey, gridRef, requestFlip };
+}
+
 type SkillsHubPageProps = {
   settings: AppSettings;
   setSettings: (updater: (prev: AppSettings) => AppSettings) => void;
@@ -415,10 +684,18 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
 
   const [skills, setSkills] = useState<SkillSummary[]>(initialSkills ?? []);
   const [rootDir, setRootDir] = useState(initialRootDir ?? "");
+  const {
+    captureVisibleKey: captureInstalledFlipKey,
+    gridRef: installedGridRef,
+    requestFlip: requestInstalledFlip,
+  } = useFlipGrid();
   const [loading, setLoading] = useState(false);
   const [loadError, setLoadError] = useState<string | null>(null);
   const [filter, setFilter] = useState("");
   const [installedCategory, setInstalledCategory] = useState<StoreCategoryValue>("all");
+  const [installedSort, setInstalledSort] = useState<InstalledSkillSort>(
+    readInstalledSortPreference,
+  );
   // 批量选择模式：仅在「已安装」「本地导入」页可用。用于在大量技能中快速圈选
   // 一段连续区间（点首项、Shift+点末项）而不必逐个勾选。
   const [bulkMode, setBulkMode] = useState(false);
@@ -526,7 +803,22 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
   );
   const selectableSkills = useMemo(() => skills.filter(isUserSelectableSkill), [skills]);
   const selectedCount = selectableSkills.filter((skill) => selected.has(skill.name)).length;
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(INSTALLED_SORT_STORAGE_KEY, installedSort);
+    } catch {
+      // The preference is non-critical when storage is unavailable.
+    }
+  }, [installedSort]);
   const installedSkillNames = useMemo(() => new Set(skills.map((skill) => skill.name)), [skills]);
+  const requestInstalledSkillFlip = useCallback(
+    (mode: FlipMode, names: readonly string[], followNames: readonly string[] = names) => {
+      const keys = names.map((name) => `${name}-${rootDir}`);
+      const followKeys = followNames.map((name) => `${name}-${rootDir}`);
+      requestInstalledFlip(mode, keys, followKeys);
+    },
+    [requestInstalledFlip, rootDir],
+  );
 
   const textFilteredInstalled = useMemo(() => {
     const text = filter.trim().toLowerCase();
@@ -568,9 +860,16 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
         : categorizedInstalled.filter(({ categories }) => categories.includes(installedCategory)),
     [categorizedInstalled, installedCategory],
   );
+  const sortedFiltered = useMemo(
+    () => sortInstalledSkillItems(filtered, installedSort, selected, ({ skill }) => skill),
+    [filtered, installedSort, selected],
+  );
   const filteredSelectableInstalledNames = useMemo(
-    () => filtered.map(({ skill }) => skill.name).filter((name) => !isAlwaysEnabledSkillName(name)),
-    [filtered],
+    () =>
+      sortedFiltered
+        .map(({ skill }) => skill.name)
+        .filter((name) => !isAlwaysEnabledSkillName(name)),
+    [sortedFiltered],
   );
   useEffect(() => {
     if (view === "installed" && !lockedByChatMode) return;
@@ -1123,6 +1422,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
     const next = new Set(settings.skills.selected);
     if (on) next.add(name);
     else next.delete(name);
+    requestInstalledSkillFlip("single", [name], on ? [name] : []);
     setSettings((prev) => updateSkills(prev, { selected: Array.from(next) }));
   }
 
@@ -1217,11 +1517,13 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
 
       const before = settings.skills.selected;
       const current = new Set(before);
-      const changed = names.filter((name) =>
+      const changedNames = names.filter((name) =>
         target ? !current.has(name) : current.has(name),
-      ).length;
+      );
+      const changed = changedNames.length;
       if (changed === 0) return;
 
+      requestInstalledSkillFlip("batch", changedNames, target ? changedNames : []);
       clearBulkUndoTimer();
       setBulkUndo({ selected: before, count: changed });
       bulkUndoTimerRef.current = window.setTimeout(() => {
@@ -1242,17 +1544,36 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
         });
       });
     },
-    [bulkSelection, clearBulkUndoTimer, setSettings, settings.skills.selected],
+    [
+      bulkSelection,
+      clearBulkUndoTimer,
+      requestInstalledSkillFlip,
+      setSettings,
+      settings.skills.selected,
+    ],
   );
 
   const undoBulkSelection = useCallback(() => {
     clearBulkUndoTimer();
     if (bulkUndo) {
       const restore = bulkUndo.selected;
+      const current = new Set(settings.skills.selected);
+      const restoreSet = new Set(restore);
+      const changedNames = [...new Set([...current, ...restoreSet])].filter(
+        (name) => !isAlwaysEnabledSkillName(name) && current.has(name) !== restoreSet.has(name),
+      );
+      const followNames = changedNames.filter((name) => restoreSet.has(name) && !current.has(name));
+      requestInstalledSkillFlip("batch", changedNames, followNames);
       setSettings((prev) => updateSkills(prev, { selected: restore }));
     }
     setBulkUndo(null);
-  }, [bulkUndo, clearBulkUndoTimer, setSettings]);
+  }, [
+    bulkUndo,
+    clearBulkUndoTimer,
+    requestInstalledSkillFlip,
+    setSettings,
+    settings.skills.selected,
+  ]);
 
   async function deleteBulkSelectedInstalledSkills() {
     if (lockedByChatMode || deletingSkillName || !bulkMode) return;
@@ -1567,8 +1888,8 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
               </div>
             </div>
 
-            <div className="hub-panel-enter flex items-center justify-between gap-3">
-              <div className="inline-flex shrink-0 rounded-2xl border border-border/40 bg-background/60 p-1 backdrop-blur-xl shadow-[0_1px_0_rgba(255,255,255,0.5)_inset] dark:border-white/[0.06] dark:bg-white/[0.04] dark:shadow-[0_1px_0_rgba(255,255,255,0.04)_inset]">
+            <div className="hub-panel-enter flex items-center justify-between gap-3 max-sm:flex-col max-sm:items-stretch max-sm:gap-2">
+              <div className="inline-flex shrink-0 rounded-2xl border border-border/40 bg-background/60 p-1 backdrop-blur-xl shadow-[0_1px_0_rgba(255,255,255,0.5)_inset] max-sm:max-w-full max-sm:overflow-x-auto max-sm:[scrollbar-width:none] max-sm:[&::-webkit-scrollbar]:hidden dark:border-white/[0.06] dark:bg-white/[0.04] dark:shadow-[0_1px_0_rgba(255,255,255,0.04)_inset]">
                 {[
                   {
                     value: "installed" as const,
@@ -1597,7 +1918,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                       type="button"
                       onClick={() => setView(item.value)}
                       className={cn(
-                        "relative inline-flex h-9 items-center justify-center gap-2 rounded-xl px-4 text-[12.5px] font-medium transition-all",
+                        "relative inline-flex h-9 items-center justify-center gap-2 rounded-xl px-4 text-[12.5px] font-medium transition-all max-sm:shrink-0",
                         active
                           ? "bg-background/85 text-foreground shadow-[0_1px_0_rgba(255,255,255,0.6)_inset,0_4px_12px_-8px_rgba(15,23,42,0.18)] ring-1 ring-border/45 dark:bg-white/[0.08] dark:ring-white/[0.09] dark:shadow-[0_1px_0_rgba(255,255,255,0.07)_inset,0_4px_12px_-8px_rgba(0,0,0,0.55)]"
                           : "text-muted-foreground hover:bg-background/70 hover:text-foreground",
@@ -1638,7 +1959,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                           : t("settings.skillsBulkImportHint")
                       }
                       className={cn(
-                        "inline-flex h-10 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-xl border px-3.5 text-[12.5px] font-medium backdrop-blur-xl transition-all",
+                        "inline-flex h-10 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-xl border px-3.5 text-[12.5px] font-medium backdrop-blur-xl transition-all max-sm:px-2.5",
                         bulkMode
                           ? "border-primary/50 bg-primary/10 text-foreground shadow-[0_1px_0_rgba(255,255,255,0.6)_inset,0_4px_12px_-8px_rgba(15,23,42,0.18)] ring-1 ring-primary/30 dark:border-primary/40 dark:bg-primary/15"
                           : "border-border/40 bg-background/60 text-muted-foreground hover:bg-background/80 hover:text-foreground dark:border-white/[0.06] dark:bg-white/[0.04]",
@@ -1650,7 +1971,32 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                       </span>
                     </button>
                   ) : null}
-                  <div className="relative w-full min-w-0 max-w-md">
+                  {view === "installed" ? (
+                    <select
+                      value={installedSort}
+                      onChange={(event) => {
+                        const value = event.currentTarget.value;
+                        if (!isInstalledSkillSort(value) || value === installedSort) return;
+                        const followKey = captureInstalledFlipKey();
+                        requestInstalledFlip("wave", [], followKey ? [followKey] : []);
+                        setInstalledSort(value);
+                      }}
+                      aria-label={t("settings.skillsInstalledSortLabel")}
+                      title={t("settings.skillsInstalledSortLabel")}
+                      className="h-10 max-w-[11rem] shrink-0 cursor-pointer rounded-xl border border-border/40 bg-background/95 px-3 text-[12.5px] font-medium text-foreground outline-hidden [color-scheme:light] transition-all hover:bg-background focus:border-border/60 focus:ring-2 focus:ring-foreground/10 max-sm:max-w-[7.5rem] max-sm:px-2 dark:border-white/[0.06] dark:bg-popover/95 dark:[color-scheme:dark]"
+                    >
+                      {INSTALLED_SORT_OPTIONS.map((option) => (
+                        <option
+                          key={option.value}
+                          value={option.value}
+                          className="bg-background text-foreground"
+                        >
+                          {t(option.labelKey)}
+                        </option>
+                      ))}
+                    </select>
+                  ) : null}
+                  <div className="relative w-full min-w-0 max-w-md max-sm:flex-1">
                     <Search className="absolute left-3.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
                     <input
                       type="text"
@@ -1674,7 +2020,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                             ? t("settings.skillsStoreSearch")
                             : t("settings.skillsImportSearchPlaceholder")
                       }
-                      className="h-10 w-full rounded-xl border border-border/40 bg-background/60 pl-10 pr-3 text-[13px] outline-hidden backdrop-blur-xl transition-all placeholder:text-muted-foreground/60 focus:border-border/60 focus:bg-background/85 focus:ring-2 focus:ring-foreground/10"
+                      className="h-10 w-full rounded-xl border border-border/40 bg-background/95 pl-10 pr-3 text-[13px] outline-hidden transition-all placeholder:text-muted-foreground/60 focus:border-border/60 focus:bg-background focus:ring-2 focus:ring-foreground/10 dark:bg-popover/95"
                     />
                   </div>
                 </div>
@@ -1693,455 +2039,467 @@ 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}
-
-                    {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}
+              ) : (
+                <>
+                  {view === "installed" ? (
+                    <div
+                      className={cn(
+                        "h-full min-h-0 overflow-y-auto px-0.5 pr-1 pt-1.5 [overflow-anchor:none]",
+                        bulkMode ? "pb-[calc(10rem+env(safe-area-inset-bottom))] sm:pb-24" : "pb-4",
+                      )}
+                    >
+                      <div className="flex flex-col gap-5">
+                        {skills.length > 0 ? (
+                          <StoreCategoryChips
+                            value={installedCategory}
+                            counts={installedCategoryCounts}
+                            onChange={setInstalledCategory}
+                          />
+                        ) : 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}
+                        {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}
 
-                    {!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}
+                        {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}
 
-                    {!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}
+                        {!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 ? (
-                      <>
-                        <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")}
+                        {!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="mt-0.5 truncate text-[11px] text-muted-foreground/80">
-                                {t("settings.skillsHubScanning")}
+                              <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>
-                          </div>
-                          <div className="hub-frost-track mt-3.5" />
-                        </div>
+                          </GlassPanel>
+                        ) : 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" />
+                        {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>
                               </div>
+                              <div className="hub-frost-track mt-3.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">
+                            <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
-                                  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",
-                                  )}
+                                  key={item}
+                                  className="hub-frost-skeleton skill-card-enter p-3.5"
                                 >
-                                  <PrimaryCategoryIcon className="h-5 w-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>
+                          </>
+                        ) : null}
 
-                                {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 ? (
+                        {sortedFiltered.length > 0 ? (
+                          <div
+                            ref={installedGridRef}
+                            className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+                          >
+                            {sortedFiltered.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
-                                      className="flex shrink-0 items-center"
-                                      title={t("settings.skillsBulkAlwaysOnDisabled")}
+                                      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",
+                                      )}
                                     >
-                                      <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"
+                                      <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")}
                                       >
                                         <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")}
+                                        <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()}
                                       >
-                                        <input
-                                          type="checkbox"
-                                          checked={bulkSelection.has(skill.name)}
+                                        <button
+                                          type="button"
                                           aria-label={`${t("settings.skillsHubBulkSelectLabel")}: ${skill.name}`}
-                                          onClick={(event) => event.stopPropagation()}
-                                          onChange={(event) => {
+                                          title={t("settings.skillsHubBulkSelect")}
+                                          onClick={(event) => {
                                             event.stopPropagation();
-                                            toggleBulkSelectionName(skill.name);
+                                            enterBulkMode(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",
+                                            // 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",
                                           )}
                                         >
-                                          {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) => (
+                                          <span className="h-2 w-2 rounded-full border border-current opacity-40" />
+                                        </button>
                                         <button
                                           type="button"
-                                          disabled={deleteDisabled}
+                                          role="switch"
+                                          aria-checked={checked}
+                                          aria-label={`${t("skills.select")}: ${skill.name}`}
+                                          title={
+                                            checked
+                                              ? t("settings.skillsHubToggleDisable")
+                                              : t("settings.skillsHubToggleEnable")
+                                          }
                                           onClick={(event) => {
                                             event.stopPropagation();
-                                            open();
+                                            toggleSkill(skill.name, !checked);
                                           }}
                                           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",
-                                                ),
+                                            "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",
                                           )}
-                                          title={t("settings.skillsHubDeleteSkill")}
                                         >
-                                          {deleting ? (
-                                            <Loader2 className="h-3.5 w-3.5 animate-spin" />
-                                          ) : (
-                                            <Trash2 className="h-3.5 w-3.5" />
-                                          )}
+                                          <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>
-                                      )}
-                                    </ConfirmDeletePopover>
+                                      </div>
+                                    )}
                                   </div>
-                                ) : 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>
-                    ) : 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 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>
+                                          )}
+                                        </ConfirmDeletePopover>
+                                      </div>
+                                    ) : null}
+                                  </div>
+                                </>
+                              );
+
+                              const key = `${skill.name}-${rootDir}`;
+                              if (alwaysEnabled) {
+                                return (
+                                  <button
+                                    key={key}
+                                    data-flip-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}
+                                  data-flip-key={key}
+                                  role="button"
+                                  tabIndex={0}
+                                  aria-label={`${t("settings.skillsInstalledPreviewOpen")}: ${skill.name}`}
+                                  onClick={(event) => {
+                                    if (bulkMode) {
+                                      handleBulkInstalledCardClick(
+                                        skill.name,
+                                        sortedFiltered.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,
+                                        sortedFiltered.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") &&
+                        sortedFiltered.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>
@@ -2164,8 +2522,8 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
       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]">
+        <div className="pointer-events-none absolute inset-x-0 bottom-4 z-20 flex justify-center px-3 max-sm:bottom-[calc(1rem+env(safe-area-inset-bottom))]">
+          <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/95 py-2 pl-4 pr-2 text-[12.5px] shadow-[0_8px_24px_-12px_rgba(15,23,42,0.35)] max-sm:justify-center max-sm:rounded-3xl max-sm:whitespace-nowrap dark:border-white/[0.1] dark:bg-popover/95">
             {bulkSelection.size > 0 ? (
               <>
                 <span className="whitespace-nowrap text-foreground/85">
@@ -2177,7 +2535,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                     ? ` ${t("settings.skillsBulkNotInFilter").replace("{count}", String(bulkSelectedHiddenCount))}`
                     : ""}
                 </span>
-                <span className="text-muted-foreground/50" aria-hidden="true">
+                <span className="hidden text-muted-foreground/50 sm:inline" aria-hidden="true">
                   │
                 </span>
                 <button
@@ -2197,7 +2555,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                 >
                   {t("settings.skillsBulkClear")}
                 </button>
-                <span className="text-muted-foreground/50" aria-hidden="true">
+                <span className="hidden text-muted-foreground/50 sm:inline" aria-hidden="true">
                   │
                 </span>
                 <button
@@ -2262,8 +2620,8 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
       ) : null}
 
       {bulkUndo && bulkSelection.size === 0 ? (
-        <div className="pointer-events-none absolute inset-x-0 bottom-4 z-20 flex justify-center">
-          <div className="hub-panel-enter pointer-events-auto flex items-center gap-3 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]">
+        <div className="pointer-events-none absolute inset-x-0 bottom-4 z-20 flex justify-center px-3 max-sm:bottom-[calc(1rem+env(safe-area-inset-bottom))]">
+          <div className="hub-panel-enter pointer-events-auto flex max-w-full flex-wrap items-center justify-center gap-3 rounded-full border border-border/50 bg-background/95 py-2 pl-4 pr-2 text-[12.5px] shadow-[0_8px_24px_-12px_rgba(15,23,42,0.35)] dark:border-white/[0.1] dark:bg-popover/95">
             <span className="text-foreground/85">
               {t("settings.skillsBulkUpdated").replace("{count}", String(bulkUndo.count))}
             </span>
@@ -2383,12 +2741,12 @@ function SkillsImportView(props: {
     <div
       className={cn(
         "relative h-full min-h-0 overflow-y-auto px-0.5 pr-1 pt-1.5",
-        bulkMode ? "pb-24" : "pb-4",
+        bulkMode ? "pb-[calc(8rem+env(safe-area-inset-bottom))] sm:pb-24" : "pb-4",
       )}
     >
       {importToast ? (
         <div className="pointer-events-none sticky top-2 z-[80] flex justify-end px-1">
-          <div className="notify-toast-enter pointer-events-auto flex max-w-sm items-start gap-2.5 rounded-lg border border-amber-500/30 bg-amber-50/95 px-3 py-2.5 text-sm shadow-lg backdrop-blur-xl dark:border-amber-500/25 dark:bg-amber-950/80">
+          <div className="notify-toast-enter pointer-events-auto flex max-w-sm items-start gap-2.5 rounded-lg border border-amber-500/30 bg-amber-50 px-3 py-2.5 text-sm shadow-lg dark:border-amber-500/25 dark:bg-amber-950">
             <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-600 dark:text-amber-400" />
             <p className="min-w-0 flex-1 leading-relaxed text-amber-800 dark:text-amber-200">
               {importToast}
@@ -2696,8 +3054,8 @@ function SkillsImportView(props: {
       </div>
 
       {bulkMode ? (
-        <div className="pointer-events-none sticky bottom-3 z-20 flex justify-center px-1 pt-2">
-          <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]">
+        <div className="pointer-events-none sticky bottom-3 z-20 flex justify-center px-1 pt-2 max-sm:bottom-[calc(0.75rem+env(safe-area-inset-bottom))]">
+          <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/95 py-2 pl-4 pr-2 text-[12.5px] shadow-[0_8px_24px_-12px_rgba(15,23,42,0.35)] max-sm:justify-center max-sm:rounded-3xl max-sm:whitespace-nowrap dark:border-white/[0.1] dark:bg-popover/95">
             {importableSelectedCount > 0 || importing ? (
               <>
                 <span className="whitespace-nowrap text-foreground/85">
@@ -2706,7 +3064,7 @@ function SkillsImportView(props: {
                     String(importableSelectedCount),
                   )}
                 </span>
-                <span className="text-muted-foreground/50" aria-hidden="true">
+                <span className="hidden text-muted-foreground/50 sm:inline" aria-hidden="true">
                   │
                 </span>
                 <button
@@ -2778,7 +3136,7 @@ function InstalledSkillPreviewDrawer(props: {
   return createPortal(
     <div
       className={cn(
-        "fixed inset-0 z-50 flex justify-end bg-background/35 backdrop-blur-[2px]",
+        "fixed inset-0 z-50 flex justify-end bg-background/55",
         closing ? "skills-drawer-backdrop-closing" : "skills-drawer-backdrop",
       )}
       role="dialog"
@@ -2791,7 +3149,7 @@ function InstalledSkillPreviewDrawer(props: {
     >
       <aside
         className={cn(
-          "flex h-full w-full flex-col border-l border-border/45 bg-background/95 shadow-[-18px_0_45px_-28px_rgba(15,23,42,0.45)] dark:border-white/[0.08] dark:bg-popover/95 dark:shadow-[-18px_0_45px_-28px_rgba(0,0,0,0.7)] backdrop-blur-xl md:w-2/5 md:max-w-[34rem]",
+          "flex h-full w-full flex-col border-l border-border/45 bg-background shadow-[-18px_0_45px_-28px_rgba(15,23,42,0.45)] dark:border-white/[0.08] dark:bg-popover dark:shadow-[-18px_0_45px_-28px_rgba(0,0,0,0.7)] md:w-2/5 md:max-w-[34rem]",
           closing ? "skills-drawer-panel-closing" : "skills-drawer-panel",
         )}
       >
@@ -3651,7 +4009,7 @@ function SkillsStorePreviewDrawer(props: {
   return createPortal(
     <div
       className={cn(
-        "fixed inset-0 z-50 flex justify-end bg-background/35 backdrop-blur-[2px]",
+        "fixed inset-0 z-50 flex justify-end bg-background/55",
         closing ? "skills-drawer-backdrop-closing" : "skills-drawer-backdrop",
       )}
       role="dialog"
@@ -3664,7 +4022,7 @@ function SkillsStorePreviewDrawer(props: {
     >
       <aside
         className={cn(
-          "flex h-full w-full flex-col border-l border-border/45 bg-background/95 shadow-[-18px_0_45px_-28px_rgba(15,23,42,0.45)] dark:border-white/[0.08] dark:bg-popover/95 dark:shadow-[-18px_0_45px_-28px_rgba(0,0,0,0.7)] backdrop-blur-xl md:w-2/5 md:max-w-[34rem]",
+          "flex h-full w-full flex-col border-l border-border/45 bg-background shadow-[-18px_0_45px_-28px_rgba(15,23,42,0.45)] dark:border-white/[0.08] dark:bg-popover dark:shadow-[-18px_0_45px_-28px_rgba(0,0,0,0.7)] md:w-2/5 md:max-w-[34rem]",
           closing ? "skills-drawer-panel-closing" : "skills-drawer-panel",
         )}
       >
diff --git a/crates/agent-gui/test/skills/installed-skill-sort.test.mjs b/crates/agent-gui/test/skills/installed-skill-sort.test.mjs
new file mode 100644
index 000000000..118b82dce
--- /dev/null
+++ b/crates/agent-gui/test/skills/installed-skill-sort.test.mjs
@@ -0,0 +1,186 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import test from "node:test";
+import { fileURLToPath } from "node:url";
+import { createTsModuleLoader } from "../helpers/load-ts-module.mjs";
+
+const implementations = [
+  {
+    label: "GUI",
+    loader: createTsModuleLoader(),
+    page: new URL("../../src/pages/skills-hub/SkillsHubPage.tsx", import.meta.url),
+  },
+  {
+    label: "WebUI",
+    loader: createTsModuleLoader({
+      rootDir: fileURLToPath(new URL("../../../agent-gateway/web/", import.meta.url)),
+    }),
+    page: new URL(
+      "../../../agent-gateway/web/src/pages/skills-hub/SkillsHubPage.tsx",
+      import.meta.url,
+    ),
+  },
+];
+
+function skill(name, installedAt = null) {
+  return {
+    name,
+    description: name,
+    skillFile: `${name}/SKILL.md`,
+    baseDir: name,
+    installedAt,
+  };
+}
+
+for (const { label, loader, page } of implementations) {
+  const sorting = loader.loadModule("src/lib/skills/installedSort.ts");
+
+  test(`${label} keeps built-ins ahead of enabled and disabled skills`, () => {
+    const items = [
+      skill("z-disabled"),
+      skill("z-enabled"),
+      skill("skills-creator"),
+      skill("skills-installer"),
+      skill("a-disabled"),
+    ];
+    const selected = new Set(["z-enabled"]);
+
+    assert.deepEqual(
+      sorting
+        .sortInstalledSkillItems(items, "name-asc", selected, (item) => item)
+        .map((item) => item.name),
+      ["skills-creator", "skills-installer", "z-enabled", "a-disabled", "z-disabled"],
+    );
+    assert.deepEqual(
+      sorting
+        .sortInstalledSkillItems(items, "name-desc", selected, (item) => item)
+        .map((item) => item.name),
+      ["skills-installer", "skills-creator", "z-enabled", "z-disabled", "a-disabled"],
+    );
+    assert.deepEqual(
+      items.map((item) => item.name),
+      ["z-disabled", "z-enabled", "skills-creator", "skills-installer", "a-disabled"],
+      "sorting must not mutate the discovery result",
+    );
+  });
+
+  test(`${label} sorts newest installs within enabled groups and leaves missing dates last`, () => {
+    const items = [
+      skill("disabled-missing"),
+      skill("enabled-missing"),
+      skill("skills-creator", 50),
+      skill("disabled-old", 100),
+      skill("enabled-old", 200),
+      skill("skills-installer", 600),
+      skill("disabled-new", 500),
+    ];
+    const selected = new Set(["enabled-missing", "enabled-old"]);
+
+    assert.deepEqual(
+      sorting
+        .sortInstalledSkillItems(items, "installed-desc", selected, (item) => item)
+        .map((item) => item.name),
+      [
+        "skills-installer",
+        "skills-creator",
+        "enabled-old",
+        "enabled-missing",
+        "disabled-new",
+        "disabled-old",
+        "disabled-missing",
+      ],
+    );
+  });
+
+  test(`${label} validates persisted installed sort values`, () => {
+    assert.equal(sorting.isInstalledSkillSort("name-asc"), true);
+    assert.equal(sorting.isInstalledSkillSort("name-desc"), true);
+    assert.equal(sorting.isInstalledSkillSort("installed-desc"), true);
+    assert.equal(sorting.isInstalledSkillSort("downloads"), false);
+    assert.equal(sorting.isInstalledSkillSort(null), false);
+  });
+
+  test(`${label} wires visual order, selection order, persistence, and reduced-motion FLIP`, () => {
+    const source = readFileSync(page, "utf8");
+
+    assert.match(source, /skillsHub\.installedSort/);
+    assert.match(source, /sortInstalledSkillItems\(filtered, installedSort, selected/);
+    assert.match(source, /sortedFiltered\.map/);
+    assert.match(source, /sortedFiltered[\s\S]*handleBulkInstalledCardClick/);
+    assert.match(source, /ref=\{installedGridRef\}/);
+    assert.equal(source.match(/data-flip-key=\{key\}/g)?.length, 2);
+    assert.match(source, /prefers-reduced-motion: reduce/);
+    assert.match(source, /\[color-scheme:light\][^"]*dark:\[color-scheme:dark\]/);
+    assert.match(source, /<option[\s\S]*className="bg-background text-foreground"/);
+    assert.match(source, /followElement\?\.scrollIntoView\(\{/);
+    assert.match(source, /block: "nearest"/);
+    assert.match(source, /behavior: reducedMotion \? "auto" : "smooth"/);
+    assert.match(source, /left: rect\.left - gridRect\.left/);
+    assert.match(source, /top: rect\.top - gridRect\.top/);
+    assert.match(source, /const previousOrderRef = useRef<string\[\]>\(\[\]\)/);
+    assert.match(source, /const orderChanged =/);
+    assert.match(source, /!orderChanged/);
+    assert.match(
+      source,
+      /requestInstalledSkillFlip\("single", \[name\], on \? \[name\] : \[\]\)/,
+    );
+    assert.match(
+      source,
+      /requestInstalledSkillFlip\("batch", changedNames, target \? changedNames : \[\]\)/,
+    );
+    assert.match(source, /const followKeys = followNames\.map/);
+    assert.match(source, /requestInstalledFlip\(mode, keys, followKeys\)/);
+    assert.match(
+      source,
+      /const followNames = changedNames\.filter\([\s\S]*restoreSet\.has\(name\) && !current\.has\(name\)/,
+    );
+    assert.match(source, /requestInstalledSkillFlip\("batch", changedNames, followNames\)/);
+    assert.match(source, /overflow-y-auto[^"]*\[overflow-anchor:none\]/);
+    assert.match(source, /requestInstalledFlip\("wave", \[\], followKey \? \[followKey\] : \[\]\)/);
+    assert.match(source, /const FLIP_HERO_DURATION_MS = 380/);
+    assert.match(source, /const FLIP_BATCH_HERO_DELAY_MS = 90/);
+    assert.match(source, /const FLIP_BATCH_STAGGER_LIMIT = 8/);
+    assert.match(source, /cubic-bezier\(0\.34, 1\.3, 0\.64, 1\)/);
+    assert.match(source, /const FLIP_WAVE_DURATION_MS = 280/);
+    assert.match(source, /const FLIP_WAVE_DELAY_MS = 30/);
+    assert.match(source, /const FLIP_WAVE_MAX_DELAY_MS = 400/);
+    assert.match(source, /if \(mode === "batch"\)/);
+    assert.match(source, /const heroPhaseDuration =/);
+    assert.match(source, /phaseTimerRef\.current = window\.setTimeout/);
+    assert.match(source, /window\.clearTimeout\(phaseTimerRef\.current\)/);
+    assert.match(source, /startWave\(\)/);
+    assert.match(source, /element\.style\.willChange = "translate"/);
+    assert.match(source, /element\.style\.willChange = ""/);
+    assert.match(source, /element\.style\.zIndex = "30"/);
+    assert.match(source, /element\.style\.zIndex = ""/);
+    assert.match(source, /clearAnimation\(\);[\s\S]*const grid = gridRef\.current/);
+    assert.match(source, /element\.style\.translate/);
+    assert.match(source, /h-10 max-w-\[11rem\][^"]*bg-background\/95/);
+    assert.match(source, /h-10 w-full[^"]*bg-background\/95/);
+    assert.match(source, /dark:bg-popover\/95/);
+    assert.match(source, /hub-panel-enter flex items-center justify-between gap-3 max-sm:flex-col max-sm:items-stretch max-sm:gap-2/);
+    assert.match(source, /max-sm:max-w-full max-sm:overflow-x-auto max-sm:\[scrollbar-width:none\] max-sm:\[&::-webkit-scrollbar\]:hidden/);
+    assert.match(source, /max-sm:max-w-\[7\.5rem\] max-sm:px-2/);
+    assert.match(source, /relative w-full min-w-0 max-w-md max-sm:flex-1/);
+    assert.match(source, /pb-\[calc\(10rem\+env\(safe-area-inset-bottom\)\)\] sm:pb-24/);
+    assert.equal(
+      source.match(/max-sm:bottom-\[calc\(1rem\+env\(safe-area-inset-bottom\)\)\]/g)?.length,
+      2,
+    );
+    assert.match(source, /max-sm:bottom-\[calc\(0\.75rem\+env\(safe-area-inset-bottom\)\)\]/);
+    assert.equal(source.match(/fixed inset-0 z-50 flex justify-end bg-background\/55/g)?.length, 2);
+    assert.equal(
+      source.match(/hub-panel-enter pointer-events-auto[^"]*bg-background\/95/g)?.length,
+      3,
+    );
+    assert.match(source, /notify-toast-enter[^"]*bg-amber-50/);
+    assert.doesNotMatch(source, /<select[^>]*backdrop-blur/);
+    assert.doesNotMatch(source, /<input[^>]*backdrop-blur/);
+    assert.doesNotMatch(source, /hub-skill-card[^"]*backdrop-blur/);
+    assert.doesNotMatch(source, /skill-card-enter group flex h-full[^"]*backdrop-blur/);
+    assert.doesNotMatch(source, /hub-panel-enter pointer-events-auto[^"]*backdrop-blur/);
+    assert.doesNotMatch(source, /notify-toast-enter[^"]*backdrop-blur/);
+    assert.doesNotMatch(source, /fixed inset-0 z-50 flex justify-end[^"]*backdrop-blur/);
+    assert.doesNotMatch(source, /flex h-full w-full flex-col border-l[^"]*backdrop-blur/);
+  });
+}
diff --git a/docs/design/skills-hub-bulk-selection.md b/docs/design/skills-hub-bulk-selection.md
index 59b526f0c..e06013d1f 100644
--- a/docs/design/skills-hub-bulk-selection.md
+++ b/docs/design/skills-hub-bulk-selection.md
@@ -75,3 +75,30 @@
 3. 触屏（webui 移动端）无 hover：复选框常驻可点，浮动栏不遮挡最后一行卡片（列表底部留 padding）。
 4. lockedByChatMode 时批量入口整体隐藏（保留现状）。
 5. agent-gui 与 agent-gateway/web 两份 SkillsHubPage 行为、样式、i18n 全部对齐。
+
+## 8. WebView2 渲染规约
+
+Skills Hub 在 Windows WebView2 中必须遵守以下合成约束：
+
+1. **禁止对悬浮或覆盖在可滚动、可动画内容之上的元素使用 backdrop-filter。**
+   这包括 fixed、sticky、absolute 浮层，以及位于 FLIP 网格上方的操作栏、提示条、
+   搜索和排序控件、抽屉遮罩与抽屉面板。Tailwind 的 backdrop-blur-* 同样属于禁用范围。
+2. **上述元素统一使用高不透明度实色背景模拟毛玻璃层次。**
+   亮色模式优先使用 bg-background/95，暗色模式使用 dark:bg-popover/95，并保留原有
+   border 与 shadow；遮罩层使用不带模糊的实色半透明背景。
+3. **backdrop-filter 仅允许用于背后内容完全静态的场景。**
+   例如页面顶部 HubHeader 或仅覆盖静态 HubBackdrop 的面板。若调用方可能覆盖列表、
+   滚动区域或动画内容，应默认不用 backdrop-filter。
+4. **两端必须同步。**任何相关样式调整都要同时检查 agent-gui 与
+   agent-gateway/web，避免一个端重新引入独立合成层。
+
+案例依据：
+
+- **技能卡 hover 光斑：**已安装页和商店页曾在每张卡片上使用 backdrop-blur-xl，
+  同时卡片 hover 会触发 translate 提层。60+ 卡片叠加 HubBackdrop 光晕后，部分
+  WebView2/GPU 组合会留下竖向绿色过期采样残带。修复方式是移除动态卡片根节点的
+  backdrop-filter，保留背景、边框、阴影、hover 位移与入场动画。
+- **FLIP 与底部浮动栏光斑：**排序功能让技能卡在底部多选操作栏或 Undo 条背后高频
+  重排，WebView2 的 backdrop-filter 采样缓存可能失效并在浮动栏上方形成残带。
+  修复方式是让操作栏、Undo、搜索、排序和覆盖动态页面的抽屉使用高不透明度实色背景，
+  不再采样其后的动画内容。