diff --git a/packages/app/e2e/session/titlebar-right-rail-contract.spec.ts b/packages/app/e2e/session/titlebar-right-rail-contract.spec.ts
index f1a8ade93..eb6e85386 100644
--- a/packages/app/e2e/session/titlebar-right-rail-contract.spec.ts
+++ b/packages/app/e2e/session/titlebar-right-rail-contract.spec.ts
@@ -1,5 +1,5 @@
 import { expect, test } from "../fixtures"
-import { openRightPanel } from "../actions"
+import { openRightPanel, openSettings, openSidebar } from "../actions"
 import { modKey } from "../utils"
 
 // Contract for the titlebar's right rail — the flex row inside the titlebar's
@@ -142,6 +142,57 @@ test.describe("titlebar right rail contract", () => {
       .toEqual({ width: 0, borderLeft: "0px" })
   })
 
+  test("a main-takeover surface hides the right-rail chrome (border-l, reserved width, portalled tabs)", async ({
+    page,
+    gotoSession,
+  }) => {
+    // Regression: settings / automations / skills are main-region takeovers that
+    // cover the (still-mounted) session and its right panel. The rail's width +
+    // border-l and the tab-strip portal are the right panel's chrome inside the
+    // titlebar; when a surface covers the panel, that chrome must retract too.
+    // Before the mainSurfaceOpen() guard, automations/skills left an empty rail
+    // reserving panel-width with a 1px border-l, and settings additionally left
+    // the portalled tabs ("状态") mounted. One assertion covers all three.
+    await gotoSession()
+    await openRightPanel(page)
+    await openSidebar(page)
+
+    const railState = () =>
+      page.evaluate(() => {
+        const tabs = document.getElementById("pawwork-titlebar-tabs") as HTMLElement | null
+        const cs = tabs ? getComputedStyle(tabs) : null
+        return {
+          width: tabs ? Math.round(tabs.getBoundingClientRect().width) : null,
+          borderLeft: cs?.borderLeftWidth ?? null,
+          children: tabs ? tabs.childElementCount : null,
+        }
+      })
+
+    // Sanity: panel open, no surface → rail reserves width with its border-l.
+    expect((await railState()).width).toBeGreaterThan(0)
+
+    const expectRetracted = async () =>
+      expect.poll(railState, { timeout: 2_000 }).toEqual({ width: 0, borderLeft: "0px", children: 0 })
+
+    // Automations (sidebar stays live, so the entry is clickable to toggle).
+    await page.locator('[data-action="pawwork-automations-open"]').click()
+    await page.locator('[data-component="automations-page"]').waitFor({ state: "visible", timeout: 30_000 })
+    await expectRetracted()
+    await page.locator('[data-action="pawwork-automations-open"]').click()
+
+    // Skills.
+    await page.locator('[data-action="pawwork-skills-open"]').click()
+    await page.locator('[data-component="skills-page"]').waitFor({ state: "visible", timeout: 30_000 })
+    await expectRetracted()
+    await page.locator('[data-action="pawwork-skills-open"]').click()
+
+    // Settings (replaces the sidebar; open it last). This is the leg the empty
+    // automations/skills gate missed — the tab-strip portal was not gated here.
+    await openSettings(page)
+    await page.locator('[data-component="settings-page"]').first().waitFor({ state: "visible", timeout: 30_000 })
+    await expectRetracted()
+  })
+
   test("tabs slot border-l spans the full titlebar height (no top/bottom seam break)", async ({
     page,
     gotoSession,
diff --git a/packages/app/e2e/skills/skills-panel.spec.ts b/packages/app/e2e/skills/skills-panel.spec.ts
new file mode 100644
index 000000000..e53ad4333
--- /dev/null
+++ b/packages/app/e2e/skills/skills-panel.spec.ts
@@ -0,0 +1,121 @@
+import { mkdir, writeFile } from "node:fs/promises"
+import { join } from "node:path"
+import { test, expect } from "../fixtures"
+import { openSidebar } from "../actions"
+import { promptSelector } from "../selectors"
+
+// Seed a project-scoped skill so the gallery has a deterministic capability to
+// open and activate in a clean env, independent of any ambient global skills.
+async function seedProjectSkill(directory: string, name: string, description: string) {
+  const skillDir = join(directory, ".agents", "skills", name)
+  await mkdir(skillDir, { recursive: true })
+  await writeFile(
+    join(skillDir, "SKILL.md"),
+    ["---", `name: ${name}`, `description: ${description}`, "---", "", "Summarize the thread into three bullets."].join("\n"),
+  )
+}
+
+test("Skills sidebar entry opens the gallery; Escape closes detail then surface", async ({ page, project }) => {
+  await project.open({
+    setup: async (directory) => {
+      await seedProjectSkill(directory, "summarize", "Summarize the conversation")
+    },
+  })
+  await openSidebar(page)
+
+  await page.locator('[data-action="pawwork-skills-open"]').click()
+  const surface = page.locator('[data-component="skills-page"]')
+  await expect(surface).toBeVisible()
+
+  const row = surface.locator('[data-action="skill-open"][data-skill="summarize"]')
+  await expect(row).toBeVisible({ timeout: 30_000 })
+  await row.click()
+
+  const detail = page.locator('[data-component="skill-detail"]')
+  await expect(detail).toBeVisible()
+
+  // Escape returns to the gallery first, then closes the surface.
+  await page.keyboard.press("Escape")
+  await expect(detail).toHaveCount(0)
+  await expect(surface).toBeVisible()
+
+  // The surface's Escape defers to the dialog stack, which clears `active`
+  // ~100ms after the detail unmounts (exit grace in useDialog). Wait it out — as
+  // a real user does, watching the modal vanish — before the second Escape.
+  await page.waitForTimeout(200)
+  await page.keyboard.press("Escape")
+  await expect(surface).toHaveCount(0)
+})
+
+test("Escape over the gallery closes a sidebar-opened palette first, then the surface", async ({ page, project }) => {
+  await project.open({
+    setup: async (directory) => {
+      await seedProjectSkill(directory, "summarize", "Summarize the conversation")
+    },
+  })
+  await openSidebar(page)
+
+  await page.locator('[data-action="pawwork-skills-open"]').click()
+  const surface = page.locator('[data-component="skills-page"]')
+  await expect(surface).toBeVisible()
+
+  // The sidebar stays live behind the gallery; its search opens the command
+  // palette via command.show(), which bypasses the keybind gate that otherwise
+  // suppresses palettes behind a surface. The gallery's Escape handler must
+  // defer to that palette (a dialog-stack modal) before closing itself.
+  await page.locator('[data-action="pawwork-session-search"]').click()
+  const palette = page.getByRole("dialog")
+  await expect(palette).toBeVisible()
+
+  await page.keyboard.press("Escape")
+  await expect(palette).toHaveCount(0)
+  await expect(surface).toBeVisible()
+
+  await page.waitForTimeout(200)
+  await page.keyboard.press("Escape")
+  await expect(surface).toHaveCount(0)
+})
+
+test("a deep link carrying both ?skill= and ?prompt= seeds only the skill chip", async ({ page, project }) => {
+  await project.open({
+    setup: async (directory) => {
+      await seedProjectSkill(directory, "summarize", "Summarize the conversation")
+    },
+  })
+
+  // Skill wins on a combined link: the chip seeds and the stray prompt text must
+  // not survive (the skill bootstrap clears both params so prompt can't re-seed).
+  await page.goto(`/${project.slug}/session?skill=summarize&prompt=hello`)
+
+  await expect(page.locator(promptSelector)).toBeVisible()
+  const chip = page.locator('[data-type="skill"][data-name="summarize"]')
+  await expect(chip).toBeVisible({ timeout: 30_000 })
+  await expect(chip.locator("[data-cmd-label]")).toHaveText("summarize")
+  await expect(page.locator(promptSelector)).not.toContainText("hello")
+})
+
+test("Use in chat opens a new session and inserts the skill chip", async ({ page, project }) => {
+  await project.open({
+    setup: async (directory) => {
+      await seedProjectSkill(directory, "summarize", "Summarize the conversation")
+    },
+  })
+  await openSidebar(page)
+
+  await page.locator('[data-action="pawwork-skills-open"]').click()
+  const surface = page.locator('[data-component="skills-page"]')
+  await expect(surface).toBeVisible()
+
+  await surface.locator('[data-action="skill-open"][data-skill="summarize"]').click()
+  await expect(page.locator('[data-component="skill-detail"]')).toBeVisible()
+
+  await page.locator('[data-action="skill-use-in-chat"]').click()
+
+  // The surface closes and a fresh session composer seeds the structured skill
+  // chip, exactly as typing /summarize would, with no leading slash on the label.
+  await expect(surface).toHaveCount(0)
+  await expect(page.locator(promptSelector)).toBeVisible()
+  const chip = page.locator('[data-type="skill"][data-name="summarize"]')
+  await expect(chip).toBeVisible({ timeout: 30_000 })
+  await expect(chip.locator("[data-cmd-label]")).toHaveText("summarize")
+})
diff --git a/packages/app/e2e/snap/skills-surface.snap.ts b/packages/app/e2e/snap/skills-surface.snap.ts
new file mode 100644
index 000000000..920c496f6
--- /dev/null
+++ b/packages/app/e2e/snap/skills-surface.snap.ts
@@ -0,0 +1,107 @@
+import { mkdir, writeFile } from "node:fs/promises"
+import { join } from "node:path"
+import { test, expect } from "../fixtures"
+import { openSidebar } from "../actions"
+import { composeGrid, snapOutputPath, type Shot } from "./_compose"
+
+test.use({ viewport: { width: 1440, height: 900 }, deviceScaleFactor: 2 })
+
+// Seed project-scoped skills (.agents/skills/<name>/SKILL.md) so the gallery has
+// real installed capabilities to render in a clean env. Descriptions mirror the
+// long machine-facing trigger text the real officecli/morph skills carry, since
+// reading well against that text is the design risk the gallery has to clear.
+type Seed = { name: string; description: string; body: string }
+
+const SEEDS: Seed[] = [
+  {
+    name: "officecli-docx",
+    description:
+      "Use this skill any time a .docx Word document needs to be created, edited, or inspected. Trigger on requests to draft letters, reports, contracts, or any formatted prose that should ship as Word.",
+    body: ["## Overview", "", "Build and edit Word documents from the command line.", "", "```bash", "officecli docx build report.md --out report.docx", "```"].join("\n"),
+  },
+  {
+    name: "officecli-xlsx",
+    description:
+      "Use this skill when a spreadsheet is involved: creating, reading, or modifying .xlsx files, computing tables, or turning data into a workbook the user can open in Excel.",
+    body: ["## Overview", "", "Generate and edit spreadsheets.", "", "```bash", "officecli xlsx build data.csv --out book.xlsx", "```"].join("\n"),
+  },
+  {
+    name: "officecli-pptx",
+    description:
+      "Use this skill to produce slide decks. Trigger on any request to build, edit, or restructure a .pptx PowerPoint presentation from an outline or notes.",
+    body: ["## Overview", "", "Assemble slide decks from an outline.", "", "```bash", "officecli pptx build outline.md --out deck.pptx", "```"].join("\n"),
+  },
+  {
+    name: "morph-apply",
+    description:
+      "Use this skill to apply a fast, surgical edit to a single file given a patch description, when a full rewrite would be wasteful and the change is localized.",
+    body: ["## Overview", "", "Apply a localized edit without rewriting the whole file."].join("\n"),
+  },
+  {
+    name: "pdf-extract",
+    description:
+      "Use this skill when text or tables need to be pulled out of a PDF: invoices, scanned reports, forms, or any document delivered as .pdf.",
+    body: ["## Overview", "", "Extract text and tables from PDF files."].join("\n"),
+  },
+  {
+    name: "web-research",
+    description:
+      "Use this skill to gather current information from the web: news, prices, documentation, or any fact that may have changed since training.",
+    body: ["## Overview", "", "Search the web and summarize findings with sources."].join("\n"),
+  },
+]
+
+async function seedSkill(directory: string, seed: Seed) {
+  const skillDir = join(directory, ".agents", "skills", seed.name)
+  await mkdir(skillDir, { recursive: true })
+  await writeFile(
+    join(skillDir, "SKILL.md"),
+    ["---", `name: ${seed.name}`, `description: ${seed.description}`, "---", "", seed.body, ""].join("\n"),
+  )
+}
+
+test("skills-surface", async ({ page, project }) => {
+  test.setTimeout(180_000)
+
+  await project.open({
+    setup: async (directory) => {
+      for (const seed of SEEDS) await seedSkill(directory, seed)
+    },
+  })
+  await openSidebar(page)
+
+  await page.locator('[data-action="pawwork-skills-open"]').click()
+  const surface = page.locator('[data-component="skills-page"]')
+  await surface.waitFor({ state: "visible", timeout: 30_000 })
+
+  const rows = surface.locator('[data-action="skill-open"]')
+  await rows.first().waitFor({ state: "visible", timeout: 30_000 })
+  await expect.poll(() => rows.count()).toBeGreaterThanOrEqual(6)
+  const gallery = await page.screenshot()
+
+  // Open one capability to read its detail modal: humanized title, verbatim
+  // description, and the full SKILL.md markdown body with a copyable code block.
+  await surface.locator('[data-action="skill-open"][data-skill="officecli-docx"]').click()
+  const detail = page.locator('[data-component="skill-detail"]')
+  await detail.waitFor({ state: "visible", timeout: 30_000 })
+  const detailShot = await page.screenshot()
+
+  // Close and filter: the search box narrows the grid to matching capabilities.
+  // "xlsx" keeps the spreadsheet skill (and any whose description mentions it)
+  // and drops the unrelated ones, e.g. the seeded web-research capability.
+  await page.locator('[data-slot="dialog-close-button"]').click()
+  await detail.waitFor({ state: "detached", timeout: 10_000 })
+  await surface.locator('[data-action="skill-search"]').fill("xlsx")
+  await surface.locator('[data-action="skill-open"][data-skill="officecli-xlsx"]').waitFor({ state: "visible", timeout: 10_000 })
+  await expect(page.locator('[data-action="skill-open"][data-skill="web-research"]')).toHaveCount(0)
+  const filtered = await page.screenshot()
+
+  const shots: Shot[] = [
+    { name: "gallery", buf: gallery },
+    { name: "detail", buf: detailShot },
+    { name: "search", buf: filtered },
+  ]
+  const out = snapOutputPath("skills-surface")
+  await composeGrid(shots, out)
+  process.stdout.write(`\n[snap] skills-surface grid -> ${out}\n\n`)
+})
diff --git a/packages/app/src/components/session/session-header.tsx b/packages/app/src/components/session/session-header.tsx
index 0f7655e46..b4d58f18d 100644
--- a/packages/app/src/components/session/session-header.tsx
+++ b/packages/app/src/components/session/session-header.tsx
@@ -79,7 +79,7 @@ export function SessionHeader() {
 
   return (
     <>
-      <Show when={!shellSurface.settingsOpen() && !shellSurface.automationsOpen() && leftMount()}>
+      <Show when={!shellSurface.mainSurfaceOpen() && leftMount()}>
         {(mount) => (
           <Portal mount={mount()}>
             <div class="hidden md:flex w-full min-w-0 max-w-[720px] items-center overflow-hidden text-h3">
@@ -118,7 +118,7 @@ export function SessionHeader() {
           </Portal>
         )}
       </Show>
-      <Show when={!shellSurface.settingsOpen() && !shellSurface.automationsOpen() && rightMount()}>
+      <Show when={!shellSurface.mainSurfaceOpen() && rightMount()}>
         {(mount) => (
           <Portal mount={mount()}>
             <Show
diff --git a/packages/app/src/components/titlebar.tsx b/packages/app/src/components/titlebar.tsx
index 90cf4f8c9..4e95f57c4 100644
--- a/packages/app/src/components/titlebar.tsx
+++ b/packages/app/src/components/titlebar.tsx
@@ -10,6 +10,7 @@ import { useLayout } from "@/context/layout"
 import { isDesktopShell, isMacShell, isWindowsShell, shellAttrs, usePlatform } from "@/context/platform"
 import { useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
+import { useShellSurface } from "@/context/shell-surface"
 import { applyPath, backPath, forwardPath } from "./titlebar-history"
 
 export function Titlebar() {
@@ -17,6 +18,7 @@ export function Titlebar() {
   const platform = usePlatform()
   const command = useCommand()
   const language = useLanguage()
+  const shell = useShellSurface()
   const navigate = useNavigate()
   const location = useLocation()
   const params = useParams()
@@ -36,8 +38,15 @@ export function Titlebar() {
   // tabs slot would still claim panel-width on home/settings (where
   // SessionSidePanel doesn't render any tabs), pushing the right utility
   // toggle's StatusPopover fallback to the left.
+  // A main-takeover surface (settings / automations / skills) covers the session
+  // and its right panel, so the rail's reserved width + border-l must retract
+  // even though the route is still /session and the panel is still "opened".
   const tabsRailActive = createMemo(
-    () => isDesktop() && location.pathname.includes("/session") && layout.rightPanel.opened(),
+    () =>
+      isDesktop() &&
+      location.pathname.includes("/session") &&
+      layout.rightPanel.opened() &&
+      !shell.mainSurfaceOpen(),
   )
   const tabsRailWidth = () => (tabsRailActive() ? "var(--right-panel-width, 0px)" : "0px")
   const zoom = () => platform.webviewZoom?.() ?? 1
diff --git a/packages/app/src/context/shell-surface.tsx b/packages/app/src/context/shell-surface.tsx
index af8b870da..f66b3f8df 100644
--- a/packages/app/src/context/shell-surface.tsx
+++ b/packages/app/src/context/shell-surface.tsx
@@ -5,10 +5,18 @@ import type { SettingsTab } from "../pages/settings/settings-shell"
 export type ShellSurfaceContextValue = {
   settingsOpen: Accessor<boolean>
   automationsOpen: Accessor<boolean>
+  skillsOpen: Accessor<boolean>
+  // True while any main-region takeover surface (settings / automations /
+  // skills) covers the session. Single source of truth for "the session and its
+  // right panel are hidden", so titlebar/sidebar chrome that belongs to the
+  // covered session retracts uniformly instead of each call site re-deriving it.
+  mainSurfaceOpen: Accessor<boolean>
   openNewSession: (directory?: string) => void
   openSession: (session: Session | undefined) => void
   openSettings: (tab?: SettingsTab) => void
   closeSettings: () => void
+  openSkills: () => void
+  closeSkills: () => void
 }
 
 export const ShellSurfaceContext = createContext<ShellSurfaceContextValue>()
diff --git a/packages/app/src/i18n/en.ts b/packages/app/src/i18n/en.ts
index 738d11cd6..38114e3cd 100644
--- a/packages/app/src/i18n/en.ts
+++ b/packages/app/src/i18n/en.ts
@@ -794,7 +794,15 @@ export const dict = {
   "sidebar.empty.title": "No projects open",
   "sidebar.empty.description": "Open a project to get started",
   "sidebar.pawwork.search": "Search",
+  "sidebar.pawwork.skills": "Skills",
   "sidebar.pawwork.automations": "Automations",
+  "skills.title": "Skills",
+  "skills.subtitle": "What PawWork can do. Open a skill to see when it helps and how it works.",
+  "skills.search.placeholder": "Search skills",
+  "skills.empty.title": "No skills match your search",
+  "skills.error.title": "Couldn't load skills",
+  "skills.detail.suffix": "Skill",
+  "skills.detail.useInChat": "Use in chat",
   "automations.title": "Automations",
   "automations.empty.title": "No automations yet",
   "automations.empty.description": "Ask the assistant in a chat to automate a task for this project.",
diff --git a/packages/app/src/i18n/zh-branding.test.ts b/packages/app/src/i18n/zh-branding.test.ts
index db109d892..8c20d7ce8 100644
--- a/packages/app/src/i18n/zh-branding.test.ts
+++ b/packages/app/src/i18n/zh-branding.test.ts
@@ -23,4 +23,14 @@ describe("zh branding copy", () => {
       expect(zh[key]).not.toContain("PawWork")
     }
   })
+
+  test("never ships a standalone PawWork anywhere in the Chinese dict", () => {
+    // The curated list above only spot-checks a few surfaces; the brand rule is
+    // global — every Chinese string says 爪印, never PawWork. Scan the whole dict
+    // so a new key can't reintroduce the English name unnoticed.
+    const offenders = Object.entries(zh)
+      .filter(([, value]) => typeof value === "string" && value.includes("PawWork"))
+      .map(([key]) => key)
+    expect(offenders).toEqual([])
+  })
 })
diff --git a/packages/app/src/i18n/zh.ts b/packages/app/src/i18n/zh.ts
index 7faaa4230..c641ea123 100644
--- a/packages/app/src/i18n/zh.ts
+++ b/packages/app/src/i18n/zh.ts
@@ -704,7 +704,15 @@ export const dict = {
   "sidebar.empty.title": "还没有打开项目",
   "sidebar.empty.description": "打开一个项目开始使用",
   "sidebar.pawwork.search": "搜索",
+  "sidebar.pawwork.skills": "技能",
   "sidebar.pawwork.automations": "定时任务",
+  "skills.title": "技能",
+  "skills.subtitle": "爪印能帮你做这些事。点开任意一项，看看它适合什么场景。",
+  "skills.search.placeholder": "搜索技能",
+  "skills.empty.title": "没有匹配的技能",
+  "skills.error.title": "技能加载失败",
+  "skills.detail.suffix": "技能",
+  "skills.detail.useInChat": "在对话中使用",
   "automations.title": "定时任务",
   "automations.empty.title": "还没有定时任务",
   "automations.empty.description": "在对话里让助手把当前项目的某个任务设为自动运行。",
@@ -804,7 +812,7 @@ export const dict = {
   "settings.tab.memory": "记忆",
   "settings.backToApp": "返回应用",
   "settings.remote.placeholder": "远程访问设置即将在此处提供。",
-  "settings.integrations.description": "PawWork 连接的服务器，以及当前项目可用的 MCP、语言服务器、插件。",
+  "settings.integrations.description": "爪印连接的服务器，以及当前项目可用的 MCP、语言服务器、插件。",
   "settings.integrations.empty": "尚未配置。",
   "connectionHealth.toast.server.title": "服务器连接异常",
   "connectionHealth.toast.server.description": "{{count}} 个服务器的健康检查失败，打开集成查看是哪一个。",
diff --git a/packages/app/src/pages/layout.tsx b/packages/app/src/pages/layout.tsx
index a8044cb70..d208c384e 100644
--- a/packages/app/src/pages/layout.tsx
+++ b/packages/app/src/pages/layout.tsx
@@ -73,6 +73,7 @@ import { createPawworkWorkspaceDialogs } from "./layout/pawwork-workspace-dialog
 import { type WorkspaceSidebarContext } from "./layout/sidebar-workspace"
 import { PawworkSidebar, type PawworkSidebarSession } from "./layout/pawwork-sidebar"
 import { AutomationsSurface } from "@/pages/automations/automations-surface"
+import { SkillsSurface } from "@/pages/skills/skills-surface"
 import { createDefaultLayoutPageState, createLayoutPagePersistTarget } from "./layout/layout-page-store"
 import { SettingsContent, SettingsNav, isSettingsTab, type SettingsTab } from "@/pages/settings/settings-shell"
 import { DialogDeleteSession } from "@/components/dialog-delete-session"
@@ -93,9 +94,13 @@ export default function Layout(props: ParentProps) {
   let dialogDead = false
   // One mutually-exclusive shell surface at a time. Settings replaces the
   // sidebar + main; automations only takes over main (sidebar stays live).
-  const [activeSurface, setActiveSurface] = createSignal<"none" | "settings" | "automations">("none")
+  const [activeSurface, setActiveSurface] = createSignal<"none" | "settings" | "automations" | "skills">("none")
   const settingsOpen = createMemo(() => activeSurface() === "settings")
   const automationsOpen = createMemo(() => activeSurface() === "automations")
+  const skillsOpen = createMemo(() => activeSurface() === "skills")
+  // Any main-region takeover is open. Chrome belonging to the covered session
+  // (titlebar portals, the right-panel rail, sidebar route-active) reads this.
+  const mainSurfaceOpen = createMemo(() => activeSurface() !== "none")
   // Pending deep-link selection for the Automations panel; set just before the
   // surface opens (e.g. the automate tool's jump button) and read once on its
   // mount. Cleared on manual opens so a stale id never forces a row.
@@ -489,6 +494,10 @@ export default function Layout(props: ParentProps) {
     setActiveSurface((current) => (current === "automations" ? "none" : "automations"))
   }
 
+  function toggleSkills() {
+    setActiveSurface((current) => (current === "skills" ? "none" : "skills"))
+  }
+
   // Open the Automations panel focused on one automation. Wired to the
   // module-level bridge so the automate tool card (deep in the message thread,
   // outside this shell) can jump here. The surface reads the request on mount.
@@ -511,6 +520,28 @@ export default function Layout(props: ParentProps) {
     navigate(`/${base64Encode(directory)}/session?prompt=${prompt}`)
   }
 
+  // Skills resolve per active directory, exactly like the composer's slash
+  // picker (which queries the route's SDK directory = `currentDir()`). Use the
+  // active route dir — not the owner project root — so the gallery and "Use in
+  // chat" match the skills the composer would actually offer, including a
+  // sandbox/workspace's own `.agents/skills`, and "Use in chat" stays in the
+  // directory the user was working in instead of jumping to the project root.
+  // Falls back to the project root only when no directory is active (gallery
+  // opened with no project selected). This deliberately diverges from the
+  // Automations surface above, which is correctly project-scoped (it also keys
+  // off `projectID`); skills are directory-resolved, not project entities.
+  const skillsDirectory = () => currentDir() || currentProject()?.worktree || ""
+
+  // "Use in chat" from the Skills gallery leaves the surface and starts a fresh
+  // session in the active directory. The ?skill= bootstrap seeds the composer with
+  // the structured skill chip, so the picked skill activates deterministically.
+  function useSkillInChat(name: string) {
+    closeSettings()
+    const directory = skillsDirectory()
+    if (!directory) return
+    navigate(`/${base64Encode(directory)}/session?skill=${encodeURIComponent(name)}`)
+  }
+
   function openSettings(tab?: SettingsTab) {
     shellNavigation.openSettings(tab)
   }
@@ -915,6 +946,9 @@ export default function Layout(props: ParentProps) {
       onNew={() => openPawworkHome(options?.directory)}
       onSearch={() => command.show()}
       onOpenProject={chooseProject}
+      onOpenSkills={toggleSkills}
+      skillsActive={skillsOpen}
+      skillsLabel={() => language.t("sidebar.pawwork.skills")}
       onOpenAutomations={toggleAutomations}
       automationsActive={automationsOpen}
       automationsLabel={() => language.t("sidebar.pawwork.automations")}
@@ -949,10 +983,14 @@ export default function Layout(props: ParentProps) {
         value={{
           settingsOpen,
           automationsOpen,
+          skillsOpen,
+          mainSurfaceOpen,
           openNewSession: openPawworkHome,
           openSession: navigateToSession,
           openSettings,
           closeSettings,
+          openSkills: () => setActiveSurface("skills"),
+          closeSkills: () => setActiveSurface("none"),
         }}
       >
         <LayoutShellFrame
@@ -992,6 +1030,17 @@ export default function Layout(props: ParentProps) {
               />
             ),
           }}
+          skills={{
+            open: skillsOpen,
+            title: () => language.t("skills.title"),
+            content: () => (
+              <SkillsSurface
+                directory={skillsDirectory}
+                onClose={closeSettings}
+                onUseSkill={useSkillInChat}
+              />
+            ),
+          }}
           main={() => (
             <Show when={!startupAutoselectPending()} fallback={<AppStartupPending />}>
               {props.children}
diff --git a/packages/app/src/pages/layout/layout-shell-frame.tsx b/packages/app/src/pages/layout/layout-shell-frame.tsx
index a5ec438f4..e3fc05295 100644
--- a/packages/app/src/pages/layout/layout-shell-frame.tsx
+++ b/packages/app/src/pages/layout/layout-shell-frame.tsx
@@ -36,6 +36,11 @@ type LayoutShellFrameProps = {
     title: Accessor<string>
     content: () => JSXElement
   }
+  skills: {
+    open: Accessor<boolean>
+    title: Accessor<string>
+    content: () => JSXElement
+  }
   main: () => JSXElement
 }
 
@@ -50,8 +55,14 @@ export function LayoutShellFrame(props: LayoutShellFrameProps) {
 
   // Settings replaces both sidebar and main; automations only takes over main
   // and keeps the session sidebar interactive. mainSurfaceOpen covers either.
-  const mainSurfaceOpen = createMemo(() => props.settings.open() || props.automations.open())
-  const surfaceTitle = createMemo(() => (props.automations.open() ? props.automations.title() : props.settings.title()))
+  const mainSurfaceOpen = createMemo(() => props.settings.open() || props.automations.open() || props.skills.open())
+  const surfaceTitle = createMemo(() =>
+    props.automations.open()
+      ? props.automations.title()
+      : props.skills.open()
+        ? props.skills.title()
+        : props.settings.title(),
+  )
 
   createEffect(() => {
     const dialogLeftMargin = props.sidebar.visible() ? sidebarWidth() : 0
@@ -159,6 +170,9 @@ export function LayoutShellFrame(props: LayoutShellFrameProps) {
                     <Show when={props.automations.open()}>
                       <div class="absolute inset-0 z-10">{props.automations.content()}</div>
                     </Show>
+                    <Show when={props.skills.open()}>
+                      <div class="absolute inset-0 z-10">{props.skills.content()}</div>
+                    </Show>
                   </div>
                 </main>
               </div>
diff --git a/packages/app/src/pages/layout/pawwork-sidebar-top.tsx b/packages/app/src/pages/layout/pawwork-sidebar-top.tsx
index 7eb977c20..9bf966fc7 100644
--- a/packages/app/src/pages/layout/pawwork-sidebar-top.tsx
+++ b/packages/app/src/pages/layout/pawwork-sidebar-top.tsx
@@ -6,10 +6,13 @@ import { useLanguage } from "@/context/language"
 export function PawworkSidebarTop(props: {
   newSessionKeybind: Accessor<string | undefined>
   searchKeybind: Accessor<string | undefined>
+  skillsActive: Accessor<boolean>
+  skillsLabel: Accessor<string>
   automationsActive: Accessor<boolean>
   automationsLabel: Accessor<string>
   onNew: () => void
   onSearch: () => void
+  onOpenSkills: () => void
   onOpenAutomations: () => void
 }) {
   const language = useLanguage()
@@ -50,6 +53,26 @@ export function PawworkSidebarTop(props: {
             <span class="text-h3 text-fg-base min-w-0 flex-1 truncate">{language.t("sidebar.pawwork.search")}</span>
           </button>
         </TooltipKeybind>
+        <TooltipKeybind placement="right" title={props.skillsLabel()} keybind="">
+          <button
+            type="button"
+            data-action="pawwork-skills-open"
+            aria-pressed={props.skillsActive()}
+            onClick={props.onOpenSkills}
+            class="w-full h-[30px] flex items-center gap-3 px-2.5 rounded-md hover:bg-row-hover-overlay focus-visible:bg-row-hover-overlay transition-colors text-left focus:outline-none"
+            classList={{ "bg-row-active-overlay hover:bg-row-active-overlay": props.skillsActive() }}
+          >
+            <span class="shrink-0 w-4 h-4 flex items-center">
+              <Icon name="skill" class="text-icon-base" />
+            </span>
+            <span
+              class="text-h3 text-fg-base min-w-0 flex-1 truncate"
+              classList={{ "text-fg-strong font-emphasis": props.skillsActive() }}
+            >
+              {props.skillsLabel()}
+            </span>
+          </button>
+        </TooltipKeybind>
         <TooltipKeybind placement="right" title={props.automationsLabel()} keybind="">
           <button
             type="button"
diff --git a/packages/app/src/pages/layout/pawwork-sidebar.tsx b/packages/app/src/pages/layout/pawwork-sidebar.tsx
index 334433fea..924afc3a0 100644
--- a/packages/app/src/pages/layout/pawwork-sidebar.tsx
+++ b/packages/app/src/pages/layout/pawwork-sidebar.tsx
@@ -71,6 +71,9 @@ export const PawworkSidebar = (props: {
   onNew: () => void
   onSearch: () => void
   onOpenProject: () => void
+  onOpenSkills: () => void
+  skillsActive: Accessor<boolean>
+  skillsLabel: Accessor<string>
   onOpenAutomations: () => void
   automationsActive: Accessor<boolean>
   automationsLabel: Accessor<string>
@@ -381,10 +384,13 @@ export const PawworkSidebar = (props: {
       <PawworkSidebarTop
         newSessionKeybind={props.newSessionKeybind}
         searchKeybind={props.searchKeybind}
+        skillsActive={props.skillsActive}
+        skillsLabel={props.skillsLabel}
         automationsActive={props.automationsActive}
         automationsLabel={props.automationsLabel}
         onNew={props.onNew}
         onSearch={props.onSearch}
+        onOpenSkills={props.onOpenSkills}
         onOpenAutomations={props.onOpenAutomations}
       />
 
diff --git a/packages/app/src/pages/layout/sidebar-items.tsx b/packages/app/src/pages/layout/sidebar-items.tsx
index f7fd83615..82649eb12 100644
--- a/packages/app/src/pages/layout/sidebar-items.tsx
+++ b/packages/app/src/pages/layout/sidebar-items.tsx
@@ -64,10 +64,10 @@ const SessionRow = (props: {
       // While the Automations surface owns the main region the session route is
       // still mounted, so router keeps this link `.active` and the row stays
       // highlighted alongside the Automations nav item. Swap the active class to
-      // a no-op while automations is open so sidebar selection stays mutually
-      // exclusive with the surface. The row overlay + text emphasis both key off
+      // a no-op while a main-takeover surface is open so sidebar selection stays
+      // mutually exclusive with it. The row overlay + text emphasis both key off
       // `.active` (sidebar.css `:has(.active)`), so this clears them in one move.
-      activeClass={shellSurface.automationsOpen() ? "pw-route-active-suppressed" : "active"}
+      activeClass={shellSurface.mainSurfaceOpen() ? "pw-route-active-suppressed" : "active"}
       class="flex items-center min-w-0 w-full text-left focus:outline-none"
       onPointerDown={props.warmPress}
       onFocus={props.warmFocus}
@@ -296,7 +296,7 @@ export const NewSessionItem = (props: {
     <A
       href={defaultNewSessionHref(props.slug)}
       end
-      activeClass={shellSurface.automationsOpen() ? "pw-route-active-suppressed" : "active"}
+      activeClass={shellSurface.mainSurfaceOpen() ? "pw-route-active-suppressed" : "active"}
       class={`flex items-center gap-2 min-w-0 w-full text-left focus:outline-none leading-[1.4] ${props.dense ? "py-1" : "py-[5px]"}`}
       onClick={(event) => {
         if (!props.onOpenNewSession) return
diff --git a/packages/app/src/pages/session.tsx b/packages/app/src/pages/session.tsx
index 8da11844d..78317162c 100644
--- a/packages/app/src/pages/session.tsx
+++ b/packages/app/src/pages/session.tsx
@@ -59,7 +59,7 @@ export default function Page() {
   const comments = useComments()
   const terminal = useTerminal()
   const location = useLocation()
-  const [searchParams, setSearchParams] = useSearchParams<{ prompt?: string }>()
+  const [searchParams, setSearchParams] = useSearchParams<{ prompt?: string; skill?: string }>()
   const { params, tabs, view } = useSessionLayout()
 
   useSessionDesktopContext({
@@ -73,14 +73,36 @@ export default function Page() {
     send: window.api?.setDesktopContext,
   })
 
+  // `?skill=` and `?prompt=` are seeded by two independent bootstraps that both
+  // write the composer. They never coexist via the in-app entry points ("Use in
+  // chat" sets only skill, "Create via chat" sets only prompt), but a hand-built
+  // deep link could carry both. Skill wins, via two guards that must work
+  // together: (1) while a skill is present this prompt accessor yields undefined
+  // so the text never seeds; and (2) the skill bootstrap below clears BOTH
+  // params. Clearing only skill would flip guard (1) back on — the now-visible
+  // prompt would re-seed and overwrite the skill chip a beat later.
   useSessionRoutePromptBootstrap({
     ready: prompt.ready,
     sessionID: () => params.id,
-    prompt: () => searchParams.prompt,
+    prompt: () => (searchParams.skill ? undefined : searchParams.prompt),
     setPrompt: (text) => prompt.set([{ type: "text", content: text, start: 0, end: text.length }], text.length),
     clearPrompt: () => setSearchParams({ ...searchParams, prompt: undefined }),
   })
 
+  // "Use in chat" from the Skills gallery lands here with ?skill=<name>. Seed the
+  // composer with the same structured skill chip the slash picker inserts, so
+  // activation is deterministic (this exact skill loads, not a description match).
+  // Clears prompt too — see guard (2) above — so a combined deep link can't let
+  // a stray ?prompt= overwrite the chip once skill is consumed.
+  useSessionRoutePromptBootstrap({
+    ready: prompt.ready,
+    sessionID: () => params.id,
+    prompt: () => searchParams.skill,
+    setPrompt: (name) =>
+      prompt.set([{ type: "skill", name, source: "skill", content: `/${name}`, start: 0, end: name.length + 1 }], name.length + 1),
+    clearPrompt: () => setSearchParams({ ...searchParams, skill: undefined, prompt: undefined }),
+  })
+
   const isDesktop = createMediaQuery("(min-width: 768px)")
   const size = createSizing()
   const desktopSidePanelOpen = createMemo(() => isDesktop() && view().sidePanel.opened())
diff --git a/packages/app/src/pages/session/right-panel-tab-strip.tsx b/packages/app/src/pages/session/right-panel-tab-strip.tsx
index 7a44e9bba..ca1f00089 100644
--- a/packages/app/src/pages/session/right-panel-tab-strip.tsx
+++ b/packages/app/src/pages/session/right-panel-tab-strip.tsx
@@ -85,7 +85,7 @@ export function RightPanelTabStrip(props: {
     return map
   })
   return (
-    <Show when={!shellSurface.automationsOpen() && props.tabsPortalMount()}>
+    <Show when={!shellSurface.mainSurfaceOpen() && props.tabsPortalMount()}>
       {(mount) => (
         <Portal mount={mount()}>
           {/* Tabs.List portals into <Titlebar>'s `pawwork-titlebar-tabs` slot so the
diff --git a/packages/app/src/pages/skills/skill-detail.tsx b/packages/app/src/pages/skills/skill-detail.tsx
new file mode 100644
index 000000000..5e14e3d3d
--- /dev/null
+++ b/packages/app/src/pages/skills/skill-detail.tsx
@@ -0,0 +1,56 @@
+import { Show, type JSX } from "solid-js"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Markdown } from "@opencode-ai/ui/markdown"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { useLanguage } from "@/context/language"
+import { skillTitle, type SkillInfo } from "./skill-presentation"
+
+// Focused single-skill reader, mounted through the shared dialog stack
+// (useDialog().show). The dialog base owns the modal shell — overlay, focus
+// trap, initial focus, Escape, focus restore, background inert — so this only
+// composes the content: the humanized title in the header (the raw slug is
+// dropped here — it only echoes the title and reappears in the footer path),
+// then a bordered cream summary card carrying the verbatim frontmatter
+// description (a real outline keeps the machine-facing blurb from blurring into
+// the SKILL.md markdown below it), location + actions in the sticky footer.
+// No prev/next.
+export function SkillDetail(props: { skill: SkillInfo; footer?: JSX.Element }): JSX.Element {
+  const language = useLanguage()
+  const description = () => props.skill.description?.trim()
+  return (
+    <Dialog
+      size="large"
+      title={
+        <div class="flex items-center gap-3">
+          <span class="flex size-10 shrink-0 items-center justify-center rounded-[10px] bg-surface-interactive-base">
+            <Icon name="skill" class="size-5 text-brand-primary" />
+          </span>
+          <div class="min-w-0">
+            <div class="text-h2 text-fg-strong">
+              {skillTitle(props.skill.name)}
+              <span class="ml-1.5 font-normal text-fg-weaker">{language.t("skills.detail.suffix")}</span>
+            </div>
+          </div>
+        </div>
+      }
+      footer={
+        <div class="flex w-full items-center justify-between gap-3">
+          <span class="min-w-0 truncate font-mono text-caption text-fg-weaker">{props.skill.location}</span>
+          {props.footer}
+        </div>
+      }
+    >
+      {/* `skill-detail` is the e2e handle for "the reader is open"; keep it. */}
+      <div data-component="skill-detail" class="min-h-0 flex-1 overflow-auto px-6 pb-2 pt-4">
+        <Show when={description()}>
+          {(summary) => (
+            <div class="mb-5 rounded-md border border-border-weak bg-bg-cream px-4 py-3">
+              <p class="text-body text-fg-base">{summary()}</p>
+            </div>
+          )}
+        </Show>
+        <Markdown text={props.skill.content} cacheKey={props.skill.name} class="text-body" />
+      </div>
+    </Dialog>
+  )
+}
diff --git a/packages/app/src/pages/skills/skill-presentation.ts b/packages/app/src/pages/skills/skill-presentation.ts
new file mode 100644
index 000000000..cfb3bde53
--- /dev/null
+++ b/packages/app/src/pages/skills/skill-presentation.ts
@@ -0,0 +1,29 @@
+// Presentation helpers for the Skills gallery. Skills are rendered straight from
+// their own universal format (name + description); there is no curation layer.
+
+export interface SkillInfo {
+  name: string
+  description?: string
+  location: string
+  content: string
+}
+
+// `officecli-docx` -> `Officecli Docx`. Split on - and _, capitalize each word.
+export function skillTitle(name: string): string {
+  return name
+    .split(/[-_]/)
+    .filter(Boolean)
+    .map((word) => word[0]!.toUpperCase() + word.slice(1))
+    .join(" ")
+}
+
+// Case-insensitive match across title, raw name, and description.
+export function skillMatches(skill: SkillInfo, query: string): boolean {
+  const needle = query.trim().toLowerCase()
+  if (!needle) return true
+  return (
+    skill.name.toLowerCase().includes(needle) ||
+    skillTitle(skill.name).toLowerCase().includes(needle) ||
+    (skill.description?.toLowerCase().includes(needle) ?? false)
+  )
+}
diff --git a/packages/app/src/pages/skills/skills-surface.tsx b/packages/app/src/pages/skills/skills-surface.tsx
new file mode 100644
index 000000000..77829065d
--- /dev/null
+++ b/packages/app/src/pages/skills/skills-surface.tsx
@@ -0,0 +1,166 @@
+import { type Accessor, createMemo, createResource, createSignal, For, type JSX, Match, onCleanup, onMount, Show, Switch } from "solid-js"
+import { Button } from "@opencode-ai/ui/button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { useGlobalSDK } from "@/context/global-sdk"
+import { useLanguage } from "@/context/language"
+import { SkillDetail } from "./skill-detail"
+import { skillMatches, skillTitle, type SkillInfo } from "./skill-presentation"
+
+// One capability row: brand-tinted tile + humanized title + the raw description
+// clamped to two lines. Two-up rows keep the band compact while the description
+// stays legible; borderless, the hover tint is the only affordance.
+function SkillRow(props: { skill: SkillInfo; onOpen: () => void }): JSX.Element {
+  const description = () => props.skill.description?.trim()
+  return (
+    <button
+      type="button"
+      data-action="skill-open"
+      data-skill={props.skill.name}
+      onClick={props.onOpen}
+      class="flex w-full items-start gap-3 rounded-md px-2 py-2.5 text-left hover:bg-row-hover-overlay focus:outline-none focus-visible:bg-row-hover-overlay"
+    >
+      <span class="flex size-9 shrink-0 items-center justify-center rounded-[10px] bg-surface-interactive-base">
+        <Icon name="skill" class="size-[18px] text-brand-primary" />
+      </span>
+      <span class="min-w-0 flex-1">
+        <span class="block truncate text-h3 text-fg-strong">{skillTitle(props.skill.name)}</span>
+        <Show when={description()}>
+          {(summary) => <span class="mt-0.5 line-clamp-2 text-caption text-fg-weak">{summary()}</span>}
+        </Show>
+      </span>
+    </button>
+  )
+}
+
+export function SkillsSurface(props: {
+  directory: Accessor<string>
+  onClose: () => void
+  onUseSkill: (name: string) => void
+}): JSX.Element {
+  const globalSDK = useGlobalSDK()
+  const language = useLanguage()
+  const dialog = useDialog()
+  const [query, setQuery] = createSignal("")
+
+  // The detail reader is a modal in the shared dialog stack; opening it there
+  // gets focus trap / initial focus / focus restore / background inert for free
+  // instead of re-deriving them on a hand-rolled overlay. "Use in chat" closes
+  // the dialog before navigating so the stack unwinds cleanly.
+  const openDetail = (skill: SkillInfo) => {
+    dialog.show(() => (
+      <SkillDetail
+        skill={skill}
+        footer={
+          <Button
+            variant="primary"
+            data-action="skill-use-in-chat"
+            onClick={() => {
+              dialog.close()
+              props.onUseSkill(skill.name)
+            }}
+          >
+            {language.t("skills.detail.useInChat")}
+          </Button>
+        }
+      />
+    ))
+  }
+
+  const [skills] = createResource(
+    () => props.directory(),
+    async (directory) => {
+      const res = await globalSDK.client.app.skills({ directory })
+      return (res.data ?? []).slice().sort((a, b) => skillTitle(a.name).localeCompare(skillTitle(b.name)))
+    },
+  )
+
+  const filtered = createMemo(() => {
+    const all = skills() ?? []
+    const needle = query()
+    return needle ? all.filter((skill) => skillMatches(skill, needle)) : all
+  })
+
+  // While the resource is still resolving its first batch, `skills()` is
+  // undefined and `filtered()` is empty — rendering the empty-state copy then
+  // would flash "no skills" on every normal load and mislabel a load failure as
+  // "no skills". Key the body off the resource state so the empty copy only
+  // shows once we actually have a (filtered-to-zero) result, and load failures
+  // get their own message.
+  const view = createMemo<"loading" | "error" | "empty" | "list">(() => {
+    if (skills.state === "errored") return "error"
+    if (skills.state === "pending" || skills.state === "unresolved") return "loading"
+    return filtered().length > 0 ? "list" : "empty"
+  })
+
+  // Escape closes the surface — but only when nothing in the shared dialog stack
+  // owns it. That covers the skill-detail reader AND a command palette opened
+  // from the still-live sidebar (its search calls command.show() directly,
+  // bypassing the keybind gate that otherwise suppresses palettes behind a
+  // surface). `dialog.active` is the single source of truth for "a modal owns
+  // Escape", so we defer to it instead of sniffing the DOM for overlay
+  // components; we bail without preventing default so the event still reaches
+  // whatever modal is up. Only when the stack is empty do we close the surface.
+  onMount(() => {
+    const onEscape = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return
+      if (dialog.active) return
+      event.preventDefault()
+      props.onClose()
+    }
+    document.addEventListener("keydown", onEscape, true)
+    onCleanup(() => document.removeEventListener("keydown", onEscape, true))
+  })
+
+  return (
+    <section
+      data-component="skills-page"
+      aria-label={language.t("skills.title")}
+      class="no-scrollbar size-full overflow-y-auto bg-bg-base"
+    >
+      <div class="mx-auto w-full max-w-[760px] px-6 py-6">
+        <div class="flex items-start justify-between gap-4">
+          <div class="min-w-0">
+            <h1 class="text-h2 text-fg-strong">{language.t("skills.title")}</h1>
+            <p class="mt-1 text-body text-fg-weak">{language.t("skills.subtitle")}</p>
+          </div>
+          <label class="flex h-9 w-56 shrink-0 items-center gap-2 rounded-lg border border-border-weak bg-bg-base px-3 focus-within:border-border-strong">
+            <Icon name="magnifying-glass" class="size-4 shrink-0 text-icon-weak" />
+            <input
+              type="text"
+              data-action="skill-search"
+              value={query()}
+              onInput={(event) => setQuery(event.currentTarget.value)}
+              placeholder={language.t("skills.search.placeholder")}
+              class="min-w-0 flex-1 bg-transparent text-body text-fg-base placeholder:text-fg-weaker focus:outline-none"
+            />
+          </label>
+        </div>
+
+        <Switch>
+          {/* Reserve the row band's height so the layout doesn't jump when the
+              list lands; no "Loading…" copy (local skills resolve fast, and the
+              label would just flicker). */}
+          <Match when={view() === "loading"}>
+            <div data-component="skills-loading" class="px-2.5 py-16" aria-hidden="true" />
+          </Match>
+          <Match when={view() === "error"}>
+            <div data-component="skills-error" class="px-2.5 py-16 text-center text-body text-fg-weak">
+              {language.t("skills.error.title")}
+            </div>
+          </Match>
+          <Match when={view() === "empty"}>
+            <div data-component="skills-empty" class="px-2.5 py-16 text-center text-body text-fg-weak">
+              {language.t("skills.empty.title")}
+            </div>
+          </Match>
+          <Match when={view() === "list"}>
+            <div class="mt-6 grid grid-cols-1 gap-x-8 gap-y-1 sm:grid-cols-2">
+              <For each={filtered()}>{(skill) => <SkillRow skill={skill} onOpen={() => openDetail(skill)} />}</For>
+            </div>
+          </Match>
+        </Switch>
+      </div>
+    </section>
+  )
+}