From ff85d28e4729f647c1994ca931fda9e0c812b8c3 Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 10:40:18 +0200
Subject: [PATCH 01/25] feat(skills): add shared editable skills with V2 bridge
 and GUI

Persist team skills in skills.db, expose CRUD + HTTP catalog, register
them with OpenCode via ctx.skill.transform, and edit in the web UI with
CodeMirror markdown preview. Refs: #402
---
 README.md                                     |  22 +-
 src/services/api-handlers.ts                  | 145 +++++++++++
 src/services/skills/skills-manager.ts         | 238 ++++++++++++++++++
 src/services/skills/types.ts                  |  37 +++
 src/services/turso/schema-migrations.ts       |  27 ++
 src/services/web-server.ts                    |  82 ++++++
 src/v2/adapter.ts                             |  72 ++++++
 tests/skills-api-handlers.test.ts             |  74 ++++++
 tests/skills-manager.test.ts                  | 135 ++++++++++
 tests/v2-skills-bridge.test.ts                |  60 +++++
 web/bun.lock                                  |  58 +++++
 web/package.json                              |   6 +
 web/src/App.svelte                            |  31 ++-
 .../lib/components/explorer/AppSidebar.svelte |  16 ++
 .../components/explorer/SkillDialog.svelte    | 118 +++++++++
 .../lib/components/explorer/SkillsView.svelte | 105 ++++++++
 .../lib/components/ui/markdown-editor.svelte  |  94 +++++++
 web/src/lib/i18n/translations.ts              |  56 +++++
 web/src/lib/routes.ts                         |  21 +-
 web/src/lib/stores/skills.svelte.ts           | 166 ++++++++++++
 web/vite.config.ts                            |  14 ++
 21 files changed, 1564 insertions(+), 13 deletions(-)
 create mode 100644 src/services/skills/skills-manager.ts
 create mode 100644 src/services/skills/types.ts
 create mode 100644 tests/skills-api-handlers.test.ts
 create mode 100644 tests/skills-manager.test.ts
 create mode 100644 tests/v2-skills-bridge.test.ts
 create mode 100644 web/src/lib/components/explorer/SkillDialog.svelte
 create mode 100644 web/src/lib/components/explorer/SkillsView.svelte
 create mode 100644 web/src/lib/components/ui/markdown-editor.svelte
 create mode 100644 web/src/lib/stores/skills.svelte.ts

diff --git a/README.md b/README.md
index d2b405f6..710cda5c 100644
--- a/README.md
+++ b/README.md
@@ -161,15 +161,23 @@ You do **not** need to ask OpenCode to “remember” things for the plugin to w
 
 Manual search/add/list still work even if auto-capture has no provider configured. Auto-capture and user profile learning need a provider that can return structured/tool-call output.
 
-### Memory vs AGENTS.md / project docs
+### Memory vs AGENTS.md vs Skills
 
-| Store in **memory**                                                  | Store in **AGENTS.md** / static docs                        |
-| -------------------------------------------------------------------- | ----------------------------------------------------------- |
-| Project-specific decisions, bug patterns, “we tried X and it failed” | Stable rules and workflows that rarely change               |
-| User preferences discovered over sessions                            | Always-on coding conventions and process                    |
-| Facts that should follow you across chats                            | Instructions every agent should see regardless of retrieval |
+| Store in **memory**                                                  | Store in **AGENTS.md** / static docs                        | Store as **Skills** (web UI / `skills.db`)            |
+| -------------------------------------------------------------------- | ----------------------------------------------------------- | ----------------------------------------------------- |
+| Project-specific decisions, bug patterns, “we tried X and it failed” | Stable rules and workflows that rarely change               | Reusable procedures the agent loads on demand         |
+| User preferences discovered over sessions                            | Always-on coding conventions and process                    | Team-editable skill packs shared via the same storage |
+| Facts that should follow you across chats                            | Instructions every agent should see regardless of retrieval | OpenCode-native `skill` tool (V2 plugin bridge)       |
 
-Rule of thumb: if it is a lasting project instruction, put it in AGENTS.md; if it is context that grows from real work, let memory (or auto-capture) hold it.
+Rule of thumb: lasting always-on project instructions → `AGENTS.md`; growing work context → memory; reusable on-demand procedures → **Skills**.
+
+#### Shared Skills (V2)
+
+- Create/edit skills in the web explorer (**Skills** tab): Markdown editor with live preview.
+- Persisted in `skills.db` under the plugin storage path (not as memory vectors).
+- On OpenCode **V2**, the plugin registers enabled skills via `ctx.skill.transform` so the agent can load them with the native `skill` tool.
+- Optional HTTP catalog for other OpenCode instances: add your web base URL to config, e.g. `"skills": ["http://127.0.0.1:4747/skills/"]` (serves `/skills/index.json` and `/skills/<id>/<id>.md`).
+- REST: `GET/POST /api/skills`, `GET/PUT/DELETE /api/skills/:id`.
 
 ### Intelligent prompt-based memory extraction
 
diff --git a/src/services/api-handlers.ts b/src/services/api-handlers.ts
index 050ab856..abf8cc55 100644
--- a/src/services/api-handlers.ts
+++ b/src/services/api-handlers.ts
@@ -1669,3 +1669,148 @@ export async function handleRunTagMigrationBatch(
     return { success: false, error: String(error) };
   }
 }
+
+function skillToApi(skill: {
+  id: string;
+  name: string;
+  description: string;
+  content: string;
+  autoinvoke: boolean;
+  enabled: boolean;
+  containerTag: string | null;
+  createdAt: number;
+  updatedAt: number;
+}) {
+  return {
+    id: skill.id,
+    name: skill.name,
+    description: skill.description,
+    content: skill.content,
+    autoinvoke: skill.autoinvoke,
+    enabled: skill.enabled,
+    containerTag: skill.containerTag,
+    createdAt: safeToISOString(skill.createdAt),
+    updatedAt: safeToISOString(skill.updatedAt),
+  };
+}
+
+export async function handleListSkills(options?: {
+  containerTag?: string;
+  enabledOnly?: boolean;
+}): Promise<ApiResponse<{ items: ReturnType<typeof skillToApi>[] }>> {
+  try {
+    const { skillsManager } = await import("./skills/skills-manager.js");
+    const items = await skillsManager.list({
+      containerTag: options?.containerTag,
+      enabledOnly: options?.enabledOnly,
+    });
+    return { success: true, data: { items: items.map(skillToApi) } };
+  } catch (error) {
+    log("handleListSkills: error", { error: String(error) });
+    return { success: false, error: String(error) };
+  }
+}
+
+export async function handleGetSkill(
+  id: string
+): Promise<ApiResponse<ReturnType<typeof skillToApi>>> {
+  try {
+    const { skillsManager } = await import("./skills/skills-manager.js");
+    const skill = await skillsManager.get(id);
+    if (!skill) return { success: false, error: `Skill not found: ${id}` };
+    return { success: true, data: skillToApi(skill) };
+  } catch (error) {
+    log("handleGetSkill: error", { error: String(error) });
+    return { success: false, error: String(error) };
+  }
+}
+
+export async function handleCreateSkill(body: {
+  id?: string;
+  name?: string;
+  description?: string;
+  content?: string;
+  autoinvoke?: boolean;
+  enabled?: boolean;
+  containerTag?: string | null;
+}): Promise<ApiResponse<ReturnType<typeof skillToApi>>> {
+  try {
+    if (!body?.id || !body?.name || !body?.content) {
+      return { success: false, error: "id, name, and content are required" };
+    }
+    const { skillsManager } = await import("./skills/skills-manager.js");
+    const skill = await skillsManager.create({
+      id: body.id,
+      name: body.name,
+      description: body.description,
+      content: body.content,
+      autoinvoke: body.autoinvoke,
+      enabled: body.enabled,
+      containerTag: body.containerTag,
+    });
+    return { success: true, data: skillToApi(skill) };
+  } catch (error) {
+    log("handleCreateSkill: error", { error: String(error) });
+    return { success: false, error: String(error) };
+  }
+}
+
+export async function handleUpdateSkill(
+  id: string,
+  body: {
+    name?: string;
+    description?: string;
+    content?: string;
+    autoinvoke?: boolean;
+    enabled?: boolean;
+    containerTag?: string | null;
+  }
+): Promise<ApiResponse<ReturnType<typeof skillToApi>>> {
+  try {
+    const { skillsManager } = await import("./skills/skills-manager.js");
+    const skill = await skillsManager.update(id, body);
+    return { success: true, data: skillToApi(skill) };
+  } catch (error) {
+    log("handleUpdateSkill: error", { error: String(error) });
+    return { success: false, error: String(error) };
+  }
+}
+
+export async function handleDeleteSkill(id: string): Promise<ApiResponse<{ deleted: boolean }>> {
+  try {
+    const { skillsManager } = await import("./skills/skills-manager.js");
+    const deleted = await skillsManager.delete(id);
+    if (!deleted) return { success: false, error: `Skill not found: ${id}` };
+    return { success: true, data: { deleted: true } };
+  } catch (error) {
+    log("handleDeleteSkill: error", { error: String(error) });
+    return { success: false, error: String(error) };
+  }
+}
+
+export async function handleSkillsCatalogIndex(): Promise<
+  ApiResponse<{ skills: Array<{ name: string; version: string; files: string[] }> }>
+> {
+  try {
+    const { skillsManager } = await import("./skills/skills-manager.js");
+    const catalog = await skillsManager.toHttpCatalog();
+    return { success: true, data: catalog };
+  } catch (error) {
+    log("handleSkillsCatalogIndex: error", { error: String(error) });
+    return { success: false, error: String(error) };
+  }
+}
+
+export async function handleSkillsCatalogFile(
+  id: string
+): Promise<ApiResponse<{ markdown: string }>> {
+  try {
+    const { skillsManager } = await import("./skills/skills-manager.js");
+    const markdown = await skillsManager.toCatalogMarkdown(id);
+    if (!markdown) return { success: false, error: `Skill not found: ${id}` };
+    return { success: true, data: { markdown } };
+  } catch (error) {
+    log("handleSkillsCatalogFile: error", { error: String(error) });
+    return { success: false, error: String(error) };
+  }
+}
diff --git a/src/services/skills/skills-manager.ts b/src/services/skills/skills-manager.ts
new file mode 100644
index 00000000..f65c104d
--- /dev/null
+++ b/src/services/skills/skills-manager.ts
@@ -0,0 +1,238 @@
+import { join } from "node:path";
+import { tursoConnectionManager } from "../turso/connection-manager.js";
+import type { TursoDb } from "../turso/turso-db.js";
+import { CONFIG } from "../../config.js";
+import { log } from "../logger.js";
+import { isValidSkillId, type SkillInput, type SkillRecord, type SkillUpdate } from "./types.js";
+
+const SKILLS_DB_NAME = "skills.db";
+
+type SkillChangeListener = () => void;
+
+const skillChangeListeners = new Set<SkillChangeListener>();
+
+export function onSkillsChanged(listener: SkillChangeListener): () => void {
+  skillChangeListeners.add(listener);
+  return () => skillChangeListeners.delete(listener);
+}
+
+function notifySkillsChanged(): void {
+  for (const listener of skillChangeListeners) {
+    try {
+      listener();
+    } catch (error) {
+      log("skills change listener failed", { error: String(error) });
+    }
+  }
+}
+
+function rowToSkill(row: Record<string, unknown>): SkillRecord {
+  return {
+    id: String(row.id),
+    name: String(row.name),
+    description: String(row.description ?? ""),
+    content: String(row.content ?? ""),
+    autoinvoke: Number(row.autoinvoke ?? 1) === 1,
+    enabled: Number(row.enabled ?? 1) === 1,
+    containerTag: row.container_tag == null ? null : String(row.container_tag),
+    createdAt: Number(row.created_at),
+    updatedAt: Number(row.updated_at),
+  };
+}
+
+export class SkillsManager {
+  private db: TursoDb | null = null;
+  private dbPath: string;
+  private initPromise: Promise<void> | null = null;
+
+  constructor() {
+    this.dbPath = join(CONFIG.storagePath || "", SKILLS_DB_NAME);
+  }
+
+  reset(): void {
+    this.db = null;
+    this.initPromise = null;
+    this.dbPath = join(CONFIG.storagePath || "", SKILLS_DB_NAME);
+  }
+
+  private async initialize(): Promise<void> {
+    if (this.initPromise) return this.initPromise;
+    this.initPromise = this.initDatabase();
+    return this.initPromise;
+  }
+
+  private async initDatabase(): Promise<void> {
+    this.dbPath = join(CONFIG.storagePath || "", SKILLS_DB_NAME);
+    const db = await tursoConnectionManager.getConnection(this.dbPath);
+    const { applySchemaMigrations, SKILLS_MIGRATIONS } =
+      await import("../turso/schema-migrations.js");
+    await applySchemaMigrations(db, SKILLS_MIGRATIONS, {
+      dbPath: this.dbPath,
+      label: "skills",
+    });
+    this.db = db;
+  }
+
+  private async getDb(): Promise<TursoDb> {
+    await this.initialize();
+    if (!this.db) throw new Error("Skills database not initialized");
+    return this.db;
+  }
+
+  /** Absolute synthetic SKILL.md path for OpenCode Skill.Info.path */
+  skillPath(id: string): string {
+    return join(this.dbPath.replace(/skills\.db$/, "skills-content"), id, "SKILL.md");
+  }
+
+  async list(options?: {
+    containerTag?: string | null;
+    enabledOnly?: boolean;
+  }): Promise<SkillRecord[]> {
+    const db = await this.getDb();
+    const clauses: string[] = [];
+    const args: Array<string | number> = [];
+
+    if (options?.enabledOnly) {
+      clauses.push(`enabled = 1`);
+    }
+    if (options?.containerTag !== undefined) {
+      if (options.containerTag === null) {
+        clauses.push(`container_tag IS NULL`);
+      } else {
+        clauses.push(`(container_tag IS NULL OR container_tag = ?)`);
+        args.push(options.containerTag);
+      }
+    }
+
+    const where = clauses.length ? `WHERE ${clauses.join(" AND ")}` : "";
+    const rows = await db.all(
+      `SELECT * FROM skills ${where} ORDER BY updated_at DESC, id ASC`,
+      args
+    );
+    return (rows as Record<string, unknown>[]).map(rowToSkill);
+  }
+
+  async get(id: string): Promise<SkillRecord | null> {
+    const db = await this.getDb();
+    const row = await db.get(`SELECT * FROM skills WHERE id = ?`, [id]);
+    return row ? rowToSkill(row as Record<string, unknown>) : null;
+  }
+
+  async create(input: SkillInput): Promise<SkillRecord> {
+    const id = input.id.trim();
+    if (!isValidSkillId(id)) {
+      throw new Error(
+        "Invalid skill id: use lowercase kebab-case (a-z, 0-9, single hyphens), 1–64 characters"
+      );
+    }
+    const name = input.name.trim();
+    if (!name) throw new Error("Skill name is required");
+    const content = input.content;
+    if (typeof content !== "string" || !content.trim()) {
+      throw new Error("Skill content is required");
+    }
+
+    const existing = await this.get(id);
+    if (existing) throw new Error(`Skill already exists: ${id}`);
+
+    const now = Date.now();
+    const db = await this.getDb();
+    await db.run(
+      `INSERT INTO skills (
+        id, name, description, content, autoinvoke, enabled, container_tag, created_at, updated_at
+      ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+      [
+        id,
+        name,
+        (input.description ?? "").trim(),
+        content,
+        input.autoinvoke === false ? 0 : 1,
+        input.enabled === false ? 0 : 1,
+        input.containerTag ?? null,
+        now,
+        now,
+      ]
+    );
+
+    const created = await this.get(id);
+    if (!created) throw new Error("Failed to create skill");
+    notifySkillsChanged();
+    return created;
+  }
+
+  async update(id: string, update: SkillUpdate): Promise<SkillRecord> {
+    const existing = await this.get(id);
+    if (!existing) throw new Error(`Skill not found: ${id}`);
+
+    const name = update.name !== undefined ? update.name.trim() : existing.name;
+    if (!name) throw new Error("Skill name is required");
+    const content = update.content !== undefined ? update.content : existing.content;
+    if (typeof content !== "string" || !content.trim()) {
+      throw new Error("Skill content is required");
+    }
+
+    const description =
+      update.description !== undefined ? update.description.trim() : existing.description;
+    const autoinvoke = update.autoinvoke !== undefined ? update.autoinvoke : existing.autoinvoke;
+    const enabled = update.enabled !== undefined ? update.enabled : existing.enabled;
+    const containerTag =
+      update.containerTag !== undefined ? update.containerTag : existing.containerTag;
+    const now = Date.now();
+
+    const db = await this.getDb();
+    await db.run(
+      `UPDATE skills SET
+        name = ?, description = ?, content = ?, autoinvoke = ?, enabled = ?,
+        container_tag = ?, updated_at = ?
+      WHERE id = ?`,
+      [name, description, content, autoinvoke ? 1 : 0, enabled ? 1 : 0, containerTag, now, id]
+    );
+
+    const updated = await this.get(id);
+    if (!updated) throw new Error("Failed to update skill");
+    notifySkillsChanged();
+    return updated;
+  }
+
+  async delete(id: string): Promise<boolean> {
+    const existing = await this.get(id);
+    if (!existing) return false;
+    const db = await this.getDb();
+    await db.run(`DELETE FROM skills WHERE id = ?`, [id]);
+    notifySkillsChanged();
+    return true;
+  }
+
+  /** Catalog payload for OpenCode HTTP skills sources (`skills: ["http://host/skills/"]`). */
+  async toHttpCatalog(): Promise<{
+    skills: Array<{ name: string; version: string; files: string[] }>;
+  }> {
+    const enabled = await this.list({ enabledOnly: true });
+    return {
+      skills: enabled.map((skill) => ({
+        name: skill.id,
+        version: String(skill.updatedAt),
+        // OpenCode fetches `{base}/{name}/{file}` — named .md form → skill id = name.
+        files: [`${skill.id}.md`],
+      })),
+    };
+  }
+
+  async toCatalogMarkdown(id: string): Promise<string | null> {
+    const skill = await this.get(id);
+    if (!skill || !skill.enabled) return null;
+    const frontmatter = [
+      "---",
+      `name: ${JSON.stringify(skill.name)}`,
+      `description: ${JSON.stringify(skill.description)}`,
+      "metadata:",
+      `  opencode/autoinvoke: ${skill.autoinvoke ? '"true"' : '"false"'}`,
+      "---",
+      "",
+      skill.content,
+    ].join("\n");
+    return frontmatter;
+  }
+}
+
+export const skillsManager = new SkillsManager();
diff --git a/src/services/skills/types.ts b/src/services/skills/types.ts
new file mode 100644
index 00000000..c18875a5
--- /dev/null
+++ b/src/services/skills/types.ts
@@ -0,0 +1,37 @@
+export interface SkillRecord {
+  id: string;
+  name: string;
+  description: string;
+  content: string;
+  autoinvoke: boolean;
+  enabled: boolean;
+  containerTag: string | null;
+  createdAt: number;
+  updatedAt: number;
+}
+
+export interface SkillInput {
+  id: string;
+  name: string;
+  description?: string;
+  content: string;
+  autoinvoke?: boolean;
+  enabled?: boolean;
+  containerTag?: string | null;
+}
+
+export interface SkillUpdate {
+  name?: string;
+  description?: string;
+  content?: string;
+  autoinvoke?: boolean;
+  enabled?: boolean;
+  containerTag?: string | null;
+}
+
+/** OpenCode-compatible skill id: lowercase kebab-case, 1–64 chars. */
+export const SKILL_ID_PATTERN = /^[a-z0-9]+(-[a-z0-9]+)*$/;
+
+export function isValidSkillId(id: string): boolean {
+  return id.length >= 1 && id.length <= 64 && SKILL_ID_PATTERN.test(id);
+}
diff --git a/src/services/turso/schema-migrations.ts b/src/services/turso/schema-migrations.ts
index 831db97e..ceeb270f 100644
--- a/src/services/turso/schema-migrations.ts
+++ b/src/services/turso/schema-migrations.ts
@@ -261,6 +261,33 @@ export const USER_PROFILES_MIGRATIONS: SchemaMigration[] = [
   },
 ];
 
+export const SKILLS_MIGRATIONS: SchemaMigration[] = [
+  {
+    version: 1,
+    description: "Baseline shared skills table",
+    statements: [
+      {
+        sql: `
+          CREATE TABLE IF NOT EXISTS skills (
+            id TEXT PRIMARY KEY,
+            name TEXT NOT NULL,
+            description TEXT NOT NULL DEFAULT '',
+            content TEXT NOT NULL,
+            autoinvoke INTEGER NOT NULL DEFAULT 1,
+            enabled INTEGER NOT NULL DEFAULT 1,
+            container_tag TEXT,
+            created_at INTEGER NOT NULL,
+            updated_at INTEGER NOT NULL
+          )
+        `,
+      },
+      { sql: `CREATE INDEX IF NOT EXISTS idx_skills_enabled ON skills(enabled)` },
+      { sql: `CREATE INDEX IF NOT EXISTS idx_skills_container_tag ON skills(container_tag)` },
+      { sql: `CREATE INDEX IF NOT EXISTS idx_skills_updated_at ON skills(updated_at DESC)` },
+    ],
+  },
+];
+
 export const AI_SESSIONS_MIGRATIONS: SchemaMigration[] = [
   {
     version: 1,
diff --git a/src/services/web-server.ts b/src/services/web-server.ts
index 056d8312..02b145a7 100644
--- a/src/services/web-server.ts
+++ b/src/services/web-server.ts
@@ -36,6 +36,13 @@ import {
   handleAICleanup,
   handleApplyCleanup,
   handleUpdateProfileItem,
+  handleListSkills,
+  handleGetSkill,
+  handleCreateSkill,
+  handleUpdateSkill,
+  handleDeleteSkill,
+  handleSkillsCatalogIndex,
+  handleSkillsCatalogFile,
 } from "./api-handlers.js";
 
 /**
@@ -703,6 +710,81 @@ export class WebServer {
         return this.jsonResponse(result);
       }
 
+      if (path === "/api/skills" && method === "GET") {
+        const containerTag = url.searchParams.get("tag") || undefined;
+        const enabledOnly = url.searchParams.get("enabledOnly") === "true";
+        const result = await handleListSkills({ containerTag, enabledOnly });
+        return this.jsonResponse(result);
+      }
+
+      if (path === "/api/skills" && method === "POST") {
+        const body = (await req.json().catch(() => ({}))) as any;
+        const result = await handleCreateSkill(body);
+        return this.jsonResponse(result, result.success ? 200 : 400);
+      }
+
+      if (path.startsWith("/api/skills/") && method === "GET") {
+        const id = decodeURIComponent(path.slice("/api/skills/".length));
+        if (!id || id.includes("/")) {
+          return this.jsonResponse({ success: false, error: "Invalid skill id" }, 400);
+        }
+        const result = await handleGetSkill(id);
+        return this.jsonResponse(result, result.success ? 200 : 404);
+      }
+
+      if (path.startsWith("/api/skills/") && method === "PUT") {
+        const id = decodeURIComponent(path.slice("/api/skills/".length));
+        if (!id || id.includes("/")) {
+          return this.jsonResponse({ success: false, error: "Invalid skill id" }, 400);
+        }
+        const body = (await req.json().catch(() => ({}))) as any;
+        const result = await handleUpdateSkill(id, body);
+        return this.jsonResponse(result, result.success ? 200 : 400);
+      }
+
+      if (path.startsWith("/api/skills/") && method === "DELETE") {
+        const id = decodeURIComponent(path.slice("/api/skills/".length));
+        if (!id || id.includes("/")) {
+          return this.jsonResponse({ success: false, error: "Invalid skill id" }, 400);
+        }
+        const result = await handleDeleteSkill(id);
+        return this.jsonResponse(result, result.success ? 200 : 404);
+      }
+
+      // OpenCode HTTP skill catalog (public path; prefer loopback / network auth).
+      if (path === "/skills/index.json" && method === "GET") {
+        const result = await handleSkillsCatalogIndex();
+        if (!result.success || !result.data) {
+          return this.jsonResponse(result, 500);
+        }
+        return new Response(JSON.stringify(result.data), {
+          status: 200,
+          headers: { "Content-Type": "application/json; charset=utf-8" },
+        });
+      }
+
+      // OpenCode catalog layout: /skills/{id}/{id}.md
+      if (path.startsWith("/skills/") && path.endsWith(".md") && method === "GET") {
+        const rest = path.slice("/skills/".length);
+        const parts = rest.split("/").filter(Boolean);
+        if (parts.length !== 2) {
+          return new Response("Not Found", { status: 404 });
+        }
+        const id = decodeURIComponent(parts[0]!);
+        const filename = decodeURIComponent(parts[1]!);
+        if (!id || filename !== `${id}.md`) {
+          return new Response("Not Found", { status: 404 });
+        }
+        const result = await handleSkillsCatalogFile(id);
+        if (!result.success || !result.data?.markdown) {
+          return new Response("Not Found", { status: 404 });
+        }
+        return new Response(result.data.markdown, {
+          status: 200,
+          headers: { "Content-Type": "text/markdown; charset=utf-8" },
+        });
+      }
+
       // SPA fallback for client routes (e.g. /profile) — serve the app shell.
       if (method === "GET" && !path.startsWith("/api/") && !extname(path)) {
         return this.serveStaticFile("index.html", "text/html");
diff --git a/src/v2/adapter.ts b/src/v2/adapter.ts
index eaff7c0b..867f3266 100644
--- a/src/v2/adapter.ts
+++ b/src/v2/adapter.ts
@@ -1,5 +1,8 @@
+import { isAbsolute, resolve } from "node:path";
 import type { Context } from "@opencode/plugin/promise/plugin";
 import { log } from "../services/logger.js";
+import { onSkillsChanged, skillsManager } from "../services/skills/skills-manager.js";
+import { getTags } from "../services/tags.js";
 import { eventBelongsToLocation, legacyToolResult, toLegacyEvent } from "./legacy-client.js";
 
 interface MemoryContextHooks {
@@ -52,6 +55,62 @@ export async function registerV2Adapter(ctx: Context, legacy: any) {
   const messageIDs = new Map<string, string>();
   const suppressed = new Set<string>();
   const memoryContext = legacy.memoryContext as MemoryContextHooks | undefined;
+  /** Skill IDs last registered from opencode-mem DB (so we can remove stale ones). */
+  const registeredSkillIds = new Set<string>();
+
+  async function registerDbSkills(): Promise<void> {
+    if (!ctx.skill?.transform) return;
+
+    const projectTag = getTags(ctx.location.directory).project.tag;
+    let skills: Awaited<ReturnType<typeof skillsManager.list>> = [];
+    try {
+      skills = await skillsManager.list({
+        enabledOnly: true,
+        containerTag: projectTag,
+      });
+    } catch (error) {
+      log("Failed to load skills for OpenCode registration", { error: String(error) });
+      return;
+    }
+
+    const nextIds = new Set(skills.map((skill) => skill.id));
+
+    await ctx.skill.transform((editor) => {
+      for (const id of registeredSkillIds) {
+        if (!nextIds.has(id) && editor.get(id)) {
+          editor.remove(id);
+        }
+      }
+
+      for (const skill of skills) {
+        const path = skillsManager.skillPath(skill.id);
+        const absolutePath = isAbsolute(path) ? path : resolve(path);
+        const payload = {
+          id: skill.id,
+          name: skill.name,
+          description: skill.description || undefined,
+          autoinvoke: skill.autoinvoke,
+          path: absolutePath,
+          content: skill.content,
+        } as any;
+
+        if (editor.get(skill.id)) {
+          editor.update(skill.id, (entry) => {
+            entry.name = payload.name;
+            entry.description = payload.description;
+            entry.autoinvoke = payload.autoinvoke;
+            entry.path = payload.path;
+            entry.content = payload.content;
+          });
+        } else {
+          editor.add(payload);
+        }
+      }
+    });
+
+    registeredSkillIds.clear();
+    for (const id of nextIds) registeredSkillIds.add(id);
+  }
 
   await ctx.tool.transform((editor) =>
     editor.add({
@@ -74,6 +133,18 @@ export async function registerV2Adapter(ctx: Context, legacy: any) {
     } as any)
   );
 
+  await registerDbSkills();
+  const unsubscribeSkills = onSkillsChanged(() => {
+    void (async () => {
+      try {
+        await registerDbSkills();
+        await ctx.skill?.reload?.();
+      } catch (error) {
+        log("Failed to reload OpenCode skills after DB change", { error: String(error) });
+      }
+    })();
+  });
+
   await ctx.session.hook("prompt", async (event) => {
     messageIDs.set(event.sessionID, event.messageID);
     const original = { type: "text", text: event.prompt.text };
@@ -156,6 +227,7 @@ export async function registerV2Adapter(ctx: Context, legacy: any) {
   })();
 
   return async () => {
+    unsubscribeSkills();
     controller.abort();
     await watcher;
     contexts.clear();
diff --git a/tests/skills-api-handlers.test.ts b/tests/skills-api-handlers.test.ts
new file mode 100644
index 00000000..ba693a54
--- /dev/null
+++ b/tests/skills-api-handlers.test.ts
@@ -0,0 +1,74 @@
+import { describe, it, expect, beforeEach, afterEach } from "bun:test";
+import { mkdtempSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { tursoConnectionManager } from "../src/services/turso/connection-manager.js";
+
+let tmpDir: string;
+
+describe("skills API handlers", () => {
+  beforeEach(async () => {
+    tmpDir = mkdtempSync(join(tmpdir(), "opencode-mem-skills-api-"));
+    const { CONFIG } = await import("../src/config.js");
+    CONFIG.storagePath = tmpDir;
+    const { skillsManager } = await import("../src/services/skills/skills-manager.js");
+    skillsManager.reset();
+  });
+
+  afterEach(async () => {
+    const { skillsManager } = await import("../src/services/skills/skills-manager.js");
+    skillsManager.reset();
+    await tursoConnectionManager.closeAll();
+    await new Promise((r) => setTimeout(r, 50));
+    try {
+      rmSync(tmpDir, { recursive: true, force: true });
+    } catch {
+      // ignore
+    }
+  });
+
+  it("supports CRUD through handlers", async () => {
+    const {
+      handleCreateSkill,
+      handleListSkills,
+      handleGetSkill,
+      handleUpdateSkill,
+      handleDeleteSkill,
+      handleSkillsCatalogIndex,
+      handleSkillsCatalogFile,
+    } = await import("../src/services/api-handlers.js");
+
+    const created = await handleCreateSkill({
+      id: "ship-it",
+      name: "Ship It",
+      description: "Release flow",
+      content: "## Ship\n\n1. Build\n2. Tag",
+    });
+    expect(created.success).toBe(true);
+    expect(created.data?.id).toBe("ship-it");
+
+    const listed = await handleListSkills();
+    expect(listed.success).toBe(true);
+    expect(listed.data?.items).toHaveLength(1);
+
+    const got = await handleGetSkill("ship-it");
+    expect(got.success).toBe(true);
+    expect(got.data?.name).toBe("Ship It");
+
+    const updated = await handleUpdateSkill("ship-it", { name: "Ship It Now" });
+    expect(updated.success).toBe(true);
+    expect(updated.data?.name).toBe("Ship It Now");
+
+    const catalog = await handleSkillsCatalogIndex();
+    expect(catalog.success).toBe(true);
+    expect(catalog.data?.skills[0]?.name).toBe("ship-it");
+
+    const file = await handleSkillsCatalogFile("ship-it");
+    expect(file.success).toBe(true);
+    expect(file.data?.markdown).toContain("## Ship");
+
+    const deleted = await handleDeleteSkill("ship-it");
+    expect(deleted.success).toBe(true);
+    expect((await handleGetSkill("ship-it")).success).toBe(false);
+  });
+});
diff --git a/tests/skills-manager.test.ts b/tests/skills-manager.test.ts
new file mode 100644
index 00000000..952c7b49
--- /dev/null
+++ b/tests/skills-manager.test.ts
@@ -0,0 +1,135 @@
+import { describe, it, expect, beforeEach, afterEach } from "bun:test";
+import { mkdtempSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { tursoConnectionManager } from "../src/services/turso/connection-manager.js";
+import { isValidSkillId } from "../src/services/skills/types.js";
+
+let tmpDir: string;
+
+async function makeManager() {
+  const { CONFIG } = await import("../src/config.js");
+  CONFIG.storagePath = tmpDir;
+  const { SkillsManager } = await import("../src/services/skills/skills-manager.js");
+  return new SkillsManager();
+}
+
+describe("isValidSkillId", () => {
+  it("accepts kebab-case ids", () => {
+    expect(isValidSkillId("git-release")).toBe(true);
+    expect(isValidSkillId("a")).toBe(true);
+    expect(isValidSkillId("pr-review-v2")).toBe(true);
+  });
+
+  it("rejects invalid ids", () => {
+    expect(isValidSkillId("Git-Release")).toBe(false);
+    expect(isValidSkillId("-bad")).toBe(false);
+    expect(isValidSkillId("bad-")).toBe(false);
+    expect(isValidSkillId("bad--id")).toBe(false);
+    expect(isValidSkillId("has space")).toBe(false);
+  });
+});
+
+describe("SkillsManager", () => {
+  beforeEach(() => {
+    tmpDir = mkdtempSync(join(tmpdir(), "opencode-mem-skills-"));
+  });
+
+  afterEach(async () => {
+    await tursoConnectionManager.closeAll();
+    await new Promise((r) => setTimeout(r, 50));
+    try {
+      rmSync(tmpDir, { recursive: true, force: true });
+    } catch {
+      // ignore
+    }
+  });
+
+  it("creates, lists, updates, and deletes skills", async () => {
+    const mgr = await makeManager();
+    const created = await mgr.create({
+      id: "git-release",
+      name: "Git Release",
+      description: "Prepare releases",
+      content: "## Steps\n\n1. Tag\n2. Publish",
+      autoinvoke: true,
+      enabled: true,
+    });
+
+    expect(created.id).toBe("git-release");
+    expect(created.name).toBe("Git Release");
+    expect(created.autoinvoke).toBe(true);
+
+    const listed = await mgr.list();
+    expect(listed).toHaveLength(1);
+
+    const updated = await mgr.update("git-release", {
+      content: "## Updated",
+      enabled: false,
+    });
+    expect(updated.content).toBe("## Updated");
+    expect(updated.enabled).toBe(false);
+
+    const enabledOnly = await mgr.list({ enabledOnly: true });
+    expect(enabledOnly).toHaveLength(0);
+
+    const deleted = await mgr.delete("git-release");
+    expect(deleted).toBe(true);
+    expect(await mgr.list()).toHaveLength(0);
+  });
+
+  it("rejects invalid and duplicate ids", async () => {
+    const mgr = await makeManager();
+    await expect(mgr.create({ id: "Bad_ID", name: "x", content: "body" })).rejects.toThrow(
+      /Invalid skill id/
+    );
+
+    await mgr.create({ id: "ok-skill", name: "Ok", content: "body" });
+    await expect(mgr.create({ id: "ok-skill", name: "Dup", content: "body" })).rejects.toThrow(
+      /already exists/
+    );
+  });
+
+  it("builds an OpenCode HTTP catalog", async () => {
+    const mgr = await makeManager();
+    await mgr.create({
+      id: "review",
+      name: "Review",
+      description: "Review changes",
+      content: "Review carefully.",
+    });
+    await mgr.create({
+      id: "hidden",
+      name: "Hidden",
+      content: "off",
+      enabled: false,
+    });
+
+    const catalog = await mgr.toHttpCatalog();
+    expect(catalog.skills).toHaveLength(1);
+    expect(catalog.skills[0]).toEqual({
+      name: "review",
+      version: expect.any(String),
+      files: ["review.md"],
+    });
+
+    const md = await mgr.toCatalogMarkdown("review");
+    expect(md).toContain('name: "Review"');
+    expect(md).toContain("Review carefully.");
+    expect(await mgr.toCatalogMarkdown("hidden")).toBeNull();
+  });
+
+  it("notifies listeners on change", async () => {
+    const mgr = await makeManager();
+    const { onSkillsChanged } = await import("../src/services/skills/skills-manager.js");
+    let hits = 0;
+    const stop = onSkillsChanged(() => {
+      hits++;
+    });
+    await mgr.create({ id: "notify-me", name: "N", content: "c" });
+    await mgr.update("notify-me", { name: "N2" });
+    await mgr.delete("notify-me");
+    stop();
+    expect(hits).toBe(3);
+  });
+});
diff --git a/tests/v2-skills-bridge.test.ts b/tests/v2-skills-bridge.test.ts
new file mode 100644
index 00000000..884ab0cd
--- /dev/null
+++ b/tests/v2-skills-bridge.test.ts
@@ -0,0 +1,60 @@
+import { describe, it, expect, beforeEach, afterEach } from "bun:test";
+import { mkdtempSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { tursoConnectionManager } from "../src/services/turso/connection-manager.js";
+
+let tmpDir: string;
+
+describe("V2 skills bridge helpers", () => {
+  beforeEach(async () => {
+    tmpDir = mkdtempSync(join(tmpdir(), "opencode-mem-v2-skills-"));
+    const { CONFIG } = await import("../src/config.js");
+    CONFIG.storagePath = tmpDir;
+    const { skillsManager } = await import("../src/services/skills/skills-manager.js");
+    skillsManager.reset();
+  });
+
+  afterEach(async () => {
+    const { skillsManager } = await import("../src/services/skills/skills-manager.js");
+    skillsManager.reset();
+    await tursoConnectionManager.closeAll();
+    await new Promise((r) => setTimeout(r, 50));
+    try {
+      rmSync(tmpDir, { recursive: true, force: true });
+    } catch {
+      // ignore
+    }
+  });
+
+  it("exposes absolute skill paths for OpenCode Skill.Info", async () => {
+    const { skillsManager } = await import("../src/services/skills/skills-manager.js");
+    await skillsManager.create({
+      id: "bridge-demo",
+      name: "Bridge Demo",
+      description: "demo",
+      content: "Do the thing.",
+    });
+    const path = skillsManager.skillPath("bridge-demo");
+    expect(path.startsWith("/")).toBe(true);
+    expect(path.endsWith("bridge-demo/SKILL.md")).toBe(true);
+  });
+
+  it("lists only enabled skills for registration filtering", async () => {
+    const { skillsManager } = await import("../src/services/skills/skills-manager.js");
+    await skillsManager.create({
+      id: "on",
+      name: "On",
+      content: "a",
+      enabled: true,
+    });
+    await skillsManager.create({
+      id: "off",
+      name: "Off",
+      content: "b",
+      enabled: false,
+    });
+    const enabled = await skillsManager.list({ enabledOnly: true });
+    expect(enabled.map((s) => s.id)).toEqual(["on"]);
+  });
+});
diff --git a/web/bun.lock b/web/bun.lock
index 59c29c2a..a0748e56 100644
--- a/web/bun.lock
+++ b/web/bun.lock
@@ -5,9 +5,15 @@
     "": {
       "name": "web",
       "dependencies": {
+        "@codemirror/lang-markdown": "^6.5.2",
+        "@codemirror/state": "^6.7.6",
+        "@codemirror/theme-one-dark": "^6.1.3",
+        "@codemirror/view": "^6.43.14",
+        "codemirror": "^6.0.2",
         "dompurify": "^3.4.16",
         "jsonrepair": "^3.15.0",
         "marked": "^18.1.0",
+        "svelte-codemirror-editor": "^2.1.0",
         "zod": "^4.6.5",
       },
       "devDependencies": {
@@ -32,6 +38,32 @@
     },
   },
   "packages": {
+    "@codemirror/autocomplete": ["@codemirror/autocomplete@6.20.3", "", { "dependencies": { "@codemirror/language": "^6.0.0", "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.17.0", "@lezer/common": "^1.0.0" } }, "sha512-tlosUqb+3BbxCxZdu4tKeRghPFC+QM7q4X5YhKV2eCmPG+1r2F3f4AaSz5sCrFqUtX4Jh20VFTKecl16MgiV9g=="],
+
+    "@codemirror/commands": ["@codemirror/commands@6.11.1", "", { "dependencies": { "@codemirror/language": "^6.0.0", "@codemirror/state": "^6.7.0", "@codemirror/view": "^6.27.0", "@lezer/common": "^1.1.0" } }, "sha512-O/4hG3SC1YwcmQ0d2UVNDs+AsaNWd1iHVxbTeEBuqH+6bExAiPK3iS/BvpY6rZGURALv4ZD3sIgcCmRvw3ehBg=="],
+
+    "@codemirror/lang-css": ["@codemirror/lang-css@6.3.1", "", { "dependencies": { "@codemirror/autocomplete": "^6.0.0", "@codemirror/language": "^6.0.0", "@codemirror/state": "^6.0.0", "@lezer/common": "^1.0.2", "@lezer/css": "^1.1.7" } }, "sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg=="],
+
+    "@codemirror/lang-html": ["@codemirror/lang-html@6.4.12", "", { "dependencies": { "@codemirror/autocomplete": "^6.0.0", "@codemirror/lang-css": "^6.0.0", "@codemirror/lang-javascript": "^6.0.0", "@codemirror/language": "^6.4.0", "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.17.0", "@lezer/common": "^1.0.0", "@lezer/css": "^1.1.0", "@lezer/html": "^1.3.12" } }, "sha512-pw2ReWKUqSkbvh76RAT4NYxiogRu+PWkR2ukAwO9uOgrm8uipkzjtKKtNpyeAQwHOqxEeSvAXZ6vr3AfyB9y/w=="],
+
+    "@codemirror/lang-javascript": ["@codemirror/lang-javascript@6.2.5", "", { "dependencies": { "@codemirror/autocomplete": "^6.0.0", "@codemirror/language": "^6.6.0", "@codemirror/lint": "^6.0.0", "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.17.0", "@lezer/common": "^1.0.0", "@lezer/javascript": "^1.0.0" } }, "sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A=="],
+
+    "@codemirror/lang-markdown": ["@codemirror/lang-markdown@6.5.2", "", { "dependencies": { "@codemirror/autocomplete": "^6.7.1", "@codemirror/lang-html": "^6.0.0", "@codemirror/language": "^6.3.0", "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.0.0", "@lezer/common": "^1.2.1", "@lezer/markdown": "^1.0.0" } }, "sha512-AwBOdkWYuA//WcM0xO5PfHPUcmz/O2i5o0Nsg1U69SII/loCJlFI1Romd9xp2HYb1kYJRGZotyqRghuHH5n8Kw=="],
+
+    "@codemirror/language": ["@codemirror/language@6.13.1", "", { "dependencies": { "@codemirror/state": "^6.0.0", "@codemirror/streamparser": "^6.0.0", "@codemirror/view": "^6.23.0", "@lezer/common": "^1.5.0", "@lezer/highlight": "^1.0.0", "@lezer/lr": "^1.0.0", "style-mod": "^4.0.0" } }, "sha512-zfvU2r3TyylQLMj/te+5CnQ0rSqZi8B1oTCBbQkagcLW4Xc6imab6qN+pEJhsuNOLaJqiRyBXp9UhWA1DhVvDw=="],
+
+    "@codemirror/lint": ["@codemirror/lint@6.9.7", "", { "dependencies": { "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.42.0", "crelt": "^1.0.5" } }, "sha512-28/+iWLYxKxsvGYhSYL7zaCZqLz5+FFFDq9tVsvGv9kv8RY4fFAchJ5WX9M3YrrRlTIsECjsXPqeNgnSmNP2dg=="],
+
+    "@codemirror/search": ["@codemirror/search@6.7.2", "", { "dependencies": { "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.37.0", "crelt": "^1.0.5" } }, "sha512-gUYkYhT2+n/+VGZ+8EzE5WFkYZUZYm1VOKDudIsNqh42uRVQJ0a6Yss9sdKT3MeOYfuL1N6AZA57oza0Oyr0LA=="],
+
+    "@codemirror/state": ["@codemirror/state@6.7.6", "", { "dependencies": { "@marijn/find-cluster-break": "^1.0.0" } }, "sha512-kAz+AncRtKuIknedxT1bq4XwXv4UowhbkHU1myPrtVb/jZtImWuV5BXzv5vK6i3kYACsdiZiQKFQQ5Mq7elW8w=="],
+
+    "@codemirror/streamparser": ["@codemirror/streamparser@6.0.0", "", {}, "sha512-JTFPF6xrfjt0mnfGPgzcLiMwYmvIyNaoizp8BYzv8FE8KrT6GBGDZ190rtt+O7Wke3gG/MFHyiY9YGNeimof4w=="],
+
+    "@codemirror/theme-one-dark": ["@codemirror/theme-one-dark@6.1.3", "", { "dependencies": { "@codemirror/language": "^6.0.0", "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.0.0", "@lezer/highlight": "^1.0.0" } }, "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA=="],
+
+    "@codemirror/view": ["@codemirror/view@6.43.14", "", { "dependencies": { "@codemirror/state": "^6.7.0", "crelt": "^1.0.6", "style-mod": "^4.1.0", "w3c-keyname": "^2.2.4" } }, "sha512-hC45YnmJNR1rz42OF57BLoQNFMV12/13drnvibDsR2quNDmldcb4WvYVV81hFQg56i9lcqQMEDqilhX2QDcGQQ=="],
+
     "@floating-ui/core": ["@floating-ui/core@1.8.0", "", { "dependencies": { "@floating-ui/utils": "^0.2.12" } }, "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ=="],
 
     "@floating-ui/dom": ["@floating-ui/dom@1.8.0", "", { "dependencies": { "@floating-ui/core": "^1.8.0", "@floating-ui/utils": "^0.2.12" } }, "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg=="],
@@ -52,8 +84,24 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
+    "@lezer/common": ["@lezer/common@1.5.3", "", {}, "sha512-H0iErY4e43LpXbYDyBci5W4v/RwTgGV3YzYOlJPiGZ8RY8w51kVE+xLn1tg3Z6UmSfyETvtsUK3r7YsgDQEI7Q=="],
+
+    "@lezer/css": ["@lezer/css@1.3.9", "", { "dependencies": { "@lezer/common": "^1.2.0", "@lezer/highlight": "^1.0.0", "@lezer/lr": "^1.3.0" } }, "sha512-ZmzgvTOBdJWGIsY/ItAfN7UW8DV802oZG+jeG6E508SwEzz5YhuAajptpWPICvIyqYAD2+VjMdOS40GgGkyEOQ=="],
+
+    "@lezer/highlight": ["@lezer/highlight@1.2.5", "", { "dependencies": { "@lezer/common": "^1.3.0" } }, "sha512-O1GMVKgtf5YspFaRzpmqkVgMtIk2HG9uMAbH6wdAIdNh3TVzCsch/+cRi+6l2//UGDKe6NB9BW3cvuR5ezMQ0w=="],
+
+    "@lezer/html": ["@lezer/html@1.3.13", "", { "dependencies": { "@lezer/common": "^1.2.0", "@lezer/highlight": "^1.0.0", "@lezer/lr": "^1.0.0" } }, "sha512-oI7n6NJml729m7pjm9lvLvmXbdoMoi2f+1pwSDJkl9d68zGr7a9Btz8NdHTGQZtW2DA25ybeuv/SyDb9D5tseg=="],
+
+    "@lezer/javascript": ["@lezer/javascript@1.5.6", "", { "dependencies": { "@lezer/common": "^1.2.0", "@lezer/highlight": "^1.1.3", "@lezer/lr": "^1.3.0" } }, "sha512-sEvOqpl4vJQca0NugSQK02vQPbc5KrvoojnYGoqqFgFO0MtcYhwGiHKVEB+LuXYJnfyXo4QPA8ztbrEa4Fw5NA=="],
+
+    "@lezer/lr": ["@lezer/lr@1.4.11", "", { "dependencies": { "@lezer/common": "^1.0.0" } }, "sha512-UwgZcl1R66H2hDzBrA7kWyYmX6s8p5TQ+e/t7CuvgCtBEPxbEPaHYHu+pJBvTvDotEJpuQkJjbXuHiw5Cixxgw=="],
+
+    "@lezer/markdown": ["@lezer/markdown@1.8.0", "", { "dependencies": { "@lezer/common": "^1.5.0", "@lezer/highlight": "^1.0.0" } }, "sha512-X6w3A2NpyhdtGqTWRJB8gR4QDXBaFMbTOs780ZdZ15KKCfBXOQTKcB3Vr+W6tqJHVlealt53tLmHRvOqPTQgYA=="],
+
     "@lucide/svelte": ["@lucide/svelte@1.52.0", "", { "peerDependencies": { "svelte": "^5" } }, "sha512-bQ8t3IcZxWqAdmdMZPyZEv8Qf+MDgBAf7n43eRQoXyBeLWr8HWToiMIO6vKlHxC/lnMiCDdTzm09hjy92ch46A=="],
 
+    "@marijn/find-cluster-break": ["@marijn/find-cluster-break@1.0.4", "", {}, "sha512-Wy0V7+SGUjnF9/TkiM1hKVDPj7jKXduPNboMVtHTA8dySMURWqfg/JZ9E2Sq8JgSJmkl7k7Qe9FLeMSrSraWmQ=="],
+
     "@oxc-project/types": ["@oxc-project/types@0.152.0", "", {}, "sha512-oM/5rLBm2tPkg0iBgkH/FOeR3PCDpY19GTgAZjMFM8h9WI9VW7cLgzp6nwtarYKmovavIQZ+Fe/RKX/8C8O/Rw=="],
 
     "@resvg/resvg-js": ["@resvg/resvg-js@2.6.2", "", { "optionalDependencies": { "@resvg/resvg-js-android-arm-eabi": "2.6.2", "@resvg/resvg-js-android-arm64": "2.6.2", "@resvg/resvg-js-darwin-arm64": "2.6.2", "@resvg/resvg-js-darwin-x64": "2.6.2", "@resvg/resvg-js-linux-arm-gnueabihf": "2.6.2", "@resvg/resvg-js-linux-arm64-gnu": "2.6.2", "@resvg/resvg-js-linux-arm64-musl": "2.6.2", "@resvg/resvg-js-linux-x64-gnu": "2.6.2", "@resvg/resvg-js-linux-x64-musl": "2.6.2", "@resvg/resvg-js-win32-arm64-msvc": "2.6.2", "@resvg/resvg-js-win32-ia32-msvc": "2.6.2", "@resvg/resvg-js-win32-x64-msvc": "2.6.2" } }, "sha512-xBaJish5OeGmniDj9cW5PRa/PtmuVU3ziqrbr5xJj901ZDN4TosrVaNZpEiLZAxdfnhAe7uQ7QFWfjPe9d9K2Q=="],
@@ -170,6 +218,10 @@
 
     "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
+    "codemirror": ["codemirror@6.0.2", "", { "dependencies": { "@codemirror/autocomplete": "^6.0.0", "@codemirror/commands": "^6.0.0", "@codemirror/language": "^6.0.0", "@codemirror/lint": "^6.0.0", "@codemirror/search": "^6.0.0", "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.0.0" } }, "sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw=="],
+
+    "crelt": ["crelt@1.0.7", "", {}, "sha512-aK6BbWfhf4U/wCcLHKPJl/xa6VkVstRaPywWtMKGwuOLc/wZTyQYuoxgvZnNsBvv7Kg3YTBQYYBCggcviQczuA=="],
+
     "deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],
 
     "dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
@@ -258,12 +310,16 @@
 
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
+    "style-mod": ["style-mod@4.1.4", "", {}, "sha512-XXWIQt633/EpAFx8aZDOTjBzrCaGmhvEQlQo6MVPfa2OzO2cWo+4hV9h+6UkHYlXGfy+ODXKUdP7Pthmcu5ATw=="],
+
     "style-to-object": ["style-to-object@1.0.14", "", { "dependencies": { "inline-style-parser": "0.2.7" } }, "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw=="],
 
     "svelte": ["svelte@5.57.1", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "@jridgewell/sourcemap-codec": "^1.6.0", "@sveltejs/acorn-typescript": "^1.0.13", "@types/estree": "^1.0.9", "acorn": "^8.18.0", "aria-query": "5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "devalue": "^5.9.2", "esm-env": "^1.2.1", "esrap": "^2.3.6", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-Uqj49lWKB+iSSnneuwiYYJ7MZgkB+eXr0LXBhv4uDuAkXqnWmq65Sxflfvp0Lc6MdKjMUxGaeOKWJqz5SNiVIA=="],
 
     "svelte-check": ["svelte-check@4.7.6", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "@sveltejs/load-config": "^0.2.3", "chokidar": "^4.0.1", "fdir": "^6.2.0", "picocolors": "^1.0.0", "sade": "^1.7.4" }, "peerDependencies": { "svelte": "^4.0.0 || ^5.0.0-next.0", "typescript": "^5.0.0 || ^6.0.0" }, "bin": { "svelte-check": "bin/svelte-check" } }, "sha512-t2scM//ZuVbSY/T2w6FSBw1v9s2NEmh/g+sy1lqtosW5ylBV5AF4wFb1Ts9Kf3MbfPDUDJDZ9L436YT0SPTdvw=="],
 
+    "svelte-codemirror-editor": ["svelte-codemirror-editor@2.1.0", "", { "peerDependencies": { "codemirror": "^6.0.0", "svelte": "^5.0.0" } }, "sha512-WGkSsIYNpVcOVxaQPkmdBQhaGyKLmg6pgaS/b+7guRb4eikrbXYtvNFuW2AzKJi8ZbLhSngrf3SRiZOuwuskrQ=="],
+
     "svelte-toolbelt": ["svelte-toolbelt@0.10.6", "", { "dependencies": { "clsx": "^2.1.1", "runed": "^0.35.1", "style-to-object": "^1.0.8" }, "peerDependencies": { "svelte": "^5.30.2" } }, "sha512-YWuX+RE+CnWYx09yseAe4ZVMM7e7GRFZM6OYWpBKOb++s+SQ8RBIMMe+Bs/CznBMc0QPLjr+vDBxTAkozXsFXQ=="],
 
     "tabbable": ["tabbable@6.5.0", "", {}, "sha512-wieBHXygIm7OyQOu5hQlkk62/WyCFYGlWg7L6/ZCUZwx0o398Zkn4pVmMyfYhfMG8kGrj/Krt8eIk6UKC6VzwA=="],
@@ -290,6 +346,8 @@
 
     "vitefu": ["vitefu@1.1.3", "", { "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" }, "optionalPeers": ["vite"] }, "sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg=="],
 
+    "w3c-keyname": ["w3c-keyname@2.2.8", "", {}, "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="],
+
     "zimmerframe": ["zimmerframe@1.1.5", "", {}, "sha512-msJxIvYDYcoNL+PJsu+7qmpDWsYmAxTY+2TNYXXF0hzBzBk0BMecOqDOG/EckUoKCuKwObfbugIl8QpqHDXeFA=="],
 
     "zod": ["zod@4.6.5", "", {}, "sha512-v5l/aFXZQeai4awLbOpSoHecE9UiMrnfx75tEXLjNonXVARxQ5mOeipTjROUchszUNCqnE+hqAMujRsRHsut2Q=="],
diff --git a/web/package.json b/web/package.json
index 6e58a522..6fe3ee2b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -11,9 +11,15 @@
     "check": "svelte-check --tsconfig ./tsconfig.app.json --threshold error"
   },
   "dependencies": {
+    "@codemirror/lang-markdown": "^6.5.2",
+    "@codemirror/state": "^6.7.6",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.43.14",
+    "codemirror": "^6.0.2",
     "dompurify": "^3.4.16",
     "jsonrepair": "^3.15.0",
     "marked": "^18.1.0",
+    "svelte-codemirror-editor": "^2.1.0",
     "zod": "^4.6.5"
   },
   "devDependencies": {
diff --git a/web/src/App.svelte b/web/src/App.svelte
index 9c6f8b53..d8cc465d 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -13,6 +13,8 @@
   import EditMemoryDialog from "$lib/components/explorer/EditMemoryDialog.svelte";
   import MemoryList from "$lib/components/explorer/MemoryList.svelte";
   import ProfileView from "$lib/components/explorer/ProfileView.svelte";
+  import SkillDialog from "$lib/components/explorer/SkillDialog.svelte";
+  import SkillsView from "$lib/components/explorer/SkillsView.svelte";
   import TagMigrationDialog from "$lib/components/explorer/TagMigrationDialog.svelte";
   import TagFilter from "$lib/components/explorer/TagFilter.svelte";
   import Alert from "$lib/components/ui/alert.svelte";
@@ -28,6 +30,7 @@
   import { initRouter, navigate, ROUTES, shouldHandleSpaClick } from "$lib/router";
   import { createRouter } from "$lib/router.svelte";
   import { createMemoriesExplorer } from "$lib/stores/memories-explorer.svelte";
+  import { createSkillsStore } from "$lib/stores/skills.svelte";
   import { createUserProfile } from "$lib/stores/user-profile.svelte";
   import {
     GAP,
@@ -56,6 +59,7 @@
   const router = createRouter();
   const explorer = createMemoriesExplorer();
   const profile = createUserProfile();
+  const skills = createSkillsStore();
 
   let sidebarOpen = $state(false);
   let sidebarCollapsed = $state(readCollapsed());
@@ -63,7 +67,11 @@
   let headerScrolled = $state(false);
 
   const pageTitle = $derived(
-    router.view === "project" ? i18n.t("tab-project") : i18n.t("tab-profile")
+    router.view === "project"
+      ? i18n.t("tab-project")
+      : router.view === "skills"
+        ? i18n.t("tab-skills")
+        : i18n.t("tab-profile")
   );
 
   $effect(() => {
@@ -108,6 +116,9 @@
     if (router.view === "profile") {
       void profile.loadUserProfile();
     }
+    if (router.view === "skills") {
+      void skills.loadSkills();
+    }
   });
 
   function onLangToggle() {
@@ -115,6 +126,7 @@
     void explorer.loadMemories();
     void explorer.loadStats();
     if (router.view === "profile") void profile.loadUserProfile();
+    if (router.view === "skills") void skills.loadSkills();
   }
 
   function onHomeClick(event: MouseEvent) {
@@ -136,6 +148,7 @@
     brand={i18n.t("brand")}
     projectLabel={i18n.t("tab-project")}
     profileLabel={i18n.t("tab-profile")}
+    skillsLabel={i18n.t("tab-skills")}
     {langLabel}
     languageLabel={i18n.t("nav-language")}
     themeLabel={i18n.t("nav-theme")}
@@ -334,6 +347,14 @@
           onTagsChange={explorer.updateMemoryTags}
           knownTags={explorer.knownTags}
         />
+      {:else if router.view === "skills"}
+        <SkillsView
+          skills={skills.skills}
+          loading={skills.loading}
+          onCreate={skills.openCreate}
+          onEdit={skills.openEdit}
+          onDelete={skills.deleteSkill}
+        />
       {:else}
         <ProfileView
           profile={profile.userProfile}
@@ -346,6 +367,14 @@
   </div>
 </div>
 
+<SkillDialog
+  bind:open={skills.dialogOpen}
+  editing={skills.editingId !== null}
+  bind:draft={skills.draft}
+  onOpenChange={(open) => (skills.dialogOpen = open)}
+  onSave={skills.saveSkill}
+/>
+
 <AddMemoryDialog
   open={explorer.addOpen}
   onOpenChange={(open) => (explorer.addOpen = open)}
diff --git a/web/src/lib/components/explorer/AppSidebar.svelte b/web/src/lib/components/explorer/AppSidebar.svelte
index 9e767454..78f0903d 100644
--- a/web/src/lib/components/explorer/AppSidebar.svelte
+++ b/web/src/lib/components/explorer/AppSidebar.svelte
@@ -3,6 +3,7 @@
   import Folder from "@lucide/svelte/icons/folder";
   import Languages from "@lucide/svelte/icons/languages";
   import Moon from "@lucide/svelte/icons/moon";
+  import Sparkles from "@lucide/svelte/icons/sparkles";
   import Sun from "@lucide/svelte/icons/sun";
   import User from "@lucide/svelte/icons/user";
   import X from "@lucide/svelte/icons/x";
@@ -30,6 +31,7 @@
     brand: string;
     projectLabel: string;
     profileLabel: string;
+    skillsLabel: string;
     langLabel: string;
     languageLabel: string;
     themeLabel: string;
@@ -45,6 +47,7 @@
     brand,
     projectLabel,
     profileLabel,
+    skillsLabel,
     langLabel,
     languageLabel,
     themeLabel,
@@ -163,6 +166,19 @@
         <span class="truncate text-start">{profileLabel}</span>
       {/if}
     </a>
+    <a
+      href={ROUTES.skills}
+      class={navClass(currentView === "skills")}
+      aria-current={currentView === "skills" ? "page" : undefined}
+      title={skillsLabel}
+      aria-label={skillsLabel}
+      onclick={(e) => onNavClick(e, ROUTES.skills)}
+    >
+      <Sparkles class={cn(ICON, "shrink-0")} aria-hidden="true" />
+      {#if !iconOnly}
+        <span class="truncate text-start">{skillsLabel}</span>
+      {/if}
+    </a>
   </nav>
 
   <div class={cn("mt-auto", iconOnly ? "p-2" : "p-3")}>
diff --git a/web/src/lib/components/explorer/SkillDialog.svelte b/web/src/lib/components/explorer/SkillDialog.svelte
new file mode 100644
index 00000000..3a4c1bf9
--- /dev/null
+++ b/web/src/lib/components/explorer/SkillDialog.svelte
@@ -0,0 +1,118 @@
+<script lang="ts">
+  import type { SkillDraft } from "$lib/stores/skills.svelte";
+  import AppDialog from "$lib/components/ui/app-dialog.svelte";
+  import DialogActions from "$lib/components/ui/dialog-actions.svelte";
+  import FormField from "$lib/components/ui/form-field.svelte";
+  import Input from "$lib/components/ui/input.svelte";
+  import Checkbox from "$lib/components/ui/checkbox.svelte";
+  import MarkdownEditor from "$lib/components/ui/markdown-editor.svelte";
+  import { useI18n } from "$lib/i18n/context.svelte";
+  import { STACK_FORM } from "$lib/ui/styles";
+
+  type Props = {
+    open?: boolean;
+    editing?: boolean;
+    draft: SkillDraft;
+    onOpenChange?: (open: boolean) => void;
+    onSave?: () => void;
+  };
+
+  let {
+    open = $bindable(false),
+    editing = false,
+    draft = $bindable(),
+    onOpenChange,
+    onSave,
+  }: Props = $props();
+
+  const i18n = useI18n();
+
+  function handleOpenChange(next: boolean) {
+    open = next;
+    onOpenChange?.(next);
+  }
+
+  function submit() {
+    onSave?.();
+  }
+</script>
+
+<AppDialog
+  bind:open
+  title={editing ? i18n.t("modal-skill-edit-title") : i18n.t("modal-skill-create-title")}
+  class="max-w-4xl sm:max-w-4xl"
+  onOpenChange={handleOpenChange}
+>
+  <form
+    id="skill-form"
+    class={STACK_FORM}
+    onsubmit={(e) => {
+      e.preventDefault();
+      submit();
+    }}
+  >
+    <div class="grid gap-3 md:grid-cols-2">
+      <FormField id="skill-id" label={i18n.t("label-skill-id")} value={draft.id}>
+        <Input
+          id="skill-id"
+          bind:value={draft.id}
+          disabled={editing}
+          required={!editing}
+          pattern="[a-z0-9]+(-[a-z0-9]+)*"
+          maxlength={64}
+          placeholder={i18n.t("placeholder-skill-id")}
+        />
+        <p class="mt-1 text-xs text-muted-foreground">{i18n.t("hint-skill-id")}</p>
+      </FormField>
+      <FormField id="skill-name" label={i18n.t("label-skill-name")} value={draft.name}>
+        <Input
+          id="skill-name"
+          bind:value={draft.name}
+          required
+          placeholder={i18n.t("placeholder-skill-name")}
+        />
+      </FormField>
+    </div>
+
+    <FormField
+      id="skill-description"
+      label={i18n.t("label-skill-description")}
+      value={draft.description}
+    >
+      <Input
+        id="skill-description"
+        bind:value={draft.description}
+        placeholder={i18n.t("placeholder-skill-description")}
+      />
+    </FormField>
+
+    <div class="flex flex-wrap gap-4">
+      <label class="flex items-center gap-2 text-sm">
+        <Checkbox bind:checked={draft.enabled} />
+        {i18n.t("label-skill-enabled")}
+      </label>
+      <label class="flex items-center gap-2 text-sm">
+        <Checkbox bind:checked={draft.autoinvoke} />
+        {i18n.t("label-skill-autoinvoke")}
+      </label>
+    </div>
+
+    <FormField label={i18n.t("label-skill-content")} floating={false} spacing="normal">
+      <MarkdownEditor
+        bind:value={draft.content}
+        placeholder={i18n.t("placeholder-skill-content")}
+        editLabel={i18n.t("skill-edit")}
+        previewLabel={i18n.t("skill-preview")}
+        minHeight="18rem"
+      />
+    </FormField>
+  </form>
+
+  {#snippet footer()}
+    <DialogActions
+      onCancel={() => handleOpenChange(false)}
+      primaryLabel={i18n.t("btn-save")}
+      onPrimary={submit}
+    />
+  {/snippet}
+</AppDialog>
diff --git a/web/src/lib/components/explorer/SkillsView.svelte b/web/src/lib/components/explorer/SkillsView.svelte
new file mode 100644
index 00000000..6a464354
--- /dev/null
+++ b/web/src/lib/components/explorer/SkillsView.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+  import Loader from "@lucide/svelte/icons/loader";
+  import Pencil from "@lucide/svelte/icons/pencil";
+  import Plus from "@lucide/svelte/icons/plus";
+  import Sparkles from "@lucide/svelte/icons/sparkles";
+  import Trash2 from "@lucide/svelte/icons/trash-2";
+  import type { SkillItem } from "$lib/stores/skills.svelte";
+  import Badge from "$lib/components/ui/badge.svelte";
+  import Button from "$lib/components/ui/button.svelte";
+  import EmptyState from "$lib/components/ui/empty-state.svelte";
+  import { useI18n } from "$lib/i18n/context.svelte";
+  import { formatDate } from "$lib/format";
+  import { GAP_LOOSE, ICON, ICON_SM } from "$lib/ui/styles";
+  import { cn } from "$lib/utils";
+
+  type Props = {
+    skills?: SkillItem[];
+    loading?: boolean;
+    onCreate?: () => void;
+    onEdit?: (skill: SkillItem) => void;
+    onDelete?: (id: string) => void;
+  };
+
+  let { skills = [], loading = false, onCreate, onEdit, onDelete }: Props = $props();
+
+  const i18n = useI18n();
+</script>
+
+<section class="space-y-4">
+  <div class={cn("flex flex-wrap items-center justify-between", GAP_LOOSE)}>
+    <div class="space-y-1">
+      <h1 class="text-lg font-medium tracking-tight">
+        {i18n.t("section-skills", { count: skills.length })}
+      </h1>
+      <p class="text-sm text-muted-foreground">{i18n.t("skill-hint")}</p>
+    </div>
+    <Button onclick={onCreate}>
+      <Plus class={ICON_SM} aria-hidden="true" />
+      {i18n.t("btn-new-skill")}
+    </Button>
+  </div>
+
+  {#if loading}
+    <div class={cn("flex items-center text-sm text-muted-foreground", GAP_LOOSE)}>
+      <Loader class={cn(ICON_SM, "animate-spin")} aria-hidden="true" />
+      {i18n.t("loading-init")}
+    </div>
+  {:else if skills.length === 0}
+    <div class="rounded-xl border border-dashed border-border bg-card/50 p-6">
+      <div class="mb-3 flex justify-center text-muted-foreground">
+        <Sparkles class={ICON} aria-hidden="true" />
+      </div>
+      <EmptyState>{i18n.t("skill-empty")}</EmptyState>
+      <div class="mt-3 flex justify-center">
+        <Button variant="secondary" onclick={onCreate}>
+          <Plus class={ICON_SM} aria-hidden="true" />
+          {i18n.t("btn-add-skill")}
+        </Button>
+      </div>
+    </div>
+  {:else}
+    <ul class="space-y-2">
+      {#each skills as skill (skill.id)}
+        <li class="rounded-xl border border-border bg-card p-4 transition-colors hover:bg-card/80">
+          <div class={cn("flex flex-wrap items-start justify-between", GAP_LOOSE)}>
+            <div class="min-w-0 space-y-1">
+              <div class={cn("flex flex-wrap items-center", GAP_LOOSE)}>
+                <h2 class="truncate text-sm font-medium">{skill.name}</h2>
+                <Badge variant="outline" class="font-mono text-[10px]">{skill.id}</Badge>
+                {#if !skill.enabled}
+                  <Badge variant="secondary">{i18n.t("skill-disabled")}</Badge>
+                {/if}
+                {#if skill.autoinvoke}
+                  <Badge variant="outline" class="text-[10px]">auto</Badge>
+                {/if}
+              </div>
+              {#if skill.description}
+                <p class="text-sm text-muted-foreground">{skill.description}</p>
+              {/if}
+              <p class="text-xs text-muted-foreground">{formatDate(skill.updatedAt)}</p>
+            </div>
+            <div class="flex shrink-0 gap-1">
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                aria-label={i18n.t("skill-edit")}
+                onclick={() => onEdit?.(skill)}
+              >
+                <Pencil class={ICON_SM} aria-hidden="true" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                aria-label={i18n.t("confirm-delete-title")}
+                onclick={() => onDelete?.(skill.id)}
+              >
+                <Trash2 class={ICON_SM} aria-hidden="true" />
+              </Button>
+            </div>
+          </div>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</section>
diff --git a/web/src/lib/components/ui/markdown-editor.svelte b/web/src/lib/components/ui/markdown-editor.svelte
new file mode 100644
index 00000000..f5a9c340
--- /dev/null
+++ b/web/src/lib/components/ui/markdown-editor.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+  import CodeMirror from "svelte-codemirror-editor";
+  import { markdown } from "@codemirror/lang-markdown";
+  import { oneDark } from "@codemirror/theme-one-dark";
+  import { EditorView } from "@codemirror/view";
+  import Button from "$lib/components/ui/button.svelte";
+  import { renderMarkdown } from "$lib/markdown";
+  import { createTheme } from "$lib/theme.svelte";
+  import { cn } from "$lib/utils";
+
+  type Props = {
+    value?: string;
+    placeholder?: string;
+    editLabel?: string;
+    previewLabel?: string;
+    class?: string;
+    minHeight?: string;
+  };
+
+  let {
+    value = $bindable(""),
+    placeholder = "",
+    editLabel = "Edit",
+    previewLabel = "Preview",
+    class: className,
+    minHeight = "16rem",
+  }: Props = $props();
+
+  const themeStore = createTheme();
+  const isDark = $derived(themeStore.theme === "dark");
+  let mobileTab = $state<"edit" | "preview">("edit");
+
+  const previewHtml = $derived(renderMarkdown(value || ""));
+</script>
+
+<div class={cn("space-y-2", className)}>
+  <div class="flex gap-1 md:hidden">
+    <Button
+      type="button"
+      size="xs"
+      variant={mobileTab === "edit" ? "secondary" : "ghost"}
+      onclick={() => (mobileTab = "edit")}
+    >
+      {editLabel}
+    </Button>
+    <Button
+      type="button"
+      size="xs"
+      variant={mobileTab === "preview" ? "secondary" : "ghost"}
+      onclick={() => (mobileTab = "preview")}
+    >
+      {previewLabel}
+    </Button>
+  </div>
+
+  <div class="grid gap-3 md:grid-cols-2" style:min-height={minHeight}>
+    <div
+      class={cn(
+        "overflow-hidden rounded-xl border border-border bg-card",
+        mobileTab !== "edit" && "max-md:hidden"
+      )}
+    >
+      <CodeMirror
+        bind:value
+        lang={markdown()}
+        theme={isDark ? oneDark : undefined}
+        extensions={[EditorView.lineWrapping]}
+        styles={{
+          "&": {
+            height: minHeight,
+            fontSize: "0.875rem",
+          },
+        }}
+        {placeholder}
+        class="text-sm [&_.cm-editor]:outline-none [&_.cm-scroller]:font-mono"
+      />
+    </div>
+    <div
+      class={cn(
+        "overflow-auto rounded-xl border border-border bg-muted/30 p-3",
+        mobileTab !== "preview" && "max-md:hidden"
+      )}
+      style:min-height={minHeight}
+    >
+      {#if value.trim()}
+        <div class="markdown-content prose-invert max-w-none text-sm">
+          {@html previewHtml}
+        </div>
+      {:else}
+        <p class="text-sm text-muted-foreground">{placeholder}</p>
+      {/if}
+    </div>
+  </div>
+</div>
diff --git a/web/src/lib/i18n/translations.ts b/web/src/lib/i18n/translations.ts
index bef9c71c..c6fb594d 100644
--- a/web/src/lib/i18n/translations.ts
+++ b/web/src/lib/i18n/translations.ts
@@ -168,6 +168,34 @@ export const translations = {
     "label-search": "Search",
     "nav-prev-page": "Previous page",
     "nav-next-page": "Next page",
+    "tab-skills": "Skills",
+    "section-skills": "Shared Skills ({count})",
+    "btn-add-skill": "Add Skill",
+    "btn-new-skill": "New Skill",
+    "modal-skill-create-title": "Create Skill",
+    "modal-skill-edit-title": "Edit Skill",
+    "label-skill-id": "ID",
+    "label-skill-name": "Name",
+    "label-skill-description": "Description",
+    "label-skill-content": "Instructions (Markdown)",
+    "label-skill-autoinvoke": "Auto-invoke",
+    "label-skill-enabled": "Enabled",
+    "placeholder-skill-id": "git-release",
+    "placeholder-skill-name": "Git Release",
+    "placeholder-skill-description": "When to use this skill…",
+    "placeholder-skill-content": "## What I do\n\n- …",
+    "skill-edit": "Edit",
+    "skill-preview": "Preview",
+    "skill-empty": "No skills yet. Create a reusable procedure the agent can load.",
+    "skill-disabled": "Disabled",
+    "skill-hint": "OpenCode loads these via the native skill tool (V2 plugin bridge).",
+    "confirm-delete-skill": "Delete skill “{id}”?",
+    "toast-skill-save-success": "Skill saved",
+    "toast-skill-save-failed": "Failed to save skill",
+    "toast-skill-delete-success": "Skill deleted",
+    "toast-skill-delete-failed": "Failed to delete skill",
+    "toast-skill-load-failed": "Failed to load skills",
+    "hint-skill-id": "Lowercase kebab-case (a-z, 0-9, hyphens). Becomes the OpenCode skill id.",
   },
   de: {
     title: "OpenCode Memory Explorer",
@@ -342,6 +370,34 @@ export const translations = {
     "label-search": "Suchen",
     "nav-prev-page": "Vorherige Seite",
     "nav-next-page": "Nächste Seite",
+    "tab-skills": "Skills",
+    "section-skills": "Geteilte Skills ({count})",
+    "btn-add-skill": "Skill hinzufügen",
+    "btn-new-skill": "Neuer Skill",
+    "modal-skill-create-title": "Skill erstellen",
+    "modal-skill-edit-title": "Skill bearbeiten",
+    "label-skill-id": "ID",
+    "label-skill-name": "Name",
+    "label-skill-description": "Beschreibung",
+    "label-skill-content": "Anweisungen (Markdown)",
+    "label-skill-autoinvoke": "Auto-Invoke",
+    "label-skill-enabled": "Aktiv",
+    "placeholder-skill-id": "git-release",
+    "placeholder-skill-name": "Git Release",
+    "placeholder-skill-description": "Wann dieser Skill genutzt werden soll…",
+    "placeholder-skill-content": "## Was ich tue\n\n- …",
+    "skill-edit": "Bearbeiten",
+    "skill-preview": "Vorschau",
+    "skill-empty": "Noch keine Skills. Lege eine wiederverwendbare Prozedur an, die der Agent laden kann.",
+    "skill-disabled": "Deaktiviert",
+    "skill-hint": "OpenCode lädt diese über das native skill-Tool (V2-Plugin-Bridge).",
+    "confirm-delete-skill": "Skill „{id}“ löschen?",
+    "toast-skill-save-success": "Skill gespeichert",
+    "toast-skill-save-failed": "Skill konnte nicht gespeichert werden",
+    "toast-skill-delete-success": "Skill gelöscht",
+    "toast-skill-delete-failed": "Skill konnte nicht gelöscht werden",
+    "toast-skill-load-failed": "Skills konnten nicht geladen werden",
+    "hint-skill-id": "Kleinbuchstaben kebab-case (a-z, 0-9, Bindestriche). Wird zur OpenCode Skill-ID.",
   },
   zh: {
     title: "OpenCode Memory Explorer",
diff --git a/web/src/lib/routes.ts b/web/src/lib/routes.ts
index 7396effe..de71fd5f 100644
--- a/web/src/lib/routes.ts
+++ b/web/src/lib/routes.ts
@@ -2,9 +2,10 @@ export const ROUTES = {
   home: "/",
   project: "/project-memories",
   profile: "/user-profile",
+  skills: "/skills",
 } as const;
 
-export type AppView = "project" | "profile";
+export type AppView = "project" | "profile" | "skills";
 
 export function normalizePath(pathname: string): string {
   const path = pathname.replace(/\/+$/, "") || "/";
@@ -12,22 +13,32 @@ export function normalizePath(pathname: string): string {
 }
 
 export function viewFromPath(pathname: string): AppView {
-  return normalizePath(pathname) === ROUTES.profile ? "profile" : "project";
+  const path = normalizePath(pathname);
+  if (path === ROUTES.profile) return "profile";
+  if (path === ROUTES.skills) return "skills";
+  return "project";
 }
 
 export function pathForView(view: AppView): string {
-  return view === "profile" ? ROUTES.profile : ROUTES.project;
+  if (view === "profile") return ROUTES.profile;
+  if (view === "skills") return ROUTES.skills;
+  return ROUTES.project;
 }
 
 export function isAppPath(pathname: string): boolean {
   const path = normalizePath(pathname);
-  return path === ROUTES.home || path === ROUTES.project || path === ROUTES.profile;
+  return (
+    path === ROUTES.home ||
+    path === ROUTES.project ||
+    path === ROUTES.profile ||
+    path === ROUTES.skills
+  );
 }
 
 /** Canonical app path — `/` redirects to project memories. */
 export function resolveAppPath(pathname: string): string {
   const path = normalizePath(pathname);
   if (path === ROUTES.home) return ROUTES.project;
-  if (path === ROUTES.project || path === ROUTES.profile) return path;
+  if (path === ROUTES.project || path === ROUTES.profile || path === ROUTES.skills) return path;
   return ROUTES.project;
 }
diff --git a/web/src/lib/stores/skills.svelte.ts b/web/src/lib/stores/skills.svelte.ts
new file mode 100644
index 00000000..37996903
--- /dev/null
+++ b/web/src/lib/stores/skills.svelte.ts
@@ -0,0 +1,166 @@
+import { toast } from "$lib/toast/toast.svelte";
+import { fetchAPI, toastApiResult } from "$lib/api";
+import { t } from "$lib/i18n";
+import { askConfirm } from "$lib/confirm.svelte";
+
+export type SkillItem = {
+  id: string;
+  name: string;
+  description: string;
+  content: string;
+  autoinvoke: boolean;
+  enabled: boolean;
+  containerTag: string | null;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type SkillDraft = {
+  id: string;
+  name: string;
+  description: string;
+  content: string;
+  autoinvoke: boolean;
+  enabled: boolean;
+};
+
+function emptyDraft(): SkillDraft {
+  return {
+    id: "",
+    name: "",
+    description: "",
+    content: "",
+    autoinvoke: true,
+    enabled: true,
+  };
+}
+
+export function createSkillsStore() {
+  let skills = $state<SkillItem[]>([]);
+  let loading = $state(false);
+  let dialogOpen = $state(false);
+  let editingId = $state<string | null>(null);
+  let draft = $state<SkillDraft>(emptyDraft());
+
+  async function loadSkills() {
+    loading = true;
+    const result = await fetchAPI<{ items: SkillItem[] }>("/api/skills");
+    loading = false;
+    if (!result.success || !result.data) {
+      await toastApiResult(result, { failKey: "toast-skill-load-failed" });
+      return;
+    }
+    skills = result.data.items;
+  }
+
+  function openCreate() {
+    editingId = null;
+    draft = emptyDraft();
+    dialogOpen = true;
+  }
+
+  function openEdit(skill: SkillItem) {
+    editingId = skill.id;
+    draft = {
+      id: skill.id,
+      name: skill.name,
+      description: skill.description,
+      content: skill.content,
+      autoinvoke: skill.autoinvoke,
+      enabled: skill.enabled,
+    };
+    dialogOpen = true;
+  }
+
+  async function saveSkill() {
+    const payload = {
+      id: draft.id.trim(),
+      name: draft.name.trim(),
+      description: draft.description.trim(),
+      content: draft.content,
+      autoinvoke: draft.autoinvoke,
+      enabled: draft.enabled,
+    };
+    if (!payload.name || !payload.content.trim() || (!editingId && !payload.id)) {
+      toast.error(t("toast-skill-save-failed"));
+      return;
+    }
+
+    const result = editingId
+      ? await fetchAPI<SkillItem>(`/api/skills/${encodeURIComponent(editingId)}`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            name: payload.name,
+            description: payload.description,
+            content: payload.content,
+            autoinvoke: payload.autoinvoke,
+            enabled: payload.enabled,
+          }),
+        })
+      : await fetchAPI<SkillItem>("/api/skills", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload),
+        });
+
+    await toastApiResult(result, {
+      successKey: "toast-skill-save-success",
+      failKey: "toast-skill-save-failed",
+      onSuccess: async () => {
+        dialogOpen = false;
+        await loadSkills();
+      },
+    });
+  }
+
+  async function deleteSkill(id: string) {
+    const ok = await askConfirm({
+      title: t("confirm-delete-title"),
+      detail: t("confirm-delete-skill", { id }),
+      confirmLabel: t("btn-delete-selected"),
+      cancelLabel: t("btn-cancel"),
+      tone: "danger",
+    });
+    if (!ok) return;
+    const result = await fetchAPI(`/api/skills/${encodeURIComponent(id)}`, {
+      method: "DELETE",
+    });
+    await toastApiResult(result, {
+      successKey: "toast-skill-delete-success",
+      failKey: "toast-skill-delete-failed",
+      onSuccess: () => loadSkills(),
+    });
+  }
+
+  return {
+    get skills() {
+      return skills;
+    },
+    get loading() {
+      return loading;
+    },
+    get dialogOpen() {
+      return dialogOpen;
+    },
+    set dialogOpen(v: boolean) {
+      dialogOpen = v;
+    },
+    get editingId() {
+      return editingId;
+    },
+    get draft() {
+      return draft;
+    },
+    set draft(v: SkillDraft) {
+      draft = v;
+    },
+    loadSkills,
+    openCreate,
+    openEdit,
+    saveSkill,
+    deleteSkill,
+  };
+}
+
+export type SkillsStore = ReturnType<typeof createSkillsStore>;
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 27b4ad20..96370f0d 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -20,6 +20,16 @@ export default defineConfig({
       "@": path.resolve(webRoot, "src"),
     },
   },
+  optimizeDeps: {
+    exclude: [
+      "codemirror",
+      "svelte-codemirror-editor",
+      "@codemirror/lang-markdown",
+      "@codemirror/theme-one-dark",
+      "@codemirror/view",
+      "@codemirror/state",
+    ],
+  },
   server: {
     // When SIM is on, the plugin handles /api before the proxy.
     proxy: simEnabled
@@ -29,6 +39,10 @@ export default defineConfig({
             target: "http://127.0.0.1:4747",
             changeOrigin: true,
           },
+          "/skills": {
+            target: "http://127.0.0.1:4747",
+            changeOrigin: true,
+          },
         },
   },
   build: {

From 83885e3693e6d6ca79bdb1e7f414dfff9f007a85 Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 10:48:46 +0200
Subject: [PATCH 02/25] fix(web): reuse FormField/Textarea for skill dialog
 labels

Drop the custom CodeMirror markdown editor so floating labels match
existing memory dialogs and stop fighting hint/placeholder layout.
---
 web/bun.lock                                  | 58 ------------
 web/package.json                              |  6 --
 .../components/explorer/SkillDialog.svelte    | 35 ++-----
 .../lib/components/ui/markdown-editor.svelte  | 94 -------------------
 web/vite.config.ts                            | 10 --
 5 files changed, 10 insertions(+), 193 deletions(-)
 delete mode 100644 web/src/lib/components/ui/markdown-editor.svelte

diff --git a/web/bun.lock b/web/bun.lock
index a0748e56..59c29c2a 100644
--- a/web/bun.lock
+++ b/web/bun.lock
@@ -5,15 +5,9 @@
     "": {
       "name": "web",
       "dependencies": {
-        "@codemirror/lang-markdown": "^6.5.2",
-        "@codemirror/state": "^6.7.6",
-        "@codemirror/theme-one-dark": "^6.1.3",
-        "@codemirror/view": "^6.43.14",
-        "codemirror": "^6.0.2",
         "dompurify": "^3.4.16",
         "jsonrepair": "^3.15.0",
         "marked": "^18.1.0",
-        "svelte-codemirror-editor": "^2.1.0",
         "zod": "^4.6.5",
       },
       "devDependencies": {
@@ -38,32 +32,6 @@
     },
   },
   "packages": {
-    "@codemirror/autocomplete": ["@codemirror/autocomplete@6.20.3", "", { "dependencies": { "@codemirror/language": "^6.0.0", "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.17.0", "@lezer/common": "^1.0.0" } }, "sha512-tlosUqb+3BbxCxZdu4tKeRghPFC+QM7q4X5YhKV2eCmPG+1r2F3f4AaSz5sCrFqUtX4Jh20VFTKecl16MgiV9g=="],
-
-    "@codemirror/commands": ["@codemirror/commands@6.11.1", "", { "dependencies": { "@codemirror/language": "^6.0.0", "@codemirror/state": "^6.7.0", "@codemirror/view": "^6.27.0", "@lezer/common": "^1.1.0" } }, "sha512-O/4hG3SC1YwcmQ0d2UVNDs+AsaNWd1iHVxbTeEBuqH+6bExAiPK3iS/BvpY6rZGURALv4ZD3sIgcCmRvw3ehBg=="],
-
-    "@codemirror/lang-css": ["@codemirror/lang-css@6.3.1", "", { "dependencies": { "@codemirror/autocomplete": "^6.0.0", "@codemirror/language": "^6.0.0", "@codemirror/state": "^6.0.0", "@lezer/common": "^1.0.2", "@lezer/css": "^1.1.7" } }, "sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg=="],
-
-    "@codemirror/lang-html": ["@codemirror/lang-html@6.4.12", "", { "dependencies": { "@codemirror/autocomplete": "^6.0.0", "@codemirror/lang-css": "^6.0.0", "@codemirror/lang-javascript": "^6.0.0", "@codemirror/language": "^6.4.0", "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.17.0", "@lezer/common": "^1.0.0", "@lezer/css": "^1.1.0", "@lezer/html": "^1.3.12" } }, "sha512-pw2ReWKUqSkbvh76RAT4NYxiogRu+PWkR2ukAwO9uOgrm8uipkzjtKKtNpyeAQwHOqxEeSvAXZ6vr3AfyB9y/w=="],
-
-    "@codemirror/lang-javascript": ["@codemirror/lang-javascript@6.2.5", "", { "dependencies": { "@codemirror/autocomplete": "^6.0.0", "@codemirror/language": "^6.6.0", "@codemirror/lint": "^6.0.0", "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.17.0", "@lezer/common": "^1.0.0", "@lezer/javascript": "^1.0.0" } }, "sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A=="],
-
-    "@codemirror/lang-markdown": ["@codemirror/lang-markdown@6.5.2", "", { "dependencies": { "@codemirror/autocomplete": "^6.7.1", "@codemirror/lang-html": "^6.0.0", "@codemirror/language": "^6.3.0", "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.0.0", "@lezer/common": "^1.2.1", "@lezer/markdown": "^1.0.0" } }, "sha512-AwBOdkWYuA//WcM0xO5PfHPUcmz/O2i5o0Nsg1U69SII/loCJlFI1Romd9xp2HYb1kYJRGZotyqRghuHH5n8Kw=="],
-
-    "@codemirror/language": ["@codemirror/language@6.13.1", "", { "dependencies": { "@codemirror/state": "^6.0.0", "@codemirror/streamparser": "^6.0.0", "@codemirror/view": "^6.23.0", "@lezer/common": "^1.5.0", "@lezer/highlight": "^1.0.0", "@lezer/lr": "^1.0.0", "style-mod": "^4.0.0" } }, "sha512-zfvU2r3TyylQLMj/te+5CnQ0rSqZi8B1oTCBbQkagcLW4Xc6imab6qN+pEJhsuNOLaJqiRyBXp9UhWA1DhVvDw=="],
-
-    "@codemirror/lint": ["@codemirror/lint@6.9.7", "", { "dependencies": { "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.42.0", "crelt": "^1.0.5" } }, "sha512-28/+iWLYxKxsvGYhSYL7zaCZqLz5+FFFDq9tVsvGv9kv8RY4fFAchJ5WX9M3YrrRlTIsECjsXPqeNgnSmNP2dg=="],
-
-    "@codemirror/search": ["@codemirror/search@6.7.2", "", { "dependencies": { "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.37.0", "crelt": "^1.0.5" } }, "sha512-gUYkYhT2+n/+VGZ+8EzE5WFkYZUZYm1VOKDudIsNqh42uRVQJ0a6Yss9sdKT3MeOYfuL1N6AZA57oza0Oyr0LA=="],
-
-    "@codemirror/state": ["@codemirror/state@6.7.6", "", { "dependencies": { "@marijn/find-cluster-break": "^1.0.0" } }, "sha512-kAz+AncRtKuIknedxT1bq4XwXv4UowhbkHU1myPrtVb/jZtImWuV5BXzv5vK6i3kYACsdiZiQKFQQ5Mq7elW8w=="],
-
-    "@codemirror/streamparser": ["@codemirror/streamparser@6.0.0", "", {}, "sha512-JTFPF6xrfjt0mnfGPgzcLiMwYmvIyNaoizp8BYzv8FE8KrT6GBGDZ190rtt+O7Wke3gG/MFHyiY9YGNeimof4w=="],
-
-    "@codemirror/theme-one-dark": ["@codemirror/theme-one-dark@6.1.3", "", { "dependencies": { "@codemirror/language": "^6.0.0", "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.0.0", "@lezer/highlight": "^1.0.0" } }, "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA=="],
-
-    "@codemirror/view": ["@codemirror/view@6.43.14", "", { "dependencies": { "@codemirror/state": "^6.7.0", "crelt": "^1.0.6", "style-mod": "^4.1.0", "w3c-keyname": "^2.2.4" } }, "sha512-hC45YnmJNR1rz42OF57BLoQNFMV12/13drnvibDsR2quNDmldcb4WvYVV81hFQg56i9lcqQMEDqilhX2QDcGQQ=="],
-
     "@floating-ui/core": ["@floating-ui/core@1.8.0", "", { "dependencies": { "@floating-ui/utils": "^0.2.12" } }, "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ=="],
 
     "@floating-ui/dom": ["@floating-ui/dom@1.8.0", "", { "dependencies": { "@floating-ui/core": "^1.8.0", "@floating-ui/utils": "^0.2.12" } }, "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg=="],
@@ -84,24 +52,8 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
-    "@lezer/common": ["@lezer/common@1.5.3", "", {}, "sha512-H0iErY4e43LpXbYDyBci5W4v/RwTgGV3YzYOlJPiGZ8RY8w51kVE+xLn1tg3Z6UmSfyETvtsUK3r7YsgDQEI7Q=="],
-
-    "@lezer/css": ["@lezer/css@1.3.9", "", { "dependencies": { "@lezer/common": "^1.2.0", "@lezer/highlight": "^1.0.0", "@lezer/lr": "^1.3.0" } }, "sha512-ZmzgvTOBdJWGIsY/ItAfN7UW8DV802oZG+jeG6E508SwEzz5YhuAajptpWPICvIyqYAD2+VjMdOS40GgGkyEOQ=="],
-
-    "@lezer/highlight": ["@lezer/highlight@1.2.5", "", { "dependencies": { "@lezer/common": "^1.3.0" } }, "sha512-O1GMVKgtf5YspFaRzpmqkVgMtIk2HG9uMAbH6wdAIdNh3TVzCsch/+cRi+6l2//UGDKe6NB9BW3cvuR5ezMQ0w=="],
-
-    "@lezer/html": ["@lezer/html@1.3.13", "", { "dependencies": { "@lezer/common": "^1.2.0", "@lezer/highlight": "^1.0.0", "@lezer/lr": "^1.0.0" } }, "sha512-oI7n6NJml729m7pjm9lvLvmXbdoMoi2f+1pwSDJkl9d68zGr7a9Btz8NdHTGQZtW2DA25ybeuv/SyDb9D5tseg=="],
-
-    "@lezer/javascript": ["@lezer/javascript@1.5.6", "", { "dependencies": { "@lezer/common": "^1.2.0", "@lezer/highlight": "^1.1.3", "@lezer/lr": "^1.3.0" } }, "sha512-sEvOqpl4vJQca0NugSQK02vQPbc5KrvoojnYGoqqFgFO0MtcYhwGiHKVEB+LuXYJnfyXo4QPA8ztbrEa4Fw5NA=="],
-
-    "@lezer/lr": ["@lezer/lr@1.4.11", "", { "dependencies": { "@lezer/common": "^1.0.0" } }, "sha512-UwgZcl1R66H2hDzBrA7kWyYmX6s8p5TQ+e/t7CuvgCtBEPxbEPaHYHu+pJBvTvDotEJpuQkJjbXuHiw5Cixxgw=="],
-
-    "@lezer/markdown": ["@lezer/markdown@1.8.0", "", { "dependencies": { "@lezer/common": "^1.5.0", "@lezer/highlight": "^1.0.0" } }, "sha512-X6w3A2NpyhdtGqTWRJB8gR4QDXBaFMbTOs780ZdZ15KKCfBXOQTKcB3Vr+W6tqJHVlealt53tLmHRvOqPTQgYA=="],
-
     "@lucide/svelte": ["@lucide/svelte@1.52.0", "", { "peerDependencies": { "svelte": "^5" } }, "sha512-bQ8t3IcZxWqAdmdMZPyZEv8Qf+MDgBAf7n43eRQoXyBeLWr8HWToiMIO6vKlHxC/lnMiCDdTzm09hjy92ch46A=="],
 
-    "@marijn/find-cluster-break": ["@marijn/find-cluster-break@1.0.4", "", {}, "sha512-Wy0V7+SGUjnF9/TkiM1hKVDPj7jKXduPNboMVtHTA8dySMURWqfg/JZ9E2Sq8JgSJmkl7k7Qe9FLeMSrSraWmQ=="],
-
     "@oxc-project/types": ["@oxc-project/types@0.152.0", "", {}, "sha512-oM/5rLBm2tPkg0iBgkH/FOeR3PCDpY19GTgAZjMFM8h9WI9VW7cLgzp6nwtarYKmovavIQZ+Fe/RKX/8C8O/Rw=="],
 
     "@resvg/resvg-js": ["@resvg/resvg-js@2.6.2", "", { "optionalDependencies": { "@resvg/resvg-js-android-arm-eabi": "2.6.2", "@resvg/resvg-js-android-arm64": "2.6.2", "@resvg/resvg-js-darwin-arm64": "2.6.2", "@resvg/resvg-js-darwin-x64": "2.6.2", "@resvg/resvg-js-linux-arm-gnueabihf": "2.6.2", "@resvg/resvg-js-linux-arm64-gnu": "2.6.2", "@resvg/resvg-js-linux-arm64-musl": "2.6.2", "@resvg/resvg-js-linux-x64-gnu": "2.6.2", "@resvg/resvg-js-linux-x64-musl": "2.6.2", "@resvg/resvg-js-win32-arm64-msvc": "2.6.2", "@resvg/resvg-js-win32-ia32-msvc": "2.6.2", "@resvg/resvg-js-win32-x64-msvc": "2.6.2" } }, "sha512-xBaJish5OeGmniDj9cW5PRa/PtmuVU3ziqrbr5xJj901ZDN4TosrVaNZpEiLZAxdfnhAe7uQ7QFWfjPe9d9K2Q=="],
@@ -218,10 +170,6 @@
 
     "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
-    "codemirror": ["codemirror@6.0.2", "", { "dependencies": { "@codemirror/autocomplete": "^6.0.0", "@codemirror/commands": "^6.0.0", "@codemirror/language": "^6.0.0", "@codemirror/lint": "^6.0.0", "@codemirror/search": "^6.0.0", "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.0.0" } }, "sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw=="],
-
-    "crelt": ["crelt@1.0.7", "", {}, "sha512-aK6BbWfhf4U/wCcLHKPJl/xa6VkVstRaPywWtMKGwuOLc/wZTyQYuoxgvZnNsBvv7Kg3YTBQYYBCggcviQczuA=="],
-
     "deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],
 
     "dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
@@ -310,16 +258,12 @@
 
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
-    "style-mod": ["style-mod@4.1.4", "", {}, "sha512-XXWIQt633/EpAFx8aZDOTjBzrCaGmhvEQlQo6MVPfa2OzO2cWo+4hV9h+6UkHYlXGfy+ODXKUdP7Pthmcu5ATw=="],
-
     "style-to-object": ["style-to-object@1.0.14", "", { "dependencies": { "inline-style-parser": "0.2.7" } }, "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw=="],
 
     "svelte": ["svelte@5.57.1", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "@jridgewell/sourcemap-codec": "^1.6.0", "@sveltejs/acorn-typescript": "^1.0.13", "@types/estree": "^1.0.9", "acorn": "^8.18.0", "aria-query": "5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "devalue": "^5.9.2", "esm-env": "^1.2.1", "esrap": "^2.3.6", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-Uqj49lWKB+iSSnneuwiYYJ7MZgkB+eXr0LXBhv4uDuAkXqnWmq65Sxflfvp0Lc6MdKjMUxGaeOKWJqz5SNiVIA=="],
 
     "svelte-check": ["svelte-check@4.7.6", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "@sveltejs/load-config": "^0.2.3", "chokidar": "^4.0.1", "fdir": "^6.2.0", "picocolors": "^1.0.0", "sade": "^1.7.4" }, "peerDependencies": { "svelte": "^4.0.0 || ^5.0.0-next.0", "typescript": "^5.0.0 || ^6.0.0" }, "bin": { "svelte-check": "bin/svelte-check" } }, "sha512-t2scM//ZuVbSY/T2w6FSBw1v9s2NEmh/g+sy1lqtosW5ylBV5AF4wFb1Ts9Kf3MbfPDUDJDZ9L436YT0SPTdvw=="],
 
-    "svelte-codemirror-editor": ["svelte-codemirror-editor@2.1.0", "", { "peerDependencies": { "codemirror": "^6.0.0", "svelte": "^5.0.0" } }, "sha512-WGkSsIYNpVcOVxaQPkmdBQhaGyKLmg6pgaS/b+7guRb4eikrbXYtvNFuW2AzKJi8ZbLhSngrf3SRiZOuwuskrQ=="],
-
     "svelte-toolbelt": ["svelte-toolbelt@0.10.6", "", { "dependencies": { "clsx": "^2.1.1", "runed": "^0.35.1", "style-to-object": "^1.0.8" }, "peerDependencies": { "svelte": "^5.30.2" } }, "sha512-YWuX+RE+CnWYx09yseAe4ZVMM7e7GRFZM6OYWpBKOb++s+SQ8RBIMMe+Bs/CznBMc0QPLjr+vDBxTAkozXsFXQ=="],
 
     "tabbable": ["tabbable@6.5.0", "", {}, "sha512-wieBHXygIm7OyQOu5hQlkk62/WyCFYGlWg7L6/ZCUZwx0o398Zkn4pVmMyfYhfMG8kGrj/Krt8eIk6UKC6VzwA=="],
@@ -346,8 +290,6 @@
 
     "vitefu": ["vitefu@1.1.3", "", { "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" }, "optionalPeers": ["vite"] }, "sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg=="],
 
-    "w3c-keyname": ["w3c-keyname@2.2.8", "", {}, "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="],
-
     "zimmerframe": ["zimmerframe@1.1.5", "", {}, "sha512-msJxIvYDYcoNL+PJsu+7qmpDWsYmAxTY+2TNYXXF0hzBzBk0BMecOqDOG/EckUoKCuKwObfbugIl8QpqHDXeFA=="],
 
     "zod": ["zod@4.6.5", "", {}, "sha512-v5l/aFXZQeai4awLbOpSoHecE9UiMrnfx75tEXLjNonXVARxQ5mOeipTjROUchszUNCqnE+hqAMujRsRHsut2Q=="],
diff --git a/web/package.json b/web/package.json
index 6fe3ee2b..6e58a522 100644
--- a/web/package.json
+++ b/web/package.json
@@ -11,15 +11,9 @@
     "check": "svelte-check --tsconfig ./tsconfig.app.json --threshold error"
   },
   "dependencies": {
-    "@codemirror/lang-markdown": "^6.5.2",
-    "@codemirror/state": "^6.7.6",
-    "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.43.14",
-    "codemirror": "^6.0.2",
     "dompurify": "^3.4.16",
     "jsonrepair": "^3.15.0",
     "marked": "^18.1.0",
-    "svelte-codemirror-editor": "^2.1.0",
     "zod": "^4.6.5"
   },
   "devDependencies": {
diff --git a/web/src/lib/components/explorer/SkillDialog.svelte b/web/src/lib/components/explorer/SkillDialog.svelte
index 3a4c1bf9..c3e76ec2 100644
--- a/web/src/lib/components/explorer/SkillDialog.svelte
+++ b/web/src/lib/components/explorer/SkillDialog.svelte
@@ -5,9 +5,9 @@
   import FormField from "$lib/components/ui/form-field.svelte";
   import Input from "$lib/components/ui/input.svelte";
   import Checkbox from "$lib/components/ui/checkbox.svelte";
-  import MarkdownEditor from "$lib/components/ui/markdown-editor.svelte";
+  import Textarea from "$lib/components/ui/textarea.svelte";
   import { useI18n } from "$lib/i18n/context.svelte";
-  import { STACK_FORM } from "$lib/ui/styles";
+  import { GAP_LOOSE, STACK_FORM } from "$lib/ui/styles";
 
   type Props = {
     open?: boolean;
@@ -40,7 +40,7 @@
 <AppDialog
   bind:open
   title={editing ? i18n.t("modal-skill-edit-title") : i18n.t("modal-skill-create-title")}
-  class="max-w-4xl sm:max-w-4xl"
+  class="sm:max-w-lg"
   onOpenChange={handleOpenChange}
 >
   <form
@@ -51,7 +51,7 @@
       submit();
     }}
   >
-    <div class="grid gap-3 md:grid-cols-2">
+    <div class="grid sm:grid-cols-2 {GAP_LOOSE}">
       <FormField id="skill-id" label={i18n.t("label-skill-id")} value={draft.id}>
         <Input
           id="skill-id"
@@ -60,30 +60,21 @@
           required={!editing}
           pattern="[a-z0-9]+(-[a-z0-9]+)*"
           maxlength={64}
-          placeholder={i18n.t("placeholder-skill-id")}
         />
-        <p class="mt-1 text-xs text-muted-foreground">{i18n.t("hint-skill-id")}</p>
       </FormField>
       <FormField id="skill-name" label={i18n.t("label-skill-name")} value={draft.name}>
-        <Input
-          id="skill-name"
-          bind:value={draft.name}
-          required
-          placeholder={i18n.t("placeholder-skill-name")}
-        />
+        <Input id="skill-name" bind:value={draft.name} required />
       </FormField>
     </div>
 
+    <p class="text-xs text-muted-foreground">{i18n.t("hint-skill-id")}</p>
+
     <FormField
       id="skill-description"
       label={i18n.t("label-skill-description")}
       value={draft.description}
     >
-      <Input
-        id="skill-description"
-        bind:value={draft.description}
-        placeholder={i18n.t("placeholder-skill-description")}
-      />
+      <Input id="skill-description" bind:value={draft.description} />
     </FormField>
 
     <div class="flex flex-wrap gap-4">
@@ -97,14 +88,8 @@
       </label>
     </div>
 
-    <FormField label={i18n.t("label-skill-content")} floating={false} spacing="normal">
-      <MarkdownEditor
-        bind:value={draft.content}
-        placeholder={i18n.t("placeholder-skill-content")}
-        editLabel={i18n.t("skill-edit")}
-        previewLabel={i18n.t("skill-preview")}
-        minHeight="18rem"
-      />
+    <FormField id="skill-content" label={i18n.t("label-skill-content")} value={draft.content}>
+      <Textarea id="skill-content" rows={10} required bind:value={draft.content} />
     </FormField>
   </form>
 
diff --git a/web/src/lib/components/ui/markdown-editor.svelte b/web/src/lib/components/ui/markdown-editor.svelte
deleted file mode 100644
index f5a9c340..00000000
--- a/web/src/lib/components/ui/markdown-editor.svelte
+++ /dev/null
@@ -1,94 +0,0 @@
-<script lang="ts">
-  import CodeMirror from "svelte-codemirror-editor";
-  import { markdown } from "@codemirror/lang-markdown";
-  import { oneDark } from "@codemirror/theme-one-dark";
-  import { EditorView } from "@codemirror/view";
-  import Button from "$lib/components/ui/button.svelte";
-  import { renderMarkdown } from "$lib/markdown";
-  import { createTheme } from "$lib/theme.svelte";
-  import { cn } from "$lib/utils";
-
-  type Props = {
-    value?: string;
-    placeholder?: string;
-    editLabel?: string;
-    previewLabel?: string;
-    class?: string;
-    minHeight?: string;
-  };
-
-  let {
-    value = $bindable(""),
-    placeholder = "",
-    editLabel = "Edit",
-    previewLabel = "Preview",
-    class: className,
-    minHeight = "16rem",
-  }: Props = $props();
-
-  const themeStore = createTheme();
-  const isDark = $derived(themeStore.theme === "dark");
-  let mobileTab = $state<"edit" | "preview">("edit");
-
-  const previewHtml = $derived(renderMarkdown(value || ""));
-</script>
-
-<div class={cn("space-y-2", className)}>
-  <div class="flex gap-1 md:hidden">
-    <Button
-      type="button"
-      size="xs"
-      variant={mobileTab === "edit" ? "secondary" : "ghost"}
-      onclick={() => (mobileTab = "edit")}
-    >
-      {editLabel}
-    </Button>
-    <Button
-      type="button"
-      size="xs"
-      variant={mobileTab === "preview" ? "secondary" : "ghost"}
-      onclick={() => (mobileTab = "preview")}
-    >
-      {previewLabel}
-    </Button>
-  </div>
-
-  <div class="grid gap-3 md:grid-cols-2" style:min-height={minHeight}>
-    <div
-      class={cn(
-        "overflow-hidden rounded-xl border border-border bg-card",
-        mobileTab !== "edit" && "max-md:hidden"
-      )}
-    >
-      <CodeMirror
-        bind:value
-        lang={markdown()}
-        theme={isDark ? oneDark : undefined}
-        extensions={[EditorView.lineWrapping]}
-        styles={{
-          "&": {
-            height: minHeight,
-            fontSize: "0.875rem",
-          },
-        }}
-        {placeholder}
-        class="text-sm [&_.cm-editor]:outline-none [&_.cm-scroller]:font-mono"
-      />
-    </div>
-    <div
-      class={cn(
-        "overflow-auto rounded-xl border border-border bg-muted/30 p-3",
-        mobileTab !== "preview" && "max-md:hidden"
-      )}
-      style:min-height={minHeight}
-    >
-      {#if value.trim()}
-        <div class="markdown-content prose-invert max-w-none text-sm">
-          {@html previewHtml}
-        </div>
-      {:else}
-        <p class="text-sm text-muted-foreground">{placeholder}</p>
-      {/if}
-    </div>
-  </div>
-</div>
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 96370f0d..cca2d276 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -20,16 +20,6 @@ export default defineConfig({
       "@": path.resolve(webRoot, "src"),
     },
   },
-  optimizeDeps: {
-    exclude: [
-      "codemirror",
-      "svelte-codemirror-editor",
-      "@codemirror/lang-markdown",
-      "@codemirror/theme-one-dark",
-      "@codemirror/view",
-      "@codemirror/state",
-    ],
-  },
   server: {
     // When SIM is on, the plugin handles /api before the proxy.
     proxy: simEnabled

From d5fd2a2eea3b6b0f7b8c40ddcdaa1930382297dd Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 10:49:37 +0200
Subject: [PATCH 03/25] fix(web): remove skills bridge hint from skills view

---
 web/src/lib/components/explorer/SkillsView.svelte | 9 +++------
 web/src/lib/i18n/translations.ts                  | 8 ++++----
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/web/src/lib/components/explorer/SkillsView.svelte b/web/src/lib/components/explorer/SkillsView.svelte
index 6a464354..846a5142 100644
--- a/web/src/lib/components/explorer/SkillsView.svelte
+++ b/web/src/lib/components/explorer/SkillsView.svelte
@@ -28,12 +28,9 @@
 
 <section class="space-y-4">
   <div class={cn("flex flex-wrap items-center justify-between", GAP_LOOSE)}>
-    <div class="space-y-1">
-      <h1 class="text-lg font-medium tracking-tight">
-        {i18n.t("section-skills", { count: skills.length })}
-      </h1>
-      <p class="text-sm text-muted-foreground">{i18n.t("skill-hint")}</p>
-    </div>
+    <h1 class="text-lg font-medium tracking-tight">
+      {i18n.t("section-skills", { count: skills.length })}
+    </h1>
     <Button onclick={onCreate}>
       <Plus class={ICON_SM} aria-hidden="true" />
       {i18n.t("btn-new-skill")}
diff --git a/web/src/lib/i18n/translations.ts b/web/src/lib/i18n/translations.ts
index c6fb594d..b3e764e4 100644
--- a/web/src/lib/i18n/translations.ts
+++ b/web/src/lib/i18n/translations.ts
@@ -188,7 +188,6 @@ export const translations = {
     "skill-preview": "Preview",
     "skill-empty": "No skills yet. Create a reusable procedure the agent can load.",
     "skill-disabled": "Disabled",
-    "skill-hint": "OpenCode loads these via the native skill tool (V2 plugin bridge).",
     "confirm-delete-skill": "Delete skill “{id}”?",
     "toast-skill-save-success": "Skill saved",
     "toast-skill-save-failed": "Failed to save skill",
@@ -388,16 +387,17 @@ export const translations = {
     "placeholder-skill-content": "## Was ich tue\n\n- …",
     "skill-edit": "Bearbeiten",
     "skill-preview": "Vorschau",
-    "skill-empty": "Noch keine Skills. Lege eine wiederverwendbare Prozedur an, die der Agent laden kann.",
+    "skill-empty":
+      "Noch keine Skills. Lege eine wiederverwendbare Prozedur an, die der Agent laden kann.",
     "skill-disabled": "Deaktiviert",
-    "skill-hint": "OpenCode lädt diese über das native skill-Tool (V2-Plugin-Bridge).",
     "confirm-delete-skill": "Skill „{id}“ löschen?",
     "toast-skill-save-success": "Skill gespeichert",
     "toast-skill-save-failed": "Skill konnte nicht gespeichert werden",
     "toast-skill-delete-success": "Skill gelöscht",
     "toast-skill-delete-failed": "Skill konnte nicht gelöscht werden",
     "toast-skill-load-failed": "Skills konnten nicht geladen werden",
-    "hint-skill-id": "Kleinbuchstaben kebab-case (a-z, 0-9, Bindestriche). Wird zur OpenCode Skill-ID.",
+    "hint-skill-id":
+      "Kleinbuchstaben kebab-case (a-z, 0-9, Bindestriche). Wird zur OpenCode Skill-ID.",
   },
   zh: {
     title: "OpenCode Memory Explorer",

From 6f2a2283aac4fa80258bdded3b8d01d69d67a09c Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 10:50:12 +0200
Subject: [PATCH 04/25] fix(web): align skills empty state with memory explorer

---
 .../lib/components/explorer/SkillsView.svelte | 110 ++++++++----------
 web/src/lib/i18n/translations.ts              |   2 +-
 2 files changed, 50 insertions(+), 62 deletions(-)

diff --git a/web/src/lib/components/explorer/SkillsView.svelte b/web/src/lib/components/explorer/SkillsView.svelte
index 846a5142..686e7a71 100644
--- a/web/src/lib/components/explorer/SkillsView.svelte
+++ b/web/src/lib/components/explorer/SkillsView.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-  import Loader from "@lucide/svelte/icons/loader";
   import Pencil from "@lucide/svelte/icons/pencil";
   import Plus from "@lucide/svelte/icons/plus";
-  import Sparkles from "@lucide/svelte/icons/sparkles";
   import Trash2 from "@lucide/svelte/icons/trash-2";
   import type { SkillItem } from "$lib/stores/skills.svelte";
   import Badge from "$lib/components/ui/badge.svelte";
@@ -10,7 +8,7 @@
   import EmptyState from "$lib/components/ui/empty-state.svelte";
   import { useI18n } from "$lib/i18n/context.svelte";
   import { formatDate } from "$lib/format";
-  import { GAP_LOOSE, ICON, ICON_SM } from "$lib/ui/styles";
+  import { GAP_LOOSE, ICON_SM, STACK } from "$lib/ui/styles";
   import { cn } from "$lib/utils";
 
   type Props = {
@@ -37,66 +35,56 @@
     </Button>
   </div>
 
-  {#if loading}
-    <div class={cn("flex items-center text-sm text-muted-foreground", GAP_LOOSE)}>
-      <Loader class={cn(ICON_SM, "animate-spin")} aria-hidden="true" />
-      {i18n.t("loading-init")}
-    </div>
-  {:else if skills.length === 0}
-    <div class="rounded-xl border border-dashed border-border bg-card/50 p-6">
-      <div class="mb-3 flex justify-center text-muted-foreground">
-        <Sparkles class={ICON} aria-hidden="true" />
-      </div>
+  <div class={cn(STACK, "min-h-32")}>
+    {#if loading && skills.length === 0}
+      <EmptyState>{i18n.t("loading-init")}</EmptyState>
+    {:else if skills.length === 0}
       <EmptyState>{i18n.t("skill-empty")}</EmptyState>
-      <div class="mt-3 flex justify-center">
-        <Button variant="secondary" onclick={onCreate}>
-          <Plus class={ICON_SM} aria-hidden="true" />
-          {i18n.t("btn-add-skill")}
-        </Button>
-      </div>
-    </div>
-  {:else}
-    <ul class="space-y-2">
-      {#each skills as skill (skill.id)}
-        <li class="rounded-xl border border-border bg-card p-4 transition-colors hover:bg-card/80">
-          <div class={cn("flex flex-wrap items-start justify-between", GAP_LOOSE)}>
-            <div class="min-w-0 space-y-1">
-              <div class={cn("flex flex-wrap items-center", GAP_LOOSE)}>
-                <h2 class="truncate text-sm font-medium">{skill.name}</h2>
-                <Badge variant="outline" class="font-mono text-[10px]">{skill.id}</Badge>
-                {#if !skill.enabled}
-                  <Badge variant="secondary">{i18n.t("skill-disabled")}</Badge>
-                {/if}
-                {#if skill.autoinvoke}
-                  <Badge variant="outline" class="text-[10px]">auto</Badge>
+    {:else}
+      <ul class="space-y-2">
+        {#each skills as skill (skill.id)}
+          <li
+            class="rounded-xl border border-border bg-card p-4 transition-colors hover:bg-card/80"
+          >
+            <div class={cn("flex flex-wrap items-start justify-between", GAP_LOOSE)}>
+              <div class="min-w-0 space-y-1">
+                <div class={cn("flex flex-wrap items-center", GAP_LOOSE)}>
+                  <h2 class="truncate text-sm font-medium">{skill.name}</h2>
+                  <Badge variant="outline" class="font-mono text-[10px]">{skill.id}</Badge>
+                  {#if !skill.enabled}
+                    <Badge variant="secondary">{i18n.t("skill-disabled")}</Badge>
+                  {/if}
+                  {#if skill.autoinvoke}
+                    <Badge variant="outline" class="text-[10px]">auto</Badge>
+                  {/if}
+                </div>
+                {#if skill.description}
+                  <p class="text-sm text-muted-foreground">{skill.description}</p>
                 {/if}
+                <p class="text-xs text-muted-foreground">{formatDate(skill.updatedAt)}</p>
+              </div>
+              <div class="flex shrink-0 gap-1">
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label={i18n.t("skill-edit")}
+                  onclick={() => onEdit?.(skill)}
+                >
+                  <Pencil class={ICON_SM} aria-hidden="true" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label={i18n.t("confirm-delete-title")}
+                  onclick={() => onDelete?.(skill.id)}
+                >
+                  <Trash2 class={ICON_SM} aria-hidden="true" />
+                </Button>
               </div>
-              {#if skill.description}
-                <p class="text-sm text-muted-foreground">{skill.description}</p>
-              {/if}
-              <p class="text-xs text-muted-foreground">{formatDate(skill.updatedAt)}</p>
-            </div>
-            <div class="flex shrink-0 gap-1">
-              <Button
-                variant="ghost"
-                size="icon-sm"
-                aria-label={i18n.t("skill-edit")}
-                onclick={() => onEdit?.(skill)}
-              >
-                <Pencil class={ICON_SM} aria-hidden="true" />
-              </Button>
-              <Button
-                variant="ghost"
-                size="icon-sm"
-                aria-label={i18n.t("confirm-delete-title")}
-                onclick={() => onDelete?.(skill.id)}
-              >
-                <Trash2 class={ICON_SM} aria-hidden="true" />
-              </Button>
             </div>
-          </div>
-        </li>
-      {/each}
-    </ul>
-  {/if}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
 </section>
diff --git a/web/src/lib/i18n/translations.ts b/web/src/lib/i18n/translations.ts
index b3e764e4..65280aa3 100644
--- a/web/src/lib/i18n/translations.ts
+++ b/web/src/lib/i18n/translations.ts
@@ -186,7 +186,7 @@ export const translations = {
     "placeholder-skill-content": "## What I do\n\n- …",
     "skill-edit": "Edit",
     "skill-preview": "Preview",
-    "skill-empty": "No skills yet. Create a reusable procedure the agent can load.",
+    "skill-empty": "No skills found",
     "skill-disabled": "Disabled",
     "confirm-delete-skill": "Delete skill “{id}”?",
     "toast-skill-save-success": "Skill saved",

From a6dd60fbaf5169863a1da9f5e0c1047c2babba5c Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 10:50:33 +0200
Subject: [PATCH 05/25] fix(web): rename skills section heading to Skills

---
 web/src/lib/i18n/translations.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/web/src/lib/i18n/translations.ts b/web/src/lib/i18n/translations.ts
index 65280aa3..9315e536 100644
--- a/web/src/lib/i18n/translations.ts
+++ b/web/src/lib/i18n/translations.ts
@@ -387,8 +387,7 @@ export const translations = {
     "placeholder-skill-content": "## Was ich tue\n\n- …",
     "skill-edit": "Bearbeiten",
     "skill-preview": "Vorschau",
-    "skill-empty":
-      "Noch keine Skills. Lege eine wiederverwendbare Prozedur an, die der Agent laden kann.",
+    "skill-empty": "Keine Skills gefunden",
     "skill-disabled": "Deaktiviert",
     "confirm-delete-skill": "Skill „{id}“ löschen?",
     "toast-skill-save-success": "Skill gespeichert",

From 303fb4d87531ab7a2fcdf1ab64797fefc36a39ba Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 10:51:00 +0200
Subject: [PATCH 06/25] fix(web): show lucide icon on skills empty state

---
 web/src/lib/components/explorer/SkillsView.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/src/lib/components/explorer/SkillsView.svelte b/web/src/lib/components/explorer/SkillsView.svelte
index 686e7a71..81a0ed96 100644
--- a/web/src/lib/components/explorer/SkillsView.svelte
+++ b/web/src/lib/components/explorer/SkillsView.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import Pencil from "@lucide/svelte/icons/pencil";
   import Plus from "@lucide/svelte/icons/plus";
+  import Sparkles from "@lucide/svelte/icons/sparkles";
   import Trash2 from "@lucide/svelte/icons/trash-2";
   import type { SkillItem } from "$lib/stores/skills.svelte";
   import Badge from "$lib/components/ui/badge.svelte";
@@ -8,7 +9,7 @@
   import EmptyState from "$lib/components/ui/empty-state.svelte";
   import { useI18n } from "$lib/i18n/context.svelte";
   import { formatDate } from "$lib/format";
-  import { GAP_LOOSE, ICON_SM, STACK } from "$lib/ui/styles";
+  import { GAP, GAP_LOOSE, ICON_SM, STACK } from "$lib/ui/styles";
   import { cn } from "$lib/utils";
 
   type Props = {

From c5f0c2bf1c2e516e0cc7d307ccd4792e71ffd7e9 Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 10:51:30 +0200
Subject: [PATCH 07/25] fix(web): show skills Total chip in page header

---
 web/src/App.svelte                                |  4 ++++
 web/src/lib/components/explorer/SkillsView.svelte | 10 +++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/web/src/App.svelte b/web/src/App.svelte
index d8cc465d..e3d71b17 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -225,6 +225,10 @@
               <Loader class={cn(ICON_SM, "animate-spin")} aria-hidden="true" />
             {/if}
           </div>
+        {:else if router.view === "skills"}
+          <span class={META_CHIP}>
+            {i18n.t("text-total", { count: skills.skills.length })}
+          </span>
         {/if}
       </div>
     </header>
diff --git a/web/src/lib/components/explorer/SkillsView.svelte b/web/src/lib/components/explorer/SkillsView.svelte
index 81a0ed96..c82f8dc3 100644
--- a/web/src/lib/components/explorer/SkillsView.svelte
+++ b/web/src/lib/components/explorer/SkillsView.svelte
@@ -26,10 +26,7 @@
 </script>
 
 <section class="space-y-4">
-  <div class={cn("flex flex-wrap items-center justify-between", GAP_LOOSE)}>
-    <h1 class="text-lg font-medium tracking-tight">
-      {i18n.t("section-skills", { count: skills.length })}
-    </h1>
+  <div class={cn("flex flex-wrap items-center justify-end", GAP_LOOSE)}>
     <Button onclick={onCreate}>
       <Plus class={ICON_SM} aria-hidden="true" />
       {i18n.t("btn-new-skill")}
@@ -40,7 +37,10 @@
     {#if loading && skills.length === 0}
       <EmptyState>{i18n.t("loading-init")}</EmptyState>
     {:else if skills.length === 0}
-      <EmptyState>{i18n.t("skill-empty")}</EmptyState>
+      <div class={cn("flex flex-col items-center py-10 text-muted-foreground", GAP)}>
+        <Sparkles class="size-8" aria-hidden="true" />
+        <p class="text-sm">{i18n.t("skill-empty")}</p>
+      </div>
     {:else}
       <ul class="space-y-2">
         {#each skills as skill (skill.id)}

From 004636927bd0d0454f23925b3f0084f2ea72770e Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 10:52:34 +0200
Subject: [PATCH 08/25] fix(web): move skills UI to /skill-library to avoid
 catalog clash

Direct /skills navigations were proxied to the OpenCode HTTP catalog
instead of the SPA; keep catalog under /skills/ and the explorer at
/skill-library.
---
 web/src/lib/routes.ts | 3 ++-
 web/vite.config.ts    | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/routes.ts b/web/src/lib/routes.ts
index de71fd5f..18a48987 100644
--- a/web/src/lib/routes.ts
+++ b/web/src/lib/routes.ts
@@ -2,7 +2,8 @@ export const ROUTES = {
   home: "/",
   project: "/project-memories",
   profile: "/user-profile",
-  skills: "/skills",
+  // Keep off `/skills` — that prefix serves the OpenCode HTTP skill catalog.
+  skills: "/skill-library",
 } as const;
 
 export type AppView = "project" | "profile" | "skills";
diff --git a/web/vite.config.ts b/web/vite.config.ts
index cca2d276..8a37a881 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -29,7 +29,8 @@ export default defineConfig({
             target: "http://127.0.0.1:4747",
             changeOrigin: true,
           },
-          "/skills": {
+          // Catalog only (`/skills/index.json`, `/skills/<id>/<id>.md`) — not the SPA.
+          "/skills/": {
             target: "http://127.0.0.1:4747",
             changeOrigin: true,
           },

From 562490eef75fff6ccbd30a2f71b9a18124783671 Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 10:52:46 +0200
Subject: [PATCH 09/25] docs: note skills UI path vs HTTP catalog prefix

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 710cda5c..7abce242 100644
--- a/README.md
+++ b/README.md
@@ -173,10 +173,10 @@ Rule of thumb: lasting always-on project instructions → `AGENTS.md`; growing w
 
 #### Shared Skills (V2)
 
-- Create/edit skills in the web explorer (**Skills** tab): Markdown editor with live preview.
+- Create/edit skills in the web explorer (**Skills** tab at `/skill-library`).
 - Persisted in `skills.db` under the plugin storage path (not as memory vectors).
 - On OpenCode **V2**, the plugin registers enabled skills via `ctx.skill.transform` so the agent can load them with the native `skill` tool.
-- Optional HTTP catalog for other OpenCode instances: add your web base URL to config, e.g. `"skills": ["http://127.0.0.1:4747/skills/"]` (serves `/skills/index.json` and `/skills/<id>/<id>.md`).
+- Optional HTTP catalog for other OpenCode instances: `"skills": ["http://127.0.0.1:4747/skills/"]` (serves `/skills/index.json` and `/skills/<id>/<id>.md` — separate from the UI path).
 - REST: `GET/POST /api/skills`, `GET/PUT/DELETE /api/skills/:id`.
 
 ### Intelligent prompt-based memory extraction

From 3789f96404e17a22d4aa753138df2b67dda090ac Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 10:53:20 +0200
Subject: [PATCH 10/25] fix(web): keep skills section label without Shared
 prefix

---
 web/src/lib/i18n/translations.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/i18n/translations.ts b/web/src/lib/i18n/translations.ts
index 9315e536..1708ce40 100644
--- a/web/src/lib/i18n/translations.ts
+++ b/web/src/lib/i18n/translations.ts
@@ -169,7 +169,7 @@ export const translations = {
     "nav-prev-page": "Previous page",
     "nav-next-page": "Next page",
     "tab-skills": "Skills",
-    "section-skills": "Shared Skills ({count})",
+    "section-skills": "Skills ({count})",
     "btn-add-skill": "Add Skill",
     "btn-new-skill": "New Skill",
     "modal-skill-create-title": "Create Skill",
@@ -370,7 +370,7 @@ export const translations = {
     "nav-prev-page": "Vorherige Seite",
     "nav-next-page": "Nächste Seite",
     "tab-skills": "Skills",
-    "section-skills": "Geteilte Skills ({count})",
+    "section-skills": "Skills ({count})",
     "btn-add-skill": "Skill hinzufügen",
     "btn-new-skill": "Neuer Skill",
     "modal-skill-create-title": "Skill erstellen",

From a6cf23f8b979e701c711898eb2ee868e991fdbcd Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 10:53:42 +0200
Subject: [PATCH 11/25] fix(web): use icon-only add button on skills page

---
 web/src/lib/components/explorer/SkillsView.svelte | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/explorer/SkillsView.svelte b/web/src/lib/components/explorer/SkillsView.svelte
index c82f8dc3..de8a1af4 100644
--- a/web/src/lib/components/explorer/SkillsView.svelte
+++ b/web/src/lib/components/explorer/SkillsView.svelte
@@ -9,7 +9,7 @@
   import EmptyState from "$lib/components/ui/empty-state.svelte";
   import { useI18n } from "$lib/i18n/context.svelte";
   import { formatDate } from "$lib/format";
-  import { GAP, GAP_LOOSE, ICON_SM, STACK } from "$lib/ui/styles";
+  import { GAP, GAP_LOOSE, ICON, ICON_SM, STACK } from "$lib/ui/styles";
   import { cn } from "$lib/utils";
 
   type Props = {
@@ -27,9 +27,14 @@
 
 <section class="space-y-4">
   <div class={cn("flex flex-wrap items-center justify-end", GAP_LOOSE)}>
-    <Button onclick={onCreate}>
-      <Plus class={ICON_SM} aria-hidden="true" />
-      {i18n.t("btn-new-skill")}
+    <Button
+      variant="default"
+      size="icon"
+      aria-label={i18n.t("btn-add-skill")}
+      title={i18n.t("btn-add-skill")}
+      onclick={onCreate}
+    >
+      <Plus class={ICON} aria-hidden="true" />
     </Button>
   </div>
 

From d6f4d4ea44d3dca3053a618faa0251ad06406200 Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 10:55:33 +0200
Subject: [PATCH 12/25] feat(web): add client-side skills search bar

---
 .../lib/components/explorer/SkillsView.svelte | 52 +++++++++++++++----
 web/src/lib/i18n/translations.ts              |  2 +
 2 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/web/src/lib/components/explorer/SkillsView.svelte b/web/src/lib/components/explorer/SkillsView.svelte
index de8a1af4..e9c75bef 100644
--- a/web/src/lib/components/explorer/SkillsView.svelte
+++ b/web/src/lib/components/explorer/SkillsView.svelte
@@ -7,6 +7,7 @@
   import Badge from "$lib/components/ui/badge.svelte";
   import Button from "$lib/components/ui/button.svelte";
   import EmptyState from "$lib/components/ui/empty-state.svelte";
+  import SearchInput from "$lib/components/ui/search-input.svelte";
   import { useI18n } from "$lib/i18n/context.svelte";
   import { formatDate } from "$lib/format";
   import { GAP, GAP_LOOSE, ICON, ICON_SM, STACK } from "$lib/ui/styles";
@@ -23,19 +24,46 @@
   let { skills = [], loading = false, onCreate, onEdit, onDelete }: Props = $props();
 
   const i18n = useI18n();
+  let searchInput = $state("");
+
+  const query = $derived(searchInput.trim().toLowerCase());
+  const filtered = $derived(
+    query
+      ? skills.filter((skill) => {
+          const haystack = `${skill.id} ${skill.name} ${skill.description}`.toLowerCase();
+          return haystack.includes(query);
+        })
+      : skills
+  );
+
+  function clearSearch() {
+    searchInput = "";
+  }
 </script>
 
 <section class="space-y-4">
-  <div class={cn("flex flex-wrap items-center justify-end", GAP_LOOSE)}>
-    <Button
-      variant="default"
-      size="icon"
-      aria-label={i18n.t("btn-add-skill")}
-      title={i18n.t("btn-add-skill")}
-      onclick={onCreate}
-    >
-      <Plus class={ICON} aria-hidden="true" />
-    </Button>
+  <div class={cn("flex flex-wrap items-center", GAP_LOOSE)}>
+    <div class="flex min-w-0 flex-1 justify-center px-1">
+      <SearchInput
+        id="skills-search-input"
+        class="w-full max-w-xl"
+        placeholder={i18n.t("placeholder-search-skills")}
+        bind:value={searchInput}
+        showClear={query.length > 0}
+        onClear={clearSearch}
+      />
+    </div>
+    <div class={cn("flex shrink-0 items-center", GAP)}>
+      <Button
+        variant="default"
+        size="icon"
+        aria-label={i18n.t("btn-add-skill")}
+        title={i18n.t("btn-add-skill")}
+        onclick={onCreate}
+      >
+        <Plus class={ICON} aria-hidden="true" />
+      </Button>
+    </div>
   </div>
 
   <div class={cn(STACK, "min-h-32")}>
@@ -46,9 +74,11 @@
         <Sparkles class="size-8" aria-hidden="true" />
         <p class="text-sm">{i18n.t("skill-empty")}</p>
       </div>
+    {:else if filtered.length === 0}
+      <EmptyState>{i18n.t("skill-empty")}</EmptyState>
     {:else}
       <ul class="space-y-2">
-        {#each skills as skill (skill.id)}
+        {#each filtered as skill (skill.id)}
           <li
             class="rounded-xl border border-border bg-card p-4 transition-colors hover:bg-card/80"
           >
diff --git a/web/src/lib/i18n/translations.ts b/web/src/lib/i18n/translations.ts
index 1708ce40..b9a0bc47 100644
--- a/web/src/lib/i18n/translations.ts
+++ b/web/src/lib/i18n/translations.ts
@@ -57,6 +57,7 @@ export const translations = {
       "Please don't close the browser. This will re-vectorize your memories with technical tags to improve search accuracy.",
     "placeholder-filter": "Filter…",
     "placeholder-search": "Search memories…",
+    "placeholder-search-skills": "Search skills…",
     "placeholder-tags": "react, hooks, auth (comma separated)",
     "placeholder-new-tag": "New tag…",
     "btn-add-tag": "Add tag",
@@ -254,6 +255,7 @@ export const translations = {
       "Bitte den Browser nicht schließen. Deine Memories werden mit technischen Tags neu vektorisiert, um die Suchgenauigkeit zu verbessern.",
     "placeholder-filter": "Filtern…",
     "placeholder-search": "Memories suchen…",
+    "placeholder-search-skills": "Skills suchen…",
     "placeholder-tags": "react, hooks, auth (kommagetrennt)",
     "placeholder-new-tag": "Neuer Tag…",
     "btn-add-tag": "Tag hinzufügen",

From 849e95aeca140839628a53690399f38b636d88d2 Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 10:55:52 +0200
Subject: [PATCH 13/25] fix(web): use scroll-text icon for skills

---
 web/src/lib/components/explorer/AppSidebar.svelte | 2 +-
 web/src/lib/components/explorer/SkillsView.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/explorer/AppSidebar.svelte b/web/src/lib/components/explorer/AppSidebar.svelte
index 78f0903d..28b78d7c 100644
--- a/web/src/lib/components/explorer/AppSidebar.svelte
+++ b/web/src/lib/components/explorer/AppSidebar.svelte
@@ -3,7 +3,7 @@
   import Folder from "@lucide/svelte/icons/folder";
   import Languages from "@lucide/svelte/icons/languages";
   import Moon from "@lucide/svelte/icons/moon";
-  import Sparkles from "@lucide/svelte/icons/sparkles";
+  import ScrollText from "@lucide/svelte/icons/scroll-text";
   import Sun from "@lucide/svelte/icons/sun";
   import User from "@lucide/svelte/icons/user";
   import X from "@lucide/svelte/icons/x";
diff --git a/web/src/lib/components/explorer/SkillsView.svelte b/web/src/lib/components/explorer/SkillsView.svelte
index e9c75bef..aa80a840 100644
--- a/web/src/lib/components/explorer/SkillsView.svelte
+++ b/web/src/lib/components/explorer/SkillsView.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import Pencil from "@lucide/svelte/icons/pencil";
   import Plus from "@lucide/svelte/icons/plus";
-  import Sparkles from "@lucide/svelte/icons/sparkles";
+  import ScrollText from "@lucide/svelte/icons/scroll-text";
   import Trash2 from "@lucide/svelte/icons/trash-2";
   import type { SkillItem } from "$lib/stores/skills.svelte";
   import Badge from "$lib/components/ui/badge.svelte";

From 80a184424c7432a6ace3dda39b0d8e570afd0a5c Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 10:56:16 +0200
Subject: [PATCH 14/25] fix(web): replace Sparkles icon with ScrollText in
 skills components

---
 web/src/lib/components/explorer/AppSidebar.svelte | 2 +-
 web/src/lib/components/explorer/SkillsView.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/explorer/AppSidebar.svelte b/web/src/lib/components/explorer/AppSidebar.svelte
index 28b78d7c..e6e54978 100644
--- a/web/src/lib/components/explorer/AppSidebar.svelte
+++ b/web/src/lib/components/explorer/AppSidebar.svelte
@@ -174,7 +174,7 @@
       aria-label={skillsLabel}
       onclick={(e) => onNavClick(e, ROUTES.skills)}
     >
-      <Sparkles class={cn(ICON, "shrink-0")} aria-hidden="true" />
+      <ScrollText class={cn(ICON, "shrink-0")} aria-hidden="true" />
       {#if !iconOnly}
         <span class="truncate text-start">{skillsLabel}</span>
       {/if}
diff --git a/web/src/lib/components/explorer/SkillsView.svelte b/web/src/lib/components/explorer/SkillsView.svelte
index aa80a840..28812f68 100644
--- a/web/src/lib/components/explorer/SkillsView.svelte
+++ b/web/src/lib/components/explorer/SkillsView.svelte
@@ -71,7 +71,7 @@
       <EmptyState>{i18n.t("loading-init")}</EmptyState>
     {:else if skills.length === 0}
       <div class={cn("flex flex-col items-center py-10 text-muted-foreground", GAP)}>
-        <Sparkles class="size-8" aria-hidden="true" />
+        <ScrollText class="size-8" aria-hidden="true" />
         <p class="text-sm">{i18n.t("skill-empty")}</p>
       </div>
     {:else if filtered.length === 0}

From 469afb8da717109a1a690f909bbceb0af04bcbf9 Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 10:58:11 +0200
Subject: [PATCH 15/25] feat(web): implement search functionality and enhance
 skills display in SkillsView component

---
 web/src/App.svelte                            |  31 +++-
 .../lib/components/explorer/SkillsView.svelte | 164 +++++++-----------
 web/src/lib/stores/skills.svelte.ts           |  29 ++++
 3 files changed, 121 insertions(+), 103 deletions(-)

diff --git a/web/src/App.svelte b/web/src/App.svelte
index e3d71b17..38cb43ec 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -227,7 +227,9 @@
           </div>
         {:else if router.view === "skills"}
           <span class={META_CHIP}>
-            {i18n.t("text-total", { count: skills.skills.length })}
+            {i18n.t("text-total", {
+              count: skills.isSearching ? skills.filteredSkills.length : skills.skills.length,
+            })}
           </span>
         {/if}
       </div>
@@ -352,10 +354,35 @@
           knownTags={explorer.knownTags}
         />
       {:else if router.view === "skills"}
+        <div class={PAGE_TOOLBAR}>
+          <div class={cn("flex w-full min-w-0 items-center", GAP)}>
+            <div class="flex min-w-0 flex-1 justify-center px-1">
+              <SearchInput
+                id="skills-search-input"
+                class="w-full max-w-xl"
+                placeholder={i18n.t("placeholder-search-skills")}
+                bind:value={skills.searchInput}
+                showClear={skills.isSearching}
+                onClear={skills.clearSearch}
+              />
+            </div>
+            <div class={cn("flex shrink-0 items-center", GAP)}>
+              <Button
+                variant="default"
+                size="icon"
+                aria-label={i18n.t("btn-add-skill")}
+                title={i18n.t("btn-add-skill")}
+                onclick={skills.openCreate}
+              >
+                <Plus class={ICON} aria-hidden="true" />
+              </Button>
+            </div>
+          </div>
+        </div>
         <SkillsView
           skills={skills.skills}
+          filtered={skills.filteredSkills}
           loading={skills.loading}
-          onCreate={skills.openCreate}
           onEdit={skills.openEdit}
           onDelete={skills.deleteSkill}
         />
diff --git a/web/src/lib/components/explorer/SkillsView.svelte b/web/src/lib/components/explorer/SkillsView.svelte
index 28812f68..775a37b0 100644
--- a/web/src/lib/components/explorer/SkillsView.svelte
+++ b/web/src/lib/components/explorer/SkillsView.svelte
@@ -1,126 +1,88 @@
 <script lang="ts">
   import Pencil from "@lucide/svelte/icons/pencil";
-  import Plus from "@lucide/svelte/icons/plus";
   import ScrollText from "@lucide/svelte/icons/scroll-text";
   import Trash2 from "@lucide/svelte/icons/trash-2";
   import type { SkillItem } from "$lib/stores/skills.svelte";
   import Badge from "$lib/components/ui/badge.svelte";
   import Button from "$lib/components/ui/button.svelte";
   import EmptyState from "$lib/components/ui/empty-state.svelte";
-  import SearchInput from "$lib/components/ui/search-input.svelte";
   import { useI18n } from "$lib/i18n/context.svelte";
   import { formatDate } from "$lib/format";
-  import { GAP, GAP_LOOSE, ICON, ICON_SM, STACK } from "$lib/ui/styles";
+  import { CARD_TITLE } from "$lib/memory-display";
+  import {
+    CARD_PAD,
+    GAP,
+    GAP_TIGHT,
+    ICON_SM,
+    STACK,
+    STACK_TIGHT,
+    SURFACE_CARD,
+  } from "$lib/ui/styles";
   import { cn } from "$lib/utils";
 
   type Props = {
     skills?: SkillItem[];
+    filtered?: SkillItem[];
     loading?: boolean;
-    onCreate?: () => void;
     onEdit?: (skill: SkillItem) => void;
     onDelete?: (id: string) => void;
   };
 
-  let { skills = [], loading = false, onCreate, onEdit, onDelete }: Props = $props();
+  let { skills = [], filtered = skills, loading = false, onEdit, onDelete }: Props = $props();
 
   const i18n = useI18n();
-  let searchInput = $state("");
-
-  const query = $derived(searchInput.trim().toLowerCase());
-  const filtered = $derived(
-    query
-      ? skills.filter((skill) => {
-          const haystack = `${skill.id} ${skill.name} ${skill.description}`.toLowerCase();
-          return haystack.includes(query);
-        })
-      : skills
-  );
-
-  function clearSearch() {
-    searchInput = "";
-  }
 </script>
 
-<section class="space-y-4">
-  <div class={cn("flex flex-wrap items-center", GAP_LOOSE)}>
-    <div class="flex min-w-0 flex-1 justify-center px-1">
-      <SearchInput
-        id="skills-search-input"
-        class="w-full max-w-xl"
-        placeholder={i18n.t("placeholder-search-skills")}
-        bind:value={searchInput}
-        showClear={query.length > 0}
-        onClear={clearSearch}
-      />
-    </div>
-    <div class={cn("flex shrink-0 items-center", GAP)}>
-      <Button
-        variant="default"
-        size="icon"
-        aria-label={i18n.t("btn-add-skill")}
-        title={i18n.t("btn-add-skill")}
-        onclick={onCreate}
-      >
-        <Plus class={ICON} aria-hidden="true" />
-      </Button>
+<div class={cn(STACK, "min-h-32")}>
+  {#if loading && skills.length === 0}
+    <EmptyState>{i18n.t("loading-init")}</EmptyState>
+  {:else if skills.length === 0}
+    <div class={cn("flex flex-col items-center py-10 text-muted-foreground", GAP)}>
+      <ScrollText class="size-8" aria-hidden="true" />
+      <p class="text-sm">{i18n.t("skill-empty")}</p>
     </div>
-  </div>
-
-  <div class={cn(STACK, "min-h-32")}>
-    {#if loading && skills.length === 0}
-      <EmptyState>{i18n.t("loading-init")}</EmptyState>
-    {:else if skills.length === 0}
-      <div class={cn("flex flex-col items-center py-10 text-muted-foreground", GAP)}>
-        <ScrollText class="size-8" aria-hidden="true" />
-        <p class="text-sm">{i18n.t("skill-empty")}</p>
-      </div>
-    {:else if filtered.length === 0}
-      <EmptyState>{i18n.t("skill-empty")}</EmptyState>
-    {:else}
-      <ul class="space-y-2">
-        {#each filtered as skill (skill.id)}
-          <li
-            class="rounded-xl border border-border bg-card p-4 transition-colors hover:bg-card/80"
-          >
-            <div class={cn("flex flex-wrap items-start justify-between", GAP_LOOSE)}>
-              <div class="min-w-0 space-y-1">
-                <div class={cn("flex flex-wrap items-center", GAP_LOOSE)}>
-                  <h2 class="truncate text-sm font-medium">{skill.name}</h2>
-                  <Badge variant="outline" class="font-mono text-[10px]">{skill.id}</Badge>
-                  {#if !skill.enabled}
-                    <Badge variant="secondary">{i18n.t("skill-disabled")}</Badge>
-                  {/if}
-                  {#if skill.autoinvoke}
-                    <Badge variant="outline" class="text-[10px]">auto</Badge>
-                  {/if}
-                </div>
-                {#if skill.description}
-                  <p class="text-sm text-muted-foreground">{skill.description}</p>
-                {/if}
-                <p class="text-xs text-muted-foreground">{formatDate(skill.updatedAt)}</p>
-              </div>
-              <div class="flex shrink-0 gap-1">
-                <Button
-                  variant="ghost"
-                  size="icon-sm"
-                  aria-label={i18n.t("skill-edit")}
-                  onclick={() => onEdit?.(skill)}
-                >
-                  <Pencil class={ICON_SM} aria-hidden="true" />
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="icon-sm"
-                  aria-label={i18n.t("confirm-delete-title")}
-                  onclick={() => onDelete?.(skill.id)}
-                >
-                  <Trash2 class={ICON_SM} aria-hidden="true" />
-                </Button>
-              </div>
+  {:else if filtered.length === 0}
+    <EmptyState>{i18n.t("skill-empty")}</EmptyState>
+  {:else}
+    <div class={STACK_TIGHT}>
+      {#each filtered as skill (skill.id)}
+        <div class={cn(SURFACE_CARD, CARD_PAD, STACK_TIGHT)}>
+          <div class={cn("flex items-center", GAP)}>
+            <div class={cn("flex min-w-0 flex-1 items-center", GAP_TIGHT)}>
+              <h3 class={cn(CARD_TITLE, "min-w-0 truncate")}>{skill.name}</h3>
+              <Badge variant="outline" class="shrink-0 font-mono text-[10px]">{skill.id}</Badge>
+              {#if !skill.enabled}
+                <Badge variant="secondary" class="shrink-0">{i18n.t("skill-disabled")}</Badge>
+              {/if}
+              {#if skill.autoinvoke}
+                <Badge variant="outline" class="shrink-0 text-[10px]">auto</Badge>
+              {/if}
+            </div>
+            <div class={cn("flex shrink-0 items-center", GAP_TIGHT)}>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                aria-label={i18n.t("skill-edit")}
+                onclick={() => onEdit?.(skill)}
+              >
+                <Pencil class={ICON_SM} aria-hidden="true" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                aria-label={i18n.t("confirm-delete-title")}
+                onclick={() => onDelete?.(skill.id)}
+              >
+                <Trash2 class={ICON_SM} aria-hidden="true" />
+              </Button>
             </div>
-          </li>
-        {/each}
-      </ul>
-    {/if}
-  </div>
-</section>
+          </div>
+          {#if skill.description}
+            <p class="text-sm text-muted-foreground">{skill.description}</p>
+          {/if}
+          <p class="text-xs text-muted-foreground">{formatDate(skill.updatedAt)}</p>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
diff --git a/web/src/lib/stores/skills.svelte.ts b/web/src/lib/stores/skills.svelte.ts
index 37996903..67b8a999 100644
--- a/web/src/lib/stores/skills.svelte.ts
+++ b/web/src/lib/stores/skills.svelte.ts
@@ -41,6 +41,18 @@ export function createSkillsStore() {
   let dialogOpen = $state(false);
   let editingId = $state<string | null>(null);
   let draft = $state<SkillDraft>(emptyDraft());
+  let searchInput = $state("");
+
+  const filteredSkills = $derived.by(() => {
+    const query = searchInput.trim().toLowerCase();
+    if (!query) return skills;
+    return skills.filter((skill) => {
+      const haystack = `${skill.id} ${skill.name} ${skill.description}`.toLowerCase();
+      return haystack.includes(query);
+    });
+  });
+
+  const isSearching = $derived(searchInput.trim().length > 0);
 
   async function loadSkills() {
     loading = true;
@@ -133,10 +145,17 @@ export function createSkillsStore() {
     });
   }
 
+  function clearSearch() {
+    searchInput = "";
+  }
+
   return {
     get skills() {
       return skills;
     },
+    get filteredSkills() {
+      return filteredSkills;
+    },
     get loading() {
       return loading;
     },
@@ -155,11 +174,21 @@ export function createSkillsStore() {
     set draft(v: SkillDraft) {
       draft = v;
     },
+    get searchInput() {
+      return searchInput;
+    },
+    set searchInput(v: string) {
+      searchInput = v;
+    },
+    get isSearching() {
+      return isSearching;
+    },
     loadSkills,
     openCreate,
     openEdit,
     saveSkill,
     deleteSkill,
+    clearSearch,
   };
 }
 

From f8cf08545e1b9dd577f1adedd28b712fc72f45c5 Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 11:00:22 +0200
Subject: [PATCH 16/25] refactor(web): streamline SkillDialog and SkillsView
 components, removing skill ID and enhancing placeholders

---
 .../components/explorer/SkillDialog.svelte    | 41 ++++++++---------
 .../lib/components/explorer/SkillsView.svelte |  1 -
 web/src/lib/i18n/translations.ts              | 11 +----
 web/src/lib/skill-id.ts                       | 31 +++++++++++++
 web/src/lib/stores/skills.svelte.ts           | 44 ++++++++++---------
 5 files changed, 77 insertions(+), 51 deletions(-)
 create mode 100644 web/src/lib/skill-id.ts

diff --git a/web/src/lib/components/explorer/SkillDialog.svelte b/web/src/lib/components/explorer/SkillDialog.svelte
index c3e76ec2..7bdd3d1a 100644
--- a/web/src/lib/components/explorer/SkillDialog.svelte
+++ b/web/src/lib/components/explorer/SkillDialog.svelte
@@ -7,7 +7,7 @@
   import Checkbox from "$lib/components/ui/checkbox.svelte";
   import Textarea from "$lib/components/ui/textarea.svelte";
   import { useI18n } from "$lib/i18n/context.svelte";
-  import { GAP_LOOSE, STACK_FORM } from "$lib/ui/styles";
+  import { STACK_FORM } from "$lib/ui/styles";
 
   type Props = {
     open?: boolean;
@@ -51,30 +51,25 @@
       submit();
     }}
   >
-    <div class="grid sm:grid-cols-2 {GAP_LOOSE}">
-      <FormField id="skill-id" label={i18n.t("label-skill-id")} value={draft.id}>
-        <Input
-          id="skill-id"
-          bind:value={draft.id}
-          disabled={editing}
-          required={!editing}
-          pattern="[a-z0-9]+(-[a-z0-9]+)*"
-          maxlength={64}
-        />
-      </FormField>
-      <FormField id="skill-name" label={i18n.t("label-skill-name")} value={draft.name}>
-        <Input id="skill-name" bind:value={draft.name} required />
-      </FormField>
-    </div>
-
-    <p class="text-xs text-muted-foreground">{i18n.t("hint-skill-id")}</p>
+    <FormField id="skill-name" label={i18n.t("label-skill-name")} value={draft.name}>
+      <Input
+        id="skill-name"
+        bind:value={draft.name}
+        required
+        placeholder={i18n.t("placeholder-skill-name")}
+      />
+    </FormField>
 
     <FormField
       id="skill-description"
       label={i18n.t("label-skill-description")}
       value={draft.description}
     >
-      <Input id="skill-description" bind:value={draft.description} />
+      <Input
+        id="skill-description"
+        bind:value={draft.description}
+        placeholder={i18n.t("placeholder-skill-description")}
+      />
     </FormField>
 
     <div class="flex flex-wrap gap-4">
@@ -89,7 +84,13 @@
     </div>
 
     <FormField id="skill-content" label={i18n.t("label-skill-content")} value={draft.content}>
-      <Textarea id="skill-content" rows={10} required bind:value={draft.content} />
+      <Textarea
+        id="skill-content"
+        rows={10}
+        required
+        bind:value={draft.content}
+        placeholder={i18n.t("placeholder-skill-content")}
+      />
     </FormField>
   </form>
 
diff --git a/web/src/lib/components/explorer/SkillsView.svelte b/web/src/lib/components/explorer/SkillsView.svelte
index 775a37b0..85f49073 100644
--- a/web/src/lib/components/explorer/SkillsView.svelte
+++ b/web/src/lib/components/explorer/SkillsView.svelte
@@ -50,7 +50,6 @@
           <div class={cn("flex items-center", GAP)}>
             <div class={cn("flex min-w-0 flex-1 items-center", GAP_TIGHT)}>
               <h3 class={cn(CARD_TITLE, "min-w-0 truncate")}>{skill.name}</h3>
-              <Badge variant="outline" class="shrink-0 font-mono text-[10px]">{skill.id}</Badge>
               {#if !skill.enabled}
                 <Badge variant="secondary" class="shrink-0">{i18n.t("skill-disabled")}</Badge>
               {/if}
diff --git a/web/src/lib/i18n/translations.ts b/web/src/lib/i18n/translations.ts
index b9a0bc47..7bb86e53 100644
--- a/web/src/lib/i18n/translations.ts
+++ b/web/src/lib/i18n/translations.ts
@@ -175,13 +175,11 @@ export const translations = {
     "btn-new-skill": "New Skill",
     "modal-skill-create-title": "Create Skill",
     "modal-skill-edit-title": "Edit Skill",
-    "label-skill-id": "ID",
     "label-skill-name": "Name",
     "label-skill-description": "Description",
     "label-skill-content": "Instructions (Markdown)",
     "label-skill-autoinvoke": "Auto-invoke",
     "label-skill-enabled": "Enabled",
-    "placeholder-skill-id": "git-release",
     "placeholder-skill-name": "Git Release",
     "placeholder-skill-description": "When to use this skill…",
     "placeholder-skill-content": "## What I do\n\n- …",
@@ -189,13 +187,12 @@ export const translations = {
     "skill-preview": "Preview",
     "skill-empty": "No skills found",
     "skill-disabled": "Disabled",
-    "confirm-delete-skill": "Delete skill “{id}”?",
+    "confirm-delete-skill": "Delete skill “{name}”?",
     "toast-skill-save-success": "Skill saved",
     "toast-skill-save-failed": "Failed to save skill",
     "toast-skill-delete-success": "Skill deleted",
     "toast-skill-delete-failed": "Failed to delete skill",
     "toast-skill-load-failed": "Failed to load skills",
-    "hint-skill-id": "Lowercase kebab-case (a-z, 0-9, hyphens). Becomes the OpenCode skill id.",
   },
   de: {
     title: "OpenCode Memory Explorer",
@@ -377,13 +374,11 @@ export const translations = {
     "btn-new-skill": "Neuer Skill",
     "modal-skill-create-title": "Skill erstellen",
     "modal-skill-edit-title": "Skill bearbeiten",
-    "label-skill-id": "ID",
     "label-skill-name": "Name",
     "label-skill-description": "Beschreibung",
     "label-skill-content": "Anweisungen (Markdown)",
     "label-skill-autoinvoke": "Auto-Invoke",
     "label-skill-enabled": "Aktiv",
-    "placeholder-skill-id": "git-release",
     "placeholder-skill-name": "Git Release",
     "placeholder-skill-description": "Wann dieser Skill genutzt werden soll…",
     "placeholder-skill-content": "## Was ich tue\n\n- …",
@@ -391,14 +386,12 @@ export const translations = {
     "skill-preview": "Vorschau",
     "skill-empty": "Keine Skills gefunden",
     "skill-disabled": "Deaktiviert",
-    "confirm-delete-skill": "Skill „{id}“ löschen?",
+    "confirm-delete-skill": "Skill „{name}“ löschen?",
     "toast-skill-save-success": "Skill gespeichert",
     "toast-skill-save-failed": "Skill konnte nicht gespeichert werden",
     "toast-skill-delete-success": "Skill gelöscht",
     "toast-skill-delete-failed": "Skill konnte nicht gelöscht werden",
     "toast-skill-load-failed": "Skills konnten nicht geladen werden",
-    "hint-skill-id":
-      "Kleinbuchstaben kebab-case (a-z, 0-9, Bindestriche). Wird zur OpenCode Skill-ID.",
   },
   zh: {
     title: "OpenCode Memory Explorer",
diff --git a/web/src/lib/skill-id.ts b/web/src/lib/skill-id.ts
new file mode 100644
index 00000000..74ec0126
--- /dev/null
+++ b/web/src/lib/skill-id.ts
@@ -0,0 +1,31 @@
+/** OpenCode-compatible skill id: lowercase kebab-case, 1–64 chars. */
+export const SKILL_ID_PATTERN = /^[a-z0-9]+(-[a-z0-9]+)*$/;
+
+/** Derive a skill id from a display name (empty string if nothing usable). */
+export function slugifySkillId(value: string): string {
+  const slug = value
+    .normalize("NFKD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 64)
+    .replace(/-+$/g, "");
+  return SKILL_ID_PATTERN.test(slug) ? slug : "";
+}
+
+/** Pick an unused id from a name; falls back to `skill` / `skill-2` etc. */
+export function allocateSkillId(name: string, taken: Iterable<string>): string {
+  const used = new Set(taken);
+  const base = slugifySkillId(name) || "skill";
+  if (!used.has(base)) return base;
+
+  for (let n = 2; n < 10_000; n++) {
+    const suffix = `-${n}`;
+    const maxBase = Math.max(1, 64 - suffix.length);
+    const candidate = `${base.slice(0, maxBase).replace(/-+$/g, "")}${suffix}`;
+    if (SKILL_ID_PATTERN.test(candidate) && !used.has(candidate)) return candidate;
+  }
+
+  return `skill-${Date.now().toString(36)}`.slice(0, 64);
+}
diff --git a/web/src/lib/stores/skills.svelte.ts b/web/src/lib/stores/skills.svelte.ts
index 67b8a999..ff737c76 100644
--- a/web/src/lib/stores/skills.svelte.ts
+++ b/web/src/lib/stores/skills.svelte.ts
@@ -2,6 +2,7 @@ import { toast } from "$lib/toast/toast.svelte";
 import { fetchAPI, toastApiResult } from "$lib/api";
 import { t } from "$lib/i18n";
 import { askConfirm } from "$lib/confirm.svelte";
+import { allocateSkillId } from "$lib/skill-id";
 
 export type SkillItem = {
   id: string;
@@ -16,7 +17,6 @@ export type SkillItem = {
 };
 
 export type SkillDraft = {
-  id: string;
   name: string;
   description: string;
   content: string;
@@ -26,7 +26,6 @@ export type SkillDraft = {
 
 function emptyDraft(): SkillDraft {
   return {
-    id: "",
     name: "",
     description: "",
     content: "",
@@ -74,7 +73,6 @@ export function createSkillsStore() {
   function openEdit(skill: SkillItem) {
     editingId = skill.id;
     draft = {
-      id: skill.id,
       name: skill.name,
       description: skill.description,
       content: skill.content,
@@ -85,35 +83,38 @@ export function createSkillsStore() {
   }
 
   async function saveSkill() {
-    const payload = {
-      id: draft.id.trim(),
-      name: draft.name.trim(),
-      description: draft.description.trim(),
-      content: draft.content,
-      autoinvoke: draft.autoinvoke,
-      enabled: draft.enabled,
-    };
-    if (!payload.name || !payload.content.trim() || (!editingId && !payload.id)) {
+    const name = draft.name.trim();
+    const description = draft.description.trim();
+    const content = draft.content;
+    if (!name || !content.trim()) {
       toast.error(t("toast-skill-save-failed"));
       return;
     }
 
+    const body = {
+      name,
+      description,
+      content,
+      autoinvoke: draft.autoinvoke,
+      enabled: draft.enabled,
+    };
+
     const result = editingId
       ? await fetchAPI<SkillItem>(`/api/skills/${encodeURIComponent(editingId)}`, {
           method: "PUT",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            name: payload.name,
-            description: payload.description,
-            content: payload.content,
-            autoinvoke: payload.autoinvoke,
-            enabled: payload.enabled,
-          }),
+          body: JSON.stringify(body),
         })
       : await fetchAPI<SkillItem>("/api/skills", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(payload),
+          body: JSON.stringify({
+            ...body,
+            id: allocateSkillId(
+              name,
+              skills.map((s) => s.id)
+            ),
+          }),
         });
 
     await toastApiResult(result, {
@@ -127,9 +128,10 @@ export function createSkillsStore() {
   }
 
   async function deleteSkill(id: string) {
+    const skill = skills.find((s) => s.id === id);
     const ok = await askConfirm({
       title: t("confirm-delete-title"),
-      detail: t("confirm-delete-skill", { id }),
+      detail: t("confirm-delete-skill", { name: skill?.name ?? id }),
       confirmLabel: t("btn-delete-selected"),
       cancelLabel: t("btn-cancel"),
       tone: "danger",

From 1e9f7c10583246258cc5961fa00bc2ca10d27cbf Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 11:02:13 +0200
Subject: [PATCH 17/25] refactor(web): replace Input with Textarea for skill
 description in SkillDialog

---
 web/src/lib/components/explorer/SkillDialog.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/src/lib/components/explorer/SkillDialog.svelte b/web/src/lib/components/explorer/SkillDialog.svelte
index 7bdd3d1a..737df873 100644
--- a/web/src/lib/components/explorer/SkillDialog.svelte
+++ b/web/src/lib/components/explorer/SkillDialog.svelte
@@ -65,8 +65,9 @@
       label={i18n.t("label-skill-description")}
       value={draft.description}
     >
-      <Input
+      <Textarea
         id="skill-description"
+        rows={4}
         bind:value={draft.description}
         placeholder={i18n.t("placeholder-skill-description")}
       />

From 25b1dbafd779a8898d76eab8c4d5be2437a5ddb1 Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 11:07:11 +0200
Subject: [PATCH 18/25] refactor(web): update layout and styling in various
 components for improved responsiveness and consistency

---
 web/.vscode/extensions.json                   |  7 +++++-
 web/src/App.svelte                            |  6 ++---
 .../lib/components/explorer/AppSidebar.svelte |  2 +-
 .../lib/components/explorer/MemoryCard.svelte |  6 +++--
 .../lib/components/explorer/TagFilter.svelte  |  8 +++----
 web/src/lib/components/ui/badge.svelte        |  2 +-
 .../lib/components/ui/bordered-panel.svelte   |  4 +++-
 web/src/lib/components/ui/checkbox.svelte     |  2 +-
 web/src/lib/components/ui/form-field.svelte   |  6 ++---
 web/src/lib/components/ui/search-input.svelte |  6 +----
 web/src/lib/components/ui/tags-field.svelte   |  4 ++--
 web/src/lib/components/ui/textarea.svelte     | 23 +++++++++++++------
 web/src/lib/components/ui/toast-card.svelte   |  2 +-
 web/src/lib/components/ui/toast-stack.svelte  |  2 +-
 14 files changed, 47 insertions(+), 33 deletions(-)

diff --git a/web/.vscode/extensions.json b/web/.vscode/extensions.json
index 99e242bb..6442ed8d 100644
--- a/web/.vscode/extensions.json
+++ b/web/.vscode/extensions.json
@@ -1,3 +1,8 @@
 {
-  "recommendations": ["bradlc.vscode-tailwindcss"]
+  "recommendations": [
+    "svelte.svelte-vscode",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "bradlc.vscode-tailwindcss"
+  ]
 }
diff --git a/web/src/App.svelte b/web/src/App.svelte
index 38cb43ec..65d02770 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -167,9 +167,9 @@
   <div class="flex min-w-0 flex-1 flex-col">
     <header
       class={cn(
-        "fixed top-0 end-0 z-30 flex h-14 items-center border-b transition-[background-color,border-color,backdrop-filter,inset-inline-start] duration-200",
-        "start-0",
-        sidebarCollapsed ? "md:start-16" : "md:start-64",
+        "fixed top-0 inset-e-0 z-30 flex h-14 items-center border-b transition-[background-color,border-color,backdrop-filter,inset-inline-start] duration-200",
+        "inset-s-0",
+        sidebarCollapsed ? "md:inset-s-16" : "md:inset-s-64",
         headerScrolled
           ? "border-border/40 bg-background/55 backdrop-blur-xl"
           : "border-border bg-background/95 backdrop-blur-md"
diff --git a/web/src/lib/components/explorer/AppSidebar.svelte b/web/src/lib/components/explorer/AppSidebar.svelte
index e6e54978..d1c0ff29 100644
--- a/web/src/lib/components/explorer/AppSidebar.svelte
+++ b/web/src/lib/components/explorer/AppSidebar.svelte
@@ -96,7 +96,7 @@
 
 <aside
   class={cn(
-    "inset-y-0 start-0 z-50 flex h-svh shrink-0 flex-col overflow-hidden border-e border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width,transform] duration-200 motion-reduce:transition-none",
+    "inset-y-0 inset-s-0 z-50 flex h-svh shrink-0 flex-col overflow-hidden border-e border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width,transform] duration-200 motion-reduce:transition-none",
     "fixed top-0 translate-x-0!",
     collapsed ? "md:w-16" : "md:w-64",
     "w-64",
diff --git a/web/src/lib/components/explorer/MemoryCard.svelte b/web/src/lib/components/explorer/MemoryCard.svelte
index 6844ae73..36dd675e 100644
--- a/web/src/lib/components/explorer/MemoryCard.svelte
+++ b/web/src/lib/components/explorer/MemoryCard.svelte
@@ -182,7 +182,9 @@
         <span>·</span>
         <span>{formatDate(prompt.createdAt)}</span>
       </div>
-      <p class="text-sm whitespace-pre-wrap break-words text-muted-foreground">{prompt.content}</p>
+      <p class="text-sm whitespace-pre-wrap wrap-break-word text-muted-foreground">
+        {prompt.content}
+      </p>
     </div>
 
     {@render dateMeta(pairDates, memory.id)}
@@ -201,7 +203,7 @@
       <MessageCircle class={ICON_SM} />
       <span>{formatDate(item.createdAt)}</span>
     </div>
-    <p class="text-sm whitespace-pre-wrap break-words">{item.content}</p>
+    <p class="text-sm whitespace-pre-wrap wrap-break-word">{item.content}</p>
     {#if promptIsLinked}
       {@render linkedHint("down", i18n.t("text-generated-above"))}
     {/if}
diff --git a/web/src/lib/components/explorer/TagFilter.svelte b/web/src/lib/components/explorer/TagFilter.svelte
index 73a7d09f..e2b0a26b 100644
--- a/web/src/lib/components/explorer/TagFilter.svelte
+++ b/web/src/lib/components/explorer/TagFilter.svelte
@@ -107,7 +107,7 @@
 
   {#if open}
     <div
-      class="absolute start-0 top-[calc(100%+0.35rem)] z-50 w-64 origin-top-left overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-lg outline-none"
+      class="absolute inset-s-0 top-[calc(100%+0.35rem)] z-50 w-64 origin-top-left overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-lg outline-none"
       role="menu"
       tabindex="-1"
       aria-label={filterLabel}
@@ -121,7 +121,7 @@
           aria-label={searchPlaceholder}
         />
         <div class="bg-border -mx-2 my-1 h-px" aria-hidden="true"></div>
-        <div class="relative h-64 overflow-y-auto [scrollbar-width:thin]">
+        <div class="relative h-64 overflow-y-auto scrollbar-thin">
           <button
             type="button"
             role="menuitemcheckbox"
@@ -134,7 +134,7 @@
           >
             <span
               class={cn(
-                "inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs",
+                "inline-flex size-4 shrink-0 items-center justify-center rounded-lg border shadow-xs",
                 !active
                   ? "border-primary bg-primary text-primary-foreground"
                   : "border-input bg-transparent"
@@ -162,7 +162,7 @@
             >
               <span
                 class={cn(
-                  "inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs",
+                  "inline-flex size-4 shrink-0 items-center justify-center rounded-lg border shadow-xs",
                   on
                     ? "border-primary bg-primary text-primary-foreground"
                     : "border-input bg-transparent"
diff --git a/web/src/lib/components/ui/badge.svelte b/web/src/lib/components/ui/badge.svelte
index 0b2ac1ce..837845bb 100644
--- a/web/src/lib/components/ui/badge.svelte
+++ b/web/src/lib/components/ui/badge.svelte
@@ -2,7 +2,7 @@
   import { tv, type VariantProps } from "tailwind-variants";
 
   export const badgeVariants = tv({
-    base: "h-5 gap-1 rounded-lg border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none",
+    base: "h-5 gap-1 rounded-lg border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:ring-[3px] [&>svg]:pointer-events-none",
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
diff --git a/web/src/lib/components/ui/bordered-panel.svelte b/web/src/lib/components/ui/bordered-panel.svelte
index db9836cd..487212eb 100644
--- a/web/src/lib/components/ui/bordered-panel.svelte
+++ b/web/src/lib/components/ui/bordered-panel.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import ChevronDown from "@lucide/svelte/icons/chevron-down";
   import type { Snippet } from "svelte";
+  import { untrack } from "svelte";
   import { GAP, ICON_SM, PANEL } from "$lib/ui/styles";
   import { cn } from "$lib/utils";
 
@@ -26,7 +27,8 @@
     children,
   }: Props = $props();
 
-  let open = $state(defaultOpen);
+  // Initial open only — toggles stay local and must not re-sync from the prop.
+  let open = $state(untrack(() => defaultOpen));
 
   function toggle() {
     if (!collapsible) return;
diff --git a/web/src/lib/components/ui/checkbox.svelte b/web/src/lib/components/ui/checkbox.svelte
index 2d5074af..169c01fd 100644
--- a/web/src/lib/components/ui/checkbox.svelte
+++ b/web/src/lib/components/ui/checkbox.svelte
@@ -20,7 +20,7 @@
   bind:checked
   bind:indeterminate
   class={cn(
-    "border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground dark:data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer relative flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50",
+    "border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground dark:data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer relative flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-lg border shadow-xs transition-shadow outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50",
     className
   )}
   {...rest}
diff --git a/web/src/lib/components/ui/form-field.svelte b/web/src/lib/components/ui/form-field.svelte
index 277d0a84..173a8199 100644
--- a/web/src/lib/components/ui/form-field.svelte
+++ b/web/src/lib/components/ui/form-field.svelte
@@ -64,13 +64,13 @@
     <label
       for={id}
       class={cn(
-        "pointer-events-none absolute start-2.5 z-10 max-w-[calc(100%-1.25rem)] truncate rounded-none leading-none transition-[top,transform,font-size,color,background-color,padding] duration-150",
+        "pointer-events-none absolute inset-s-2.5 z-10 max-w-[calc(100%-1.25rem)] truncate rounded-none leading-none transition-[top,transform,font-size,color,background-color,padding] duration-150",
         controlled
           ? floated
-            ? "top-0 -translate-y-1/2 bg-[var(--floating-label-bg,var(--card))] px-1 text-xs font-medium text-foreground-bright"
+            ? "top-0 -translate-y-1/2 bg-(--floating-label-bg,var(--card)) px-1 text-xs font-medium text-foreground-bright"
             : "top-1/2 -translate-y-1/2 bg-transparent px-0 text-sm font-normal text-muted-foreground"
           : [
-              "top-0 -translate-y-1/2 bg-[var(--floating-label-bg,var(--card))] px-1 text-xs font-medium text-foreground-bright",
+              "top-0 -translate-y-1/2 bg-(--floating-label-bg,var(--card)) px-1 text-xs font-medium text-foreground-bright",
               "group-has-[input:placeholder-shown:not(:focus)]/field:top-1/2",
               "group-has-[input:placeholder-shown:not(:focus)]/field:bg-transparent",
               "group-has-[input:placeholder-shown:not(:focus)]/field:px-0",
diff --git a/web/src/lib/components/ui/search-input.svelte b/web/src/lib/components/ui/search-input.svelte
index 34d12cd7..28c972b5 100644
--- a/web/src/lib/components/ui/search-input.svelte
+++ b/web/src/lib/components/ui/search-input.svelte
@@ -40,11 +40,7 @@
 <div class={cn("relative min-w-0 w-full", className)}>
   <input
     {id}
-    class={cn(
-      FIELD_INPUT,
-      "placeholder:text-muted-foreground",
-      showClear ? "pr-[4.5rem]" : "pr-11"
-    )}
+    class={cn(FIELD_INPUT, "placeholder:text-muted-foreground", showClear ? "pr-18" : "pr-11")}
     bind:value
     {placeholder}
     aria-label={placeholder}
diff --git a/web/src/lib/components/ui/tags-field.svelte b/web/src/lib/components/ui/tags-field.svelte
index 298063ad..f565f033 100644
--- a/web/src/lib/components/ui/tags-field.svelte
+++ b/web/src/lib/components/ui/tags-field.svelte
@@ -106,7 +106,7 @@
       {#if !disabled}
         <button
           type="button"
-          class="relative inline-flex size-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground focus-ring before:absolute before:inset-[-6px] before:content-['']"
+          class="relative inline-flex size-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground focus-ring before:absolute before:-inset-1.5 before:content-['']"
           aria-label={`Remove ${tag}`}
           onclick={() => removeTag(tag)}
         >
@@ -129,7 +129,7 @@
       />
       {#if available.length > 0}
         <div
-          class="absolute start-0 top-[calc(100%+0.25rem)] z-50 max-h-40 min-w-36 overflow-y-auto rounded-lg border border-border bg-popover py-1 text-popover-foreground shadow-lg [scrollbar-width:thin]"
+          class="absolute inset-s-0 top-[calc(100%+0.25rem)] z-50 max-h-40 min-w-36 overflow-y-auto rounded-lg border border-border bg-popover py-1 text-popover-foreground shadow-lg scrollbar-thin"
           role="listbox"
           aria-label={addLabel}
         >
diff --git a/web/src/lib/components/ui/textarea.svelte b/web/src/lib/components/ui/textarea.svelte
index 89062747..b7808c8c 100644
--- a/web/src/lib/components/ui/textarea.svelte
+++ b/web/src/lib/components/ui/textarea.svelte
@@ -7,14 +7,23 @@
   let { class: className, value = $bindable(), placeholder = " ", ...rest }: Props = $props();
 </script>
 
-<textarea
+<!--
+  Border + radius live on a clipping wrapper so native resize/scrollbars
+  cannot square off corners (Chrome/WebKit).
+-->
+<div
   data-slot="textarea"
   class={cn(
-    "border-input placeholder:text-transparent flex field-sizing-content min-h-20 w-full rounded-xl border bg-card px-2.5 py-2.5 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50",
-    "focus-visible:border-primary focus-visible:ring-0",
-    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "border-input flex w-full overflow-hidden rounded-xl border bg-card shadow-xs transition-[color,box-shadow]",
+    "focus-within:border-primary",
+    "has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40",
+    "has-disabled:opacity-50",
     className
   )}
-  {placeholder}
-  bind:value
-  {...rest}></textarea>
+>
+  <textarea
+    class="field-sizing-content min-h-20 w-full resize-y border-0 bg-transparent px-2.5 py-2.5 text-sm outline-none placeholder:text-transparent disabled:cursor-not-allowed"
+    {placeholder}
+    bind:value
+    {...rest}></textarea>
+</div>
diff --git a/web/src/lib/components/ui/toast-card.svelte b/web/src/lib/components/ui/toast-card.svelte
index 92d34b38..5f053160 100644
--- a/web/src/lib/components/ui/toast-card.svelte
+++ b/web/src/lib/components/ui/toast-card.svelte
@@ -37,7 +37,7 @@
 <div
   role={assertive ? "alert" : "status"}
   aria-live={assertive ? "assertive" : "polite"}
-  class="overflow-hidden rounded-xl border border-border bg-card shadow-[0_12px_40px_rgb(0_0_0_/_0.45)]"
+  class="overflow-hidden rounded-xl border border-border bg-card shadow-[0_12px_40px_rgb(0_0_0/0.45)]"
 >
   <div
     class={cn(
diff --git a/web/src/lib/components/ui/toast-stack.svelte b/web/src/lib/components/ui/toast-stack.svelte
index fb770cc9..0e361c75 100644
--- a/web/src/lib/components/ui/toast-stack.svelte
+++ b/web/src/lib/components/ui/toast-stack.svelte
@@ -45,7 +45,7 @@
     role="region"
     aria-label="Notifications"
     aria-relevant="additions"
-    class="pointer-events-none fixed right-4 bottom-[max(1rem,env(safe-area-inset-bottom))] left-4 z-50 sm:left-auto sm:w-[22rem]"
+    class="pointer-events-none fixed right-4 bottom-[max(1rem,env(safe-area-inset-bottom))] left-4 z-50 sm:left-auto sm:w-88"
   >
     <div
       role="group"

From 06297610b99d3d0fa43d7429638800c3a1e236bb Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 11:08:39 +0200
Subject: [PATCH 19/25] refactor(web): remove duplicate skill content field in
 SkillDialog for cleaner code

---
 .../components/explorer/SkillDialog.svelte    | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/web/src/lib/components/explorer/SkillDialog.svelte b/web/src/lib/components/explorer/SkillDialog.svelte
index 737df873..6d92a222 100644
--- a/web/src/lib/components/explorer/SkillDialog.svelte
+++ b/web/src/lib/components/explorer/SkillDialog.svelte
@@ -73,6 +73,16 @@
       />
     </FormField>
 
+    <FormField id="skill-content" label={i18n.t("label-skill-content")} value={draft.content}>
+      <Textarea
+        id="skill-content"
+        rows={10}
+        required
+        bind:value={draft.content}
+        placeholder={i18n.t("placeholder-skill-content")}
+      />
+    </FormField>
+
     <div class="flex flex-wrap gap-4">
       <label class="flex items-center gap-2 text-sm">
         <Checkbox bind:checked={draft.enabled} />
@@ -83,16 +93,6 @@
         {i18n.t("label-skill-autoinvoke")}
       </label>
     </div>
-
-    <FormField id="skill-content" label={i18n.t("label-skill-content")} value={draft.content}>
-      <Textarea
-        id="skill-content"
-        rows={10}
-        required
-        bind:value={draft.content}
-        placeholder={i18n.t("placeholder-skill-content")}
-      />
-    </FormField>
   </form>
 
   {#snippet footer()}

From 6efa1bffa4f8ffa6f8b380bc5bc55e630a2628a2 Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 11:11:45 +0200
Subject: [PATCH 20/25] feat(web): add CRUD functionality for skills in memory
 simulation, including API endpoints for retrieval, creation, updating, and
 deletion

---
 web/README.md                                 |   5 +-
 web/sim/skills.json                           |  37 +++++
 .../lib/components/explorer/SkillsView.svelte |  26 ++--
 web/vite-plugins/opencode-mem-sim.ts          | 137 ++++++++++++++++++
 4 files changed, 192 insertions(+), 13 deletions(-)
 create mode 100644 web/sim/skills.json

diff --git a/web/README.md b/web/README.md
index 307c879a..17f9dfc1 100644
--- a/web/README.md
+++ b/web/README.md
@@ -17,9 +17,10 @@ via a Vite middleware (see [`vite-plugins/opencode-mem-sim.ts`](./vite-plugins/o
 Normal `bun run dev` still proxies to `:4747`.
 
 Covered: health, tags, stats, memories (paginated + tag filter), search, user
-profile, changelog, migration detect (no-op), AI cleanup preview. Mutating
+profile, changelog, migration detect (no-op), AI cleanup preview, skills (CRUD
+in-memory from [`sim/skills.json`](./sim/skills.json)). Other mutating
 `POST`/`PUT`/`DELETE` calls return stub success so toast paths stay testable —
-nothing is persisted.
+nothing is written back to disk.
 
 GitHub Markdown cannot paint CSS, but it **can** show colors via small SVG
 swatches (see [`docs/swatches/`](./docs/swatches/)).
diff --git a/web/sim/skills.json b/web/sim/skills.json
new file mode 100644
index 00000000..c0e93534
--- /dev/null
+++ b/web/sim/skills.json
@@ -0,0 +1,37 @@
+{
+  "items": [
+    {
+      "id": "code-review",
+      "name": "Code Review",
+      "description": "Use when reviewing a pull request or diff: focus on correctness, edge cases, and clear feedback.",
+      "content": "## Goal\n\nReview the current change with a senior-engineer lens.\n\n## Checklist\n\n- Correctness and regressions\n- Edge cases and error paths\n- Naming / readability only when it blocks understanding\n- Tests covering the risky paths\n\n## Output\n\n- Short summary\n- Ordered findings (severity → medium → nit)\n- Concrete fix suggestions",
+      "autoinvoke": true,
+      "enabled": true,
+      "containerTag": null,
+      "createdAt": "2026-09-15T10:00:00.000Z",
+      "updatedAt": "2026-10-01T12:30:00.000Z"
+    },
+    {
+      "id": "git-release",
+      "name": "Git Release",
+      "description": "Use when cutting a release: version bump, changelog, tag, and publish checklist.",
+      "content": "## Goal\n\nShip a clean release without skipping checks.\n\n## Steps\n\n1. Confirm `main` is green and up to date\n2. Bump version (Conventional Commits / package)\n3. Update changelog with user-facing notes\n4. Tag and push\n5. Verify CI / publish artifacts\n\n## Don't\n\n- Force-push release tags\n- Skip failing checks \"just this once\"",
+      "autoinvoke": false,
+      "enabled": true,
+      "containerTag": null,
+      "createdAt": "2026-09-20T09:00:00.000Z",
+      "updatedAt": "2026-09-28T16:00:00.000Z"
+    },
+    {
+      "id": "draft-pr",
+      "name": "Draft PR",
+      "description": "Use when opening a pull request: write a clear Conventional Commit title and test plan.",
+      "content": "## Goal\n\nOpen a reviewable PR with a strong title and test plan.\n\n## Title\n\nUse Conventional Commits (`feat(scope): …`, `fix: …`).\n\n## Body\n\n- Summary (why, not only what)\n- Test plan checklist\n- Screenshots when UI changes",
+      "autoinvoke": true,
+      "enabled": false,
+      "containerTag": null,
+      "createdAt": "2026-10-02T11:00:00.000Z",
+      "updatedAt": "2026-10-05T08:15:00.000Z"
+    }
+  ]
+}
diff --git a/web/src/lib/components/explorer/SkillsView.svelte b/web/src/lib/components/explorer/SkillsView.svelte
index 85f49073..f9a29416 100644
--- a/web/src/lib/components/explorer/SkillsView.svelte
+++ b/web/src/lib/components/explorer/SkillsView.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Pencil from "@lucide/svelte/icons/pencil";
+  import PenLine from "@lucide/svelte/icons/pen-line";
   import ScrollText from "@lucide/svelte/icons/scroll-text";
   import Trash2 from "@lucide/svelte/icons/trash-2";
   import type { SkillItem } from "$lib/stores/skills.svelte";
@@ -48,7 +48,7 @@
       {#each filtered as skill (skill.id)}
         <div class={cn(SURFACE_CARD, CARD_PAD, STACK_TIGHT)}>
           <div class={cn("flex items-center", GAP)}>
-            <div class={cn("flex min-w-0 flex-1 items-center", GAP_TIGHT)}>
+            <div class={cn("flex min-w-0 flex-1 items-center", GAP)}>
               <h3 class={cn(CARD_TITLE, "min-w-0 truncate")}>{skill.name}</h3>
               {#if !skill.enabled}
                 <Badge variant="secondary" class="shrink-0">{i18n.t("skill-disabled")}</Badge>
@@ -57,19 +57,21 @@
                 <Badge variant="outline" class="shrink-0 text-[10px]">auto</Badge>
               {/if}
             </div>
-            <div class={cn("flex shrink-0 items-center", GAP_TIGHT)}>
+            <div class="flex shrink-0 items-center gap-1">
               <Button
                 variant="ghost"
-                size="icon-sm"
-                aria-label={i18n.t("skill-edit")}
+                size="icon-xs"
+                title={i18n.t("btn-edit")}
+                aria-label={i18n.t("btn-edit")}
                 onclick={() => onEdit?.(skill)}
               >
-                <Pencil class={ICON_SM} aria-hidden="true" />
+                <PenLine class={ICON_SM} aria-hidden="true" />
               </Button>
               <Button
-                variant="ghost"
-                size="icon-sm"
-                aria-label={i18n.t("confirm-delete-title")}
+                variant="destructive"
+                size="icon-xs"
+                title={i18n.t("btn-delete")}
+                aria-label={i18n.t("btn-delete")}
                 onclick={() => onDelete?.(skill.id)}
               >
                 <Trash2 class={ICON_SM} aria-hidden="true" />
@@ -77,9 +79,11 @@
             </div>
           </div>
           {#if skill.description}
-            <p class="text-sm text-muted-foreground">{skill.description}</p>
+            <p class="text-sm">{skill.description}</p>
           {/if}
-          <p class="text-xs text-muted-foreground">{formatDate(skill.updatedAt)}</p>
+          <div class={cn("flex items-center text-xs text-muted-foreground", GAP_TIGHT)}>
+            <span>{formatDate(skill.updatedAt)}</span>
+          </div>
         </div>
       {/each}
     </div>
diff --git a/web/vite-plugins/opencode-mem-sim.ts b/web/vite-plugins/opencode-mem-sim.ts
index f13410c6..6732e548 100644
--- a/web/vite-plugins/opencode-mem-sim.ts
+++ b/web/vite-plugins/opencode-mem-sim.ts
@@ -15,10 +15,35 @@ type MemoryItem = {
 
 type MemoriesFile = { items: MemoryItem[] };
 
+type SkillItem = {
+  id: string;
+  name: string;
+  description: string;
+  content: string;
+  autoinvoke: boolean;
+  enabled: boolean;
+  containerTag: string | null;
+  createdAt: string;
+  updatedAt: string;
+};
+
+type SkillsFile = { items: SkillItem[] };
+
 function readJson<T>(filePath: string): T {
   return JSON.parse(fs.readFileSync(filePath, "utf8")) as T;
 }
 
+function readBody(req: Connect.IncomingMessage): Promise<string> {
+  return new Promise((resolve, reject) => {
+    let body = "";
+    req.on("data", (chunk) => {
+      body += chunk;
+    });
+    req.on("end", () => resolve(body));
+    req.on("error", reject);
+  });
+}
+
 function sendJson(res: Connect.ServerResponse, status: number, body: unknown) {
   res.statusCode = status;
   res.setHeader("Content-Type", "application/json; charset=utf-8");
@@ -87,11 +112,18 @@ export function opencodeMemSimPlugin(simRoot: string): Plugin {
       let memories: MemoryItem[] = readJson<MemoriesFile>(
         path.join(simRoot, "memories.json")
       ).items.map((item) => ({ ...item }));
+      let skills: SkillItem[] = readJson<SkillsFile>(path.join(simRoot, "skills.json")).items.map(
+        (item) => ({ ...item })
+      );
 
       function findMemory(id: string) {
         return memories.find((item) => item.id === id);
       }
 
+      function findSkill(id: string) {
+        return skills.find((item) => item.id === id);
+      }
+
       function memoryCount() {
         return memories.filter((item) => item.type === "memory").length;
       }
@@ -242,6 +274,111 @@ export function opencodeMemSimPlugin(simRoot: string): Plugin {
             return;
           }
 
+          if (pathname === "/api/skills" && method === "GET") {
+            const enabledOnly = url.searchParams.get("enabledOnly") === "true";
+            const items = enabledOnly ? skills.filter((skill) => skill.enabled) : skills;
+            sendJson(res, 200, { success: true, data: { items } });
+            return;
+          }
+
+          if (pathname === "/api/skills" && method === "POST") {
+            void readBody(req).then((raw) => {
+              try {
+                const parsed = raw ? (JSON.parse(raw) as Partial<SkillItem> & { id?: string }) : {};
+                const id = String(parsed.id || "").trim();
+                const name = String(parsed.name || "").trim();
+                const content = String(parsed.content || "");
+                if (!id || !name || !content.trim()) {
+                  sendJson(res, 400, {
+                    success: false,
+                    error: "id, name, and content are required",
+                  });
+                  return;
+                }
+                if (findSkill(id)) {
+                  sendJson(res, 400, { success: false, error: `Skill already exists: ${id}` });
+                  return;
+                }
+                const now = new Date().toISOString();
+                const skill: SkillItem = {
+                  id,
+                  name,
+                  description: String(parsed.description || "").trim(),
+                  content,
+                  autoinvoke: parsed.autoinvoke !== false,
+                  enabled: parsed.enabled !== false,
+                  containerTag:
+                    parsed.containerTag === undefined ? null : (parsed.containerTag ?? null),
+                  createdAt: now,
+                  updatedAt: now,
+                };
+                skills = [skill, ...skills];
+                sendJson(res, 200, { success: true, data: skill });
+              } catch (error) {
+                sendJson(res, 400, {
+                  success: false,
+                  error: error instanceof Error ? error.message : String(error),
+                });
+              }
+            });
+            return;
+          }
+
+          const skillIdMatch = pathname.match(/^\/api\/skills\/([^/]+)$/);
+          if (skillIdMatch && method === "GET") {
+            const skill = findSkill(decodeURIComponent(skillIdMatch[1]));
+            if (!skill) {
+              sendJson(res, 404, { success: false, error: "Skill not found" });
+              return;
+            }
+            sendJson(res, 200, { success: true, data: skill });
+            return;
+          }
+
+          if (skillIdMatch && method === "PUT") {
+            const id = decodeURIComponent(skillIdMatch[1]);
+            const skill = findSkill(id);
+            if (!skill) {
+              sendJson(res, 404, { success: false, error: "Skill not found" });
+              return;
+            }
+            void readBody(req).then((raw) => {
+              try {
+                const parsed = raw ? (JSON.parse(raw) as Partial<SkillItem>) : {};
+                if (typeof parsed.name === "string") skill.name = parsed.name.trim();
+                if (typeof parsed.description === "string") {
+                  skill.description = parsed.description.trim();
+                }
+                if (typeof parsed.content === "string") skill.content = parsed.content;
+                if (typeof parsed.autoinvoke === "boolean") skill.autoinvoke = parsed.autoinvoke;
+                if (typeof parsed.enabled === "boolean") skill.enabled = parsed.enabled;
+                if (parsed.containerTag !== undefined) {
+                  skill.containerTag = parsed.containerTag;
+                }
+                skill.updatedAt = new Date().toISOString();
+                sendJson(res, 200, { success: true, data: skill });
+              } catch (error) {
+                sendJson(res, 400, {
+                  success: false,
+                  error: error instanceof Error ? error.message : String(error),
+                });
+              }
+            });
+            return;
+          }
+
+          if (skillIdMatch && method === "DELETE") {
+            const id = decodeURIComponent(skillIdMatch[1]);
+            const before = skills.length;
+            skills = skills.filter((skill) => skill.id !== id);
+            if (skills.length === before) {
+              sendJson(res, 404, { success: false, error: "Skill not found" });
+              return;
+            }
+            sendJson(res, 200, { success: true, data: { deleted: true } });
+            return;
+          }
+
           // Other mutations: acknowledge without persistence.
           if (method !== "GET" && method !== "HEAD") {
             sendJson(res, 200, stubOk());

From ee6b7088a30b0a66e7173b62979b009a329a861a Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 11:13:04 +0200
Subject: [PATCH 21/25] feat(web): enhance SkillDialog with edit and preview
 modes for skill content, improving user experience and interactivity

---
 web/src/app.css                               | 70 ++++++++++++++++++-
 .../components/explorer/SkillDialog.svelte    | 70 ++++++++++++++++---
 web/vite-plugins/opencode-mem-sim.ts          | 22 ++++--
 3 files changed, 146 insertions(+), 16 deletions(-)

diff --git a/web/src/app.css b/web/src/app.css
index 9b6891cf..e8683c89 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -159,9 +159,73 @@ html.theme-switching *::after {
 .markdown-content {
   line-height: 1.65;
   word-break: break-word;
+  color: var(--foreground);
+}
+.markdown-content > :first-child {
+  margin-top: 0;
+}
+.markdown-content > :last-child {
+  margin-bottom: 0;
+}
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3,
+.markdown-content h4 {
+  color: var(--foreground-bright);
+  font-weight: 600;
+  line-height: 1.3;
+  margin: 1em 0 0.4em;
+}
+.markdown-content h1 {
+  font-size: 1.35rem;
+}
+.markdown-content h2 {
+  font-size: 1.15rem;
+}
+.markdown-content h3 {
+  font-size: 1.05rem;
+}
+.markdown-content h4 {
+  font-size: 1rem;
+}
+.markdown-content p {
+  margin: 0.45em 0;
+}
+.markdown-content ul,
+.markdown-content ol {
+  margin: 0.45em 0;
+  padding-inline-start: 1.35rem;
+}
+.markdown-content li {
+  margin: 0.2em 0;
+}
+.markdown-content li > ul,
+.markdown-content li > ol {
+  margin: 0.15em 0;
+}
+.markdown-content strong {
+  color: var(--foreground-bright);
+  font-weight: 600;
+}
+.markdown-content a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.markdown-content hr {
+  margin: 0.9em 0;
+  border: 0;
+  border-top: 1px solid var(--border);
+}
+.markdown-content blockquote {
+  margin: 0.6em 0;
+  padding-inline-start: 0.85rem;
+  border-inline-start: 3px solid var(--border);
+  color: var(--muted-foreground);
 }
 .markdown-content pre {
   overflow-x: auto;
+  margin: 0.6em 0;
   padding: 0.75rem;
   background: var(--muted);
   border: 1px solid var(--border);
@@ -171,8 +235,10 @@ html.theme-switching *::after {
   font-family: var(--font-mono);
   font-size: 0.85em;
 }
-.markdown-content p {
-  margin: 0.4em 0;
+.markdown-content :not(pre) > code {
+  padding: 0.1em 0.35em;
+  border-radius: 0.35rem;
+  background: var(--muted);
 }
 
 .confidence-ring {
diff --git a/web/src/lib/components/explorer/SkillDialog.svelte b/web/src/lib/components/explorer/SkillDialog.svelte
index 6d92a222..3c455dbb 100644
--- a/web/src/lib/components/explorer/SkillDialog.svelte
+++ b/web/src/lib/components/explorer/SkillDialog.svelte
@@ -4,10 +4,13 @@
   import DialogActions from "$lib/components/ui/dialog-actions.svelte";
   import FormField from "$lib/components/ui/form-field.svelte";
   import Input from "$lib/components/ui/input.svelte";
+  import Button from "$lib/components/ui/button.svelte";
   import Checkbox from "$lib/components/ui/checkbox.svelte";
   import Textarea from "$lib/components/ui/textarea.svelte";
   import { useI18n } from "$lib/i18n/context.svelte";
-  import { STACK_FORM } from "$lib/ui/styles";
+  import { renderMarkdown } from "$lib/markdown";
+  import { CARD_PAD, GAP_TIGHT, STACK_FORM, SURFACE_CARD } from "$lib/ui/styles";
+  import { cn } from "$lib/utils";
 
   type Props = {
     open?: boolean;
@@ -26,6 +29,13 @@
   }: Props = $props();
 
   const i18n = useI18n();
+  let contentMode = $state<"edit" | "preview">("edit");
+
+  $effect(() => {
+    if (open) contentMode = "edit";
+  });
+
+  const previewHtml = $derived(renderMarkdown(draft.content || ""));
 
   function handleOpenChange(next: boolean) {
     open = next;
@@ -73,15 +83,55 @@
       />
     </FormField>
 
-    <FormField id="skill-content" label={i18n.t("label-skill-content")} value={draft.content}>
-      <Textarea
-        id="skill-content"
-        rows={10}
-        required
-        bind:value={draft.content}
-        placeholder={i18n.t("placeholder-skill-content")}
-      />
-    </FormField>
+    <div class="space-y-2">
+      <div class={cn("flex items-center justify-between", GAP_TIGHT)}>
+        <label for="skill-content" class="text-xs font-medium text-foreground">
+          {i18n.t("label-skill-content")}
+        </label>
+        <div class={cn("flex items-center", GAP_TIGHT)}>
+          <Button
+            type="button"
+            variant={contentMode === "edit" ? "secondary" : "ghost"}
+            size="xs"
+            onclick={() => (contentMode = "edit")}
+          >
+            {i18n.t("btn-edit")}
+          </Button>
+          <Button
+            type="button"
+            variant={contentMode === "preview" ? "secondary" : "ghost"}
+            size="xs"
+            onclick={() => (contentMode = "preview")}
+          >
+            {i18n.t("skill-preview")}
+          </Button>
+        </div>
+      </div>
+
+      {#if contentMode === "edit"}
+        <Textarea
+          id="skill-content"
+          rows={10}
+          required
+          bind:value={draft.content}
+          placeholder={i18n.t("placeholder-skill-content")}
+        />
+      {:else}
+        <div
+          class={cn(
+            SURFACE_CARD,
+            CARD_PAD,
+            "markdown-content prose-invert max-w-none min-h-48 max-h-80 overflow-y-auto text-sm"
+          )}
+        >
+          {#if draft.content.trim()}
+            {@html previewHtml}
+          {:else}
+            <p class="text-muted-foreground">{i18n.t("placeholder-skill-content")}</p>
+          {/if}
+        </div>
+      {/if}
+    </div>
 
     <div class="flex flex-wrap gap-4">
       <label class="flex items-center gap-2 text-sm">
diff --git a/web/vite-plugins/opencode-mem-sim.ts b/web/vite-plugins/opencode-mem-sim.ts
index 6732e548..f6013a64 100644
--- a/web/vite-plugins/opencode-mem-sim.ts
+++ b/web/vite-plugins/opencode-mem-sim.ts
@@ -1,6 +1,7 @@
 import fs from "node:fs";
+import type { IncomingMessage, ServerResponse } from "node:http";
 import path from "node:path";
-import type { Connect, Plugin } from "vite";
+import type { Plugin } from "vite";
 
 type MemoryItem = {
   id: string;
@@ -10,6 +11,11 @@ type MemoryItem = {
   displayName?: string;
   projectName?: string;
   isPinned?: boolean;
+  createdAt?: string;
+  updatedAt?: string;
+  linkedMemoryId?: string;
+  linkedPromptId?: string;
+  memoryType?: string;
   [key: string]: unknown;
 };
 
@@ -33,7 +39,7 @@ function readJson<T>(filePath: string): T {
   return JSON.parse(fs.readFileSync(filePath, "utf8")) as T;
 }
 
-function readBody(req: Connect.IncomingMessage): Promise<string> {
+function readBody(req: IncomingMessage): Promise<string> {
   return new Promise((resolve, reject) => {
     let body = "";
     req.on("data", (chunk) => {
@@ -44,7 +50,7 @@ function readBody(req: Connect.IncomingMessage): Promise<string> {
   });
 }
 
-function sendJson(res: Connect.ServerResponse, status: number, body: unknown) {
+function sendJson(res: ServerResponse, status: number, body: unknown) {
   res.statusCode = status;
   res.setHeader("Content-Type", "application/json; charset=utf-8");
   res.end(JSON.stringify(body));
@@ -54,12 +60,20 @@ function stubOk(message = "Simulated success") {
   return { success: true, data: { message } };
 }
 
+function memoryTime(value: unknown): number {
+  if (typeof value === "string" || typeof value === "number") {
+    const time = new Date(value).getTime();
+    return Number.isFinite(time) ? time : 0;
+  }
+  return 0;
+}
+
 function sortMemories(items: MemoryItem[]) {
   return [...items].sort((a, b) => {
     const pinA = a.type === "memory" && a.isPinned ? 1 : 0;
     const pinB = b.type === "memory" && b.isPinned ? 1 : 0;
     if (pinA !== pinB) return pinB - pinA;
-    return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+    return memoryTime(b.createdAt) - memoryTime(a.createdAt);
   });
 }
 

From 7dcfeea72e56f711a91c60275469711ee2d30d32 Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 11:16:43 +0200
Subject: [PATCH 22/25] fix(skills): materialize SKILL.md and cover OpenCode
 skill.transform

Write enabled skills to disk so Skill.Info.path is readable, and assert
V2 registration/reload against a mock OpenCode skill editor.
---
 src/services/skills/skills-manager.ts |  49 +++++++---
 tests/v2-skills-bridge.test.ts        | 136 +++++++++++++++++++++++++-
 2 files changed, 171 insertions(+), 14 deletions(-)

diff --git a/src/services/skills/skills-manager.ts b/src/services/skills/skills-manager.ts
index f65c104d..214ae3a2 100644
--- a/src/services/skills/skills-manager.ts
+++ b/src/services/skills/skills-manager.ts
@@ -1,4 +1,5 @@
-import { join } from "node:path";
+import { mkdir, rm, writeFile } from "node:fs/promises";
+import { dirname, join } from "node:path";
 import { tursoConnectionManager } from "../turso/connection-manager.js";
 import type { TursoDb } from "../turso/turso-db.js";
 import { CONFIG } from "../../config.js";
@@ -79,11 +80,36 @@ export class SkillsManager {
     return this.db;
   }
 
-  /** Absolute synthetic SKILL.md path for OpenCode Skill.Info.path */
+  /** Absolute SKILL.md path for OpenCode Skill.Info.path */
   skillPath(id: string): string {
     return join(this.dbPath.replace(/skills\.db$/, "skills-content"), id, "SKILL.md");
   }
 
+  /** OpenCode-compatible SKILL.md (frontmatter + body). */
+  formatMarkdown(skill: SkillRecord): string {
+    return [
+      "---",
+      `name: ${JSON.stringify(skill.name)}`,
+      `description: ${JSON.stringify(skill.description)}`,
+      "metadata:",
+      `  opencode/autoinvoke: ${skill.autoinvoke ? '"true"' : '"false"'}`,
+      "---",
+      "",
+      skill.content,
+    ].join("\n");
+  }
+
+  private async writeSkillFile(skill: SkillRecord): Promise<void> {
+    const filePath = this.skillPath(skill.id);
+    await mkdir(dirname(filePath), { recursive: true });
+    await writeFile(filePath, this.formatMarkdown(skill), "utf8");
+  }
+
+  private async removeSkillFile(id: string): Promise<void> {
+    const dir = dirname(this.skillPath(id));
+    await rm(dir, { recursive: true, force: true });
+  }
+
   async list(options?: {
     containerTag?: string | null;
     enabledOnly?: boolean;
@@ -156,6 +182,7 @@ export class SkillsManager {
 
     const created = await this.get(id);
     if (!created) throw new Error("Failed to create skill");
+    if (created.enabled) await this.writeSkillFile(created);
     notifySkillsChanged();
     return created;
   }
@@ -190,6 +217,11 @@ export class SkillsManager {
 
     const updated = await this.get(id);
     if (!updated) throw new Error("Failed to update skill");
+    if (updated.enabled) {
+      await this.writeSkillFile(updated);
+    } else {
+      await this.removeSkillFile(id);
+    }
     notifySkillsChanged();
     return updated;
   }
@@ -199,6 +231,7 @@ export class SkillsManager {
     if (!existing) return false;
     const db = await this.getDb();
     await db.run(`DELETE FROM skills WHERE id = ?`, [id]);
+    await this.removeSkillFile(id);
     notifySkillsChanged();
     return true;
   }
@@ -221,17 +254,7 @@ export class SkillsManager {
   async toCatalogMarkdown(id: string): Promise<string | null> {
     const skill = await this.get(id);
     if (!skill || !skill.enabled) return null;
-    const frontmatter = [
-      "---",
-      `name: ${JSON.stringify(skill.name)}`,
-      `description: ${JSON.stringify(skill.description)}`,
-      "metadata:",
-      `  opencode/autoinvoke: ${skill.autoinvoke ? '"true"' : '"false"'}`,
-      "---",
-      "",
-      skill.content,
-    ].join("\n");
-    return frontmatter;
+    return this.formatMarkdown(skill);
   }
 }
 
diff --git a/tests/v2-skills-bridge.test.ts b/tests/v2-skills-bridge.test.ts
index 884ab0cd..e7ce3d04 100644
--- a/tests/v2-skills-bridge.test.ts
+++ b/tests/v2-skills-bridge.test.ts
@@ -1,8 +1,9 @@
 import { describe, it, expect, beforeEach, afterEach } from "bun:test";
-import { mkdtempSync, rmSync } from "node:fs";
+import { existsSync, mkdtempSync, readFileSync, rmSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
 import { tursoConnectionManager } from "../src/services/turso/connection-manager.js";
+import { registerV2Adapter } from "../src/v2/adapter.js";
 
 let tmpDir: string;
 
@@ -38,6 +39,11 @@ describe("V2 skills bridge helpers", () => {
     const path = skillsManager.skillPath("bridge-demo");
     expect(path.startsWith("/")).toBe(true);
     expect(path.endsWith("bridge-demo/SKILL.md")).toBe(true);
+    expect(existsSync(path)).toBe(true);
+    const md = readFileSync(path, "utf8");
+    expect(md).toContain('name: "Bridge Demo"');
+    expect(md).toContain("Do the thing.");
+    expect(md).toContain('opencode/autoinvoke: "true"');
   });
 
   it("lists only enabled skills for registration filtering", async () => {
@@ -56,5 +62,133 @@ describe("V2 skills bridge helpers", () => {
     });
     const enabled = await skillsManager.list({ enabledOnly: true });
     expect(enabled.map((s) => s.id)).toEqual(["on"]);
+    expect(existsSync(skillsManager.skillPath("on"))).toBe(true);
+    expect(existsSync(skillsManager.skillPath("off"))).toBe(false);
+  });
+
+  it("registers enabled DB skills through OpenCode skill.transform", async () => {
+    const { skillsManager } = await import("../src/services/skills/skills-manager.js");
+    await skillsManager.create({
+      id: "code-review",
+      name: "Code Review",
+      description: "Review diffs",
+      content: "## Review\n\nBe thorough.",
+      autoinvoke: true,
+      enabled: true,
+    });
+    await skillsManager.create({
+      id: "disabled-skill",
+      name: "Disabled",
+      content: "hidden",
+      enabled: false,
+    });
+
+    const registry = new Map<string, any>();
+    let reloadCount = 0;
+    const hooks = new Map<string, (event: any) => Promise<void>>();
+
+    const ctx = {
+      location: {
+        directory: "/workspace/project",
+        project: { id: "project", directory: "/workspace/project", canonical: "project" },
+      },
+      tool: {
+        transform: async (callback: (editor: any) => void) => {
+          callback({ add() {} });
+        },
+      },
+      skill: {
+        transform: async (callback: (editor: any) => void) => {
+          callback({
+            get: (id: string) => registry.get(id),
+            add: (skill: any) => {
+              registry.set(skill.id, { ...skill });
+            },
+            update: (id: string, mutate: (skill: any) => void) => {
+              const current = registry.get(id);
+              if (!current) return;
+              mutate(current);
+            },
+            remove: (id: string) => {
+              registry.delete(id);
+            },
+          });
+        },
+        reload: async () => {
+          reloadCount++;
+        },
+      },
+      session: {
+        hook: async (name: string, callback: (event: any) => Promise<void>) => {
+          hooks.set(name, callback);
+        },
+      },
+      event: {
+        async *subscribe({ signal }: { signal: AbortSignal }) {
+          await new Promise<void>((resolve) =>
+            signal.addEventListener("abort", () => resolve(), { once: true })
+          );
+          // Satisfy require-yield; cleanup aborts before any events are needed.
+          if (signal.aborted) yield null;
+        },
+      },
+    } as any;
+
+    const cleanup = await registerV2Adapter(ctx, {
+      tool: { memory: { description: "memory", execute: async () => "{}" } },
+      event: async () => {},
+      dispose: async () => {},
+    });
+
+    expect([...registry.keys()].sort()).toEqual(["code-review"]);
+    const registered = registry.get("code-review");
+    expect(registered.name).toBe("Code Review");
+    expect(registered.description).toBe("Review diffs");
+    expect(registered.autoinvoke).toBe(true);
+    expect(registered.content).toBe("## Review\n\nBe thorough.");
+    expect(registered.path).toBe(skillsManager.skillPath("code-review"));
+    expect(existsSync(registered.path)).toBe(true);
+
+    await skillsManager.update("code-review", {
+      description: "Review PRs carefully",
+      autoinvoke: false,
+    });
+    await new Promise((r) => setTimeout(r, 50));
+
+    expect(registry.get("code-review")?.description).toBe("Review PRs carefully");
+    expect(registry.get("code-review")?.autoinvoke).toBe(false);
+    expect(reloadCount).toBeGreaterThan(0);
+
+    await skillsManager.update("code-review", { enabled: false });
+    await new Promise((r) => setTimeout(r, 50));
+    expect(registry.has("code-review")).toBe(false);
+
+    await cleanup();
+  });
+
+  it("builds OpenCode HTTP catalog markdown with autoinvoke metadata", async () => {
+    const { skillsManager } = await import("../src/services/skills/skills-manager.js");
+    await skillsManager.create({
+      id: "git-release",
+      name: "Git Release",
+      description: "Cut a release",
+      content: "Tag and publish.",
+      autoinvoke: false,
+    });
+
+    const catalog = await skillsManager.toHttpCatalog();
+    expect(catalog.skills).toEqual([
+      {
+        name: "git-release",
+        version: expect.any(String),
+        files: ["git-release.md"],
+      },
+    ]);
+
+    const md = await skillsManager.toCatalogMarkdown("git-release");
+    expect(md).toContain('name: "Git Release"');
+    expect(md).toContain('description: "Cut a release"');
+    expect(md).toContain('opencode/autoinvoke: "false"');
+    expect(md).toContain("Tag and publish.");
   });
 });

From 4a7cde99361c070a91cde7de98b70081ab12516b Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 11:18:42 +0200
Subject: [PATCH 23/25] fix(skills): ensure Skill.Info.path is correctly
 written to disk and validate V2 registration with mock OpenCode skill editor

---
 tests/tsconfig.json | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 tests/tsconfig.json

diff --git a/tests/tsconfig.json b/tests/tsconfig.json
new file mode 100644
index 00000000..740d8e04
--- /dev/null
+++ b/tests/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "..",
+    "noEmit": true,
+    "types": ["bun-types"]
+  },
+  "include": ["./**/*.ts", "../src/**/*.ts"],
+  "exclude": ["node_modules", "../dist", "../web"]
+}

From 41b518441752b3ff33b16abee97710ec4b7a13ef Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 11:24:03 +0200
Subject: [PATCH 24/25] fix(i18n): add skill strings for zh, ar, tr, and nl

---
 web/src/lib/i18n/translations.ts | 100 +++++++++++++++++++++++++++++++
 1 file changed, 100 insertions(+)

diff --git a/web/src/lib/i18n/translations.ts b/web/src/lib/i18n/translations.ts
index 7bb86e53..c248df65 100644
--- a/web/src/lib/i18n/translations.ts
+++ b/web/src/lib/i18n/translations.ts
@@ -449,6 +449,7 @@ export const translations = {
     "migration-note": "请不要关闭浏览器。这将使用技术标签重新向量化您的记忆，以提高搜索准确性。",
     "placeholder-filter": "筛选…",
     "placeholder-search": "搜索记忆...",
+    "placeholder-search-skills": "搜索技能…",
     "placeholder-tags": "react, hooks, auth (逗号分隔)",
     "placeholder-new-tag": "新标签…",
     "btn-add-tag": "添加标签",
@@ -560,6 +561,30 @@ export const translations = {
     "label-search": "搜索",
     "nav-prev-page": "上一页",
     "nav-next-page": "下一页",
+    "tab-skills": "技能",
+    "section-skills": "技能 ({count})",
+    "btn-add-skill": "添加技能",
+    "btn-new-skill": "新建技能",
+    "modal-skill-create-title": "创建技能",
+    "modal-skill-edit-title": "编辑技能",
+    "label-skill-name": "名称",
+    "label-skill-description": "描述",
+    "label-skill-content": "说明（Markdown）",
+    "label-skill-autoinvoke": "自动调用",
+    "label-skill-enabled": "启用",
+    "placeholder-skill-name": "Git Release",
+    "placeholder-skill-description": "何时使用此技能…",
+    "placeholder-skill-content": "## 我做什么\n\n- …",
+    "skill-edit": "编辑",
+    "skill-preview": "预览",
+    "skill-empty": "未找到技能",
+    "skill-disabled": "已禁用",
+    "confirm-delete-skill": "删除技能“{name}”？",
+    "toast-skill-save-success": "技能已保存",
+    "toast-skill-save-failed": "保存技能失败",
+    "toast-skill-delete-success": "技能已删除",
+    "toast-skill-delete-failed": "删除技能失败",
+    "toast-skill-load-failed": "加载技能失败",
   },
   ar: {
     title: "مستكشف ذاكرة OpenCode",
@@ -630,6 +655,7 @@ export const translations = {
 
     "placeholder-filter": "تصفية…",
     "placeholder-search": "ابحث في الذكريات...",
+    "placeholder-search-skills": "ابحث في المهارات…",
     "placeholder-tags": "react, hooks, auth (مفصولة بفواصل)",
     "placeholder-new-tag": "وسم جديد…",
     "btn-add-tag": "إضافة وسم",
@@ -769,6 +795,30 @@ export const translations = {
     "label-search": "بحث",
     "nav-prev-page": "الصفحة السابقة",
     "nav-next-page": "الصفحة التالية",
+    "tab-skills": "المهارات",
+    "section-skills": "المهارات ({count})",
+    "btn-add-skill": "إضافة مهارة",
+    "btn-new-skill": "مهارة جديدة",
+    "modal-skill-create-title": "إنشاء مهارة",
+    "modal-skill-edit-title": "تعديل مهارة",
+    "label-skill-name": "الاسم",
+    "label-skill-description": "الوصف",
+    "label-skill-content": "التعليمات (Markdown)",
+    "label-skill-autoinvoke": "استدعاء تلقائي",
+    "label-skill-enabled": "مفعّل",
+    "placeholder-skill-name": "Git Release",
+    "placeholder-skill-description": "متى تُستخدم هذه المهارة…",
+    "placeholder-skill-content": "## ماذا أفعل\n\n- …",
+    "skill-edit": "تعديل",
+    "skill-preview": "معاينة",
+    "skill-empty": "لا توجد مهارات",
+    "skill-disabled": "معطّل",
+    "confirm-delete-skill": "حذف المهارة “{name}”؟",
+    "toast-skill-save-success": "تم حفظ المهارة",
+    "toast-skill-save-failed": "فشل حفظ المهارة",
+    "toast-skill-delete-success": "تم حذف المهارة",
+    "toast-skill-delete-failed": "فشل حذف المهارة",
+    "toast-skill-load-failed": "فشل تحميل المهارات",
   },
   tr: {
     title: "OpenCode Hafıza Gezgini",
@@ -828,6 +878,7 @@ export const translations = {
       "Lütfen tarayıcıyı kapatmayın. Hafızalarınız arama doğruluğunu artırmak için teknik etiketlerle yeniden vektörlenecek.",
     "placeholder-filter": "Filtrele…",
     "placeholder-search": "Hafızalarda ara...",
+    "placeholder-search-skills": "Becerilerde ara…",
     "placeholder-tags": "react, hooks, auth (virgülle ayrılmış)",
     "placeholder-new-tag": "Yeni etiket…",
     "btn-add-tag": "Etiket ekle",
@@ -941,6 +992,30 @@ export const translations = {
     "label-search": "Ara",
     "nav-prev-page": "Önceki sayfa",
     "nav-next-page": "Sonraki sayfa",
+    "tab-skills": "Beceriler",
+    "section-skills": "Beceriler ({count})",
+    "btn-add-skill": "Beceri ekle",
+    "btn-new-skill": "Yeni beceri",
+    "modal-skill-create-title": "Beceri oluştur",
+    "modal-skill-edit-title": "Beceri düzenle",
+    "label-skill-name": "Ad",
+    "label-skill-description": "Açıklama",
+    "label-skill-content": "Talimatlar (Markdown)",
+    "label-skill-autoinvoke": "Otomatik çağır",
+    "label-skill-enabled": "Etkin",
+    "placeholder-skill-name": "Git Release",
+    "placeholder-skill-description": "Bu beceri ne zaman kullanılmalı…",
+    "placeholder-skill-content": "## Ne yaparım\n\n- …",
+    "skill-edit": "Düzenle",
+    "skill-preview": "Önizleme",
+    "skill-empty": "Beceri bulunamadı",
+    "skill-disabled": "Devre dışı",
+    "confirm-delete-skill": "“{name}” becerisi silinsin mi?",
+    "toast-skill-save-success": "Beceri kaydedildi",
+    "toast-skill-save-failed": "Beceri kaydedilemedi",
+    "toast-skill-delete-success": "Beceri silindi",
+    "toast-skill-delete-failed": "Beceri silinemedi",
+    "toast-skill-load-failed": "Beceriler yüklenemedi",
   },
   nl: {
     title: "OpenCode Memory Explorer",
@@ -1000,6 +1075,7 @@ export const translations = {
       "Sluit de browser niet af. Hiermee worden je memories opnieuw gevectoriseerd met technische tags om de zoeknauwkeurigheid te verbeteren.",
     "placeholder-filter": "Filteren…",
     "placeholder-search": "Memories zoeken...",
+    "placeholder-search-skills": "Skills zoeken…",
     "placeholder-tags": "react, hooks, auth (komma-gescheiden)",
     "placeholder-new-tag": "Nieuwe tag…",
     "btn-add-tag": "Tag toevoegen",
@@ -1115,6 +1191,30 @@ export const translations = {
     "label-search": "Zoeken",
     "nav-prev-page": "Vorige pagina",
     "nav-next-page": "Volgende pagina",
+    "tab-skills": "Skills",
+    "section-skills": "Skills ({count})",
+    "btn-add-skill": "Skill toevoegen",
+    "btn-new-skill": "Nieuwe skill",
+    "modal-skill-create-title": "Skill maken",
+    "modal-skill-edit-title": "Skill bewerken",
+    "label-skill-name": "Naam",
+    "label-skill-description": "Beschrijving",
+    "label-skill-content": "Instructies (Markdown)",
+    "label-skill-autoinvoke": "Automatisch aanroepen",
+    "label-skill-enabled": "Ingeschakeld",
+    "placeholder-skill-name": "Git Release",
+    "placeholder-skill-description": "Wanneer deze skill gebruiken…",
+    "placeholder-skill-content": "## Wat ik doe\n\n- …",
+    "skill-edit": "Bewerken",
+    "skill-preview": "Voorbeeld",
+    "skill-empty": "Geen skills gevonden",
+    "skill-disabled": "Uitgeschakeld",
+    "confirm-delete-skill": "Skill “{name}” verwijderen?",
+    "toast-skill-save-success": "Skill opgeslagen",
+    "toast-skill-save-failed": "Skill opslaan mislukt",
+    "toast-skill-delete-success": "Skill verwijderd",
+    "toast-skill-delete-failed": "Skill verwijderen mislukt",
+    "toast-skill-load-failed": "Skills laden mislukt",
   },
 } as const;
 export type Lang = keyof typeof translations;

From 9420ecdb519eb22f823af94890253ecb1b233d10 Mon Sep 17 00:00:00 2001
From: EyJunge1 <149941075+EyJunge1@users.noreply.github.com>
Date: Mon, 12 Oct 2026 11:28:43 +0200
Subject: [PATCH 25/25] fix(test): assert absolute skill paths in a
 Windows-safe way

---
 tests/v2-skills-bridge.test.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/tests/v2-skills-bridge.test.ts b/tests/v2-skills-bridge.test.ts
index e7ce3d04..973d7917 100644
--- a/tests/v2-skills-bridge.test.ts
+++ b/tests/v2-skills-bridge.test.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach } from "bun:test";
 import { existsSync, mkdtempSync, readFileSync, rmSync } from "node:fs";
 import { tmpdir } from "node:os";
-import { join } from "node:path";
+import { isAbsolute, join } from "node:path";
 import { tursoConnectionManager } from "../src/services/turso/connection-manager.js";
 import { registerV2Adapter } from "../src/v2/adapter.js";
 
@@ -37,8 +37,8 @@ describe("V2 skills bridge helpers", () => {
       content: "Do the thing.",
     });
     const path = skillsManager.skillPath("bridge-demo");
-    expect(path.startsWith("/")).toBe(true);
-    expect(path.endsWith("bridge-demo/SKILL.md")).toBe(true);
+    expect(isAbsolute(path)).toBe(true);
+    expect(path.replace(/\\/g, "/").endsWith("bridge-demo/SKILL.md")).toBe(true);
     expect(existsSync(path)).toBe(true);
     const md = readFileSync(path, "utf8");
     expect(md).toContain('name: "Bridge Demo"');