Refactor Prompt Library to Support Slug-Based Skills and Slash Commands (#2712)

drizzle/0026_lying_joseph.sql

+ALTER TABLE `prompts` ADD `slug` text;--> statement-breakpoint
+CREATE UNIQUE INDEX `prompts_slug_unique` ON `prompts` (`slug`);
\ No newline at end of file

drizzle/meta/_journal.json

@@ -183,6 +183,13 @@
       "when": 1770256089560,
       "tag": "0025_lush_stark_industries",
       "breakpoints": true
+    },
+    {
+      "idx": 26,
+      "version": "6",
+      "when": 1771025337064,
+      "tag": "0026_lying_joseph",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file

e2e-tests/helpers/page-objects/components/PromptLibrary.ts

@@ -12,10 +12,12 @@ export class PromptLibrary {
     title,
     description,
     content,
+    slug,
   }: {
     title: string;
     description?: string;
     content: string;
+    slug?: string;
   }) {
     await this.page.getByRole("button", { name: "New Prompt" }).click();
     await this.page.getByRole("textbox", { name: "Title" }).fill(title);
@@ -24,6 +26,9 @@ export class PromptLibrary {
         .getByRole("textbox", { name: "Description (optional)" })
         .fill(description);
     }
+    if (slug !== undefined) {
+      await this.page.getByPlaceholder("Slash command (optional)").fill(slug);
+    }
     await this.page.getByRole("textbox", { name: "Content" }).fill(content);
     await this.page.getByRole("button", { name: "Save" }).click();
   }

e2e-tests/prompt_library.spec.ts

@@ -70,3 +70,53 @@ test("use prompt", async ({ po }) => {
 
   await po.snapshotServerDump("last-message");
 });
+
+test("slash menu shows skills and selecting one inserts command", async ({
+  po,
+}) => {
+  await po.setUp();
+  await po.navigation.goToLibraryTab();
+  await po.page.getByRole("link", { name: "Prompts" }).click();
+  await po.promptLibrary.createPrompt({
+    title: "E2E Test Skill",
+    description: "desc",
+    content: "Run the E2E test skill content.",
+    slug: "e2e-test-skill",
+  });
+
+  await po.navigation.goToAppsTab();
+  const chatInput = po.chatActions.getChatInput();
+  await chatInput.click();
+  await chatInput.fill("/");
+
+  const skillsMenu = po.page.locator('[data-mentions-menu="true"]');
+  await expect(skillsMenu).toBeVisible();
+  await expect(skillsMenu).toContainText("e2e-test-skill");
+  await expect(skillsMenu).toContainText("Skill");
+
+  await skillsMenu.getByText("e2e-test-skill").click();
+  await expect(chatInput).toContainText("/e2e-test-skill");
+});
+
+test("slash command is expanded to prompt content in message", async ({
+  po,
+}) => {
+  await po.setUp();
+  await po.navigation.goToLibraryTab();
+  await po.page.getByRole("link", { name: "Prompts" }).click();
+  await po.promptLibrary.createPrompt({
+    title: "Webapp Testing Skill",
+    description: "E2E testing helper",
+    content: "Run comprehensive E2E tests for the login and signup flows.",
+    slug: "webapp-testing",
+  });
+
+  await po.navigation.goToAppsTab();
+  const chatInput = po.chatActions.getChatInput();
+  await chatInput.click();
+  await chatInput.fill("[dump] /webapp-testing for the new feature");
+  await po.page.getByRole("button", { name: "Send message" }).click();
+  await po.chatActions.waitForChatCompletion();
+
+  await po.snapshotServerDump("all-messages");
+});

e2e-tests/snapshots/prompt_library.spec.ts_slash-command-is-expanded-to-prompt-content-in-message-1.txt

+===
+role: system
+message: [[SYSTEM_MESSAGE]]
+
+===
+role: user
+message: [dump] Run comprehensive E2E tests for the login and signup flows. for the new feature
\ No newline at end of file

src/__tests__/replaceSlashSkillReference.test.ts

+import { describe, expect, it } from "vitest";
+import {
+  replaceSlashSkillReference,
+  slugForPrompt,
+} from "@/ipc/utils/replaceSlashSkillReference";
+
+describe("replaceSlashSkillReference", () => {
+  it("returns original when no slash-slug pattern present", () => {
+    const input = "Hello world";
+    const output = replaceSlashSkillReference(input, {
+      webapp: "content",
+    });
+    expect(output).toBe(input);
+  });
+
+  it("returns original when promptsBySlug is empty", () => {
+    const input = "/webapp-testing for the login page";
+    const output = replaceSlashSkillReference(input, {});
+    expect(output).toBe(input);
+  });
+
+  it("replaces /slug at start with content", () => {
+    const input = "/webapp-testing for the login page";
+    const promptsBySlug = { "webapp-testing": "Run E2E tests for the app." };
+    const output = replaceSlashSkillReference(input, promptsBySlug);
+    expect(output).toBe("Run E2E tests for the app. for the login page");
+  });
+
+  it("replaces /slug after space with content", () => {
+    const input = "Please do /github-actions-debugging now";
+    const promptsBySlug = {
+      "github-actions-debugging": "Debug failing GitHub Actions workflows.",
+    };
+    const output = replaceSlashSkillReference(input, promptsBySlug);
+    expect(output).toBe(
+      "Please do Debug failing GitHub Actions workflows. now",
+    );
+  });
+
+  it("replaces multiple /slug occurrences", () => {
+    const input = "/one and /two end";
+    const promptsBySlug = { one: "First", two: "Second" };
+    const output = replaceSlashSkillReference(input, promptsBySlug);
+    expect(output).toBe("First and Second end");
+  });
+
+  it("leaves unknown slug intact", () => {
+    const input = "/unknown-slug here";
+    const promptsBySlug = { "other-slug": "Content" };
+    const output = replaceSlashSkillReference(input, promptsBySlug);
+    expect(output).toBe("/unknown-slug here");
+  });
+
+  it("does not replace slash in middle of path-like text", () => {
+    const input = "path/to/file";
+    const promptsBySlug = { path: "Nope", to: "Nope", file: "Nope" };
+    const output = replaceSlashSkillReference(input, promptsBySlug);
+    expect(output).toBe("path/to/file");
+  });
+
+  it("replaces /slug and preserves trailing space", () => {
+    const input = "/webapp-testing extra";
+    const promptsBySlug = { "webapp-testing": "Content" };
+    const output = replaceSlashSkillReference(input, promptsBySlug);
+    expect(output).toBe("Content extra");
+  });
+
+  it("matches case-sensitive slugs", () => {
+    const input = "/FOO-Bar here";
+    const promptsBySlug = { "FOO-Bar": "Matched", "foo-bar": "Wrong" };
+    const output = replaceSlashSkillReference(input, promptsBySlug);
+    expect(output).toBe("Matched here");
+  });
+
+  it("does not match different-cased slug", () => {
+    const input = "/foo-bar here";
+    const promptsBySlug = { "FOO-BAR": "Content" };
+    const output = replaceSlashSkillReference(input, promptsBySlug);
+    expect(output).toBe("/foo-bar here");
+  });
+});
+
+describe("slugForPrompt", () => {
+  it("returns explicit slug when set", () => {
+    expect(slugForPrompt({ title: "My Prompt", slug: "custom" })).toBe(
+      "custom",
+    );
+  });
+
+  it("returns null when slug is null", () => {
+    expect(slugForPrompt({ title: "Web App Testing", slug: null })).toBeNull();
+  });
+
+  it("returns null when slug is empty string", () => {
+    expect(slugForPrompt({ title: "Web App Testing", slug: "" })).toBeNull();
+  });
+});

src/components/CreatePromptDialog.tsx

@@ -13,6 +13,8 @@ import {
 } from "@/components/ui/dialog";
 import { Plus, Save, Edit2 } from "lucide-react";
 
+const SLUG_REGEX = /^[a-zA-Z0-9-]*$/;
+
 interface CreateOrEditPromptDialogProps {
   mode: "create" | "edit";
   prompt?: {
@@ -20,17 +22,20 @@ interface CreateOrEditPromptDialogProps {
     title: string;
     description: string | null;
     content: string;
+    slug: string | null;
   };
   onCreatePrompt?: (prompt: {
     title: string;
     description?: string;
     content: string;
+    slug?: string | null;
   }) => Promise<any>;
   onUpdatePrompt?: (prompt: {
     id: number;
     title: string;
     description?: string;
     content: string;
+    slug?: string | null;
   }) => Promise<any>;
   trigger?: React.ReactNode;
   prefillData?: {
@@ -60,6 +65,7 @@ export function CreateOrEditPromptDialog({
     title: "",
     description: "",
     content: "",
+    slug: "",
   });
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -89,15 +95,17 @@ export function CreateOrEditPromptDialog({
         title: prompt.title,
         description: prompt.description || "",
         content: prompt.content,
+        slug: prompt.slug || "",
       });
     } else if (prefillData) {
       setDraft({
         title: prefillData.title,
         description: prefillData.description,
         content: prefillData.content,
+        slug: "",
       });
     } else {
-      setDraft({ title: "", description: "", content: "" });
+      setDraft({ title: "", description: "", content: "", slug: "" });
     }
   }, [mode, prompt, prefillData, open]);
 
@@ -120,26 +128,36 @@ export function CreateOrEditPromptDialog({
         title: prompt.title,
         description: prompt.description || "",
         content: prompt.content,
+        slug: prompt.slug || "",
       });
     } else if (prefillData) {
       setDraft({
         title: prefillData.title,
         description: prefillData.description,
         content: prefillData.content,
+        slug: "",
       });
     } else {
-      setDraft({ title: "", description: "", content: "" });
+      setDraft({ title: "", description: "", content: "", slug: "" });
     }
   };
 
+  const slugTrimmed = draft.slug.trim();
+  const slugInvalid = slugTrimmed !== "" && !SLUG_REGEX.test(slugTrimmed);
+
   const onSave = async () => {
-    if (!draft.title.trim() || !draft.content.trim()) return;
+    if (!draft.title.trim() || !draft.content.trim() || slugInvalid) return;
+
+    // In edit mode, empty slug means "clear it" (null), not "don't change" (undefined).
+    const slugValue =
+      slugTrimmed === "" ? (mode === "edit" ? null : undefined) : slugTrimmed;
 
     if (mode === "create" && onCreatePrompt) {
       await onCreatePrompt({
         title: draft.title.trim(),
         description: draft.description.trim() || undefined,
         content: draft.content,
+        slug: slugValue,
       });
     } else if (mode === "edit" && onUpdatePrompt && prompt) {
       await onUpdatePrompt({
@@ -147,6 +165,7 @@ export function CreateOrEditPromptDialog({
         title: draft.title.trim(),
         description: draft.description.trim() || undefined,
         content: draft.content,
+        slug: slugValue,
       });
     }
 
@@ -199,6 +218,23 @@ export function CreateOrEditPromptDialog({
               setDraft((d) => ({ ...d, description: e.target.value }))
             }
           />
+          <div>
+            <Input
+              placeholder="Slash command (optional)"
+              value={draft.slug}
+              onChange={(e) => {
+                const v = e.target.value;
+                if (v === "" || SLUG_REGEX.test(v))
+                  setDraft((d) => ({ ...d, slug: v }));
+              }}
+              className="font-mono"
+            />
+            <p className="text-xs text-muted-foreground mt-1">
+              {slugInvalid
+                ? "Use only letters, numbers, and hyphens."
+                : "Used as /command in chat."}
+            </p>
+          </div>
           <Textarea
             ref={textareaRef}
             placeholder="Content"
@@ -218,7 +254,9 @@ export function CreateOrEditPromptDialog({
           </Button>
           <Button
             onClick={onSave}
-            disabled={!draft.title.trim() || !draft.content.trim()}
+            disabled={
+              !draft.title.trim() || !draft.content.trim() || slugInvalid
+            }
           >
             <Save className="mr-2 h-4 w-4" /> Save
           </Button>
@@ -239,6 +277,7 @@ export function CreatePromptDialog({
     title: string;
     description?: string;
     content: string;
+    slug?: string | null;
   }) => Promise<any>;
   prefillData?: {
     title: string;

src/components/chat/LexicalChatInput.tsx

@@ -28,11 +28,14 @@ import { selectedAppIdAtom } from "@/atoms/appAtoms";
 import { MENTION_REGEX, parseAppMentions } from "@/shared/parse_mention_apps";
 import { useLoadApp } from "@/hooks/useLoadApp";
 import { HistoryNavigation, HISTORY_TRIGGER } from "./HistoryNavigation";
+import { slugForPrompt } from "@/ipc/utils/replaceSlashSkillReference";
 
 // Define the theme for mentions
 const beautifulMentionsTheme: BeautifulMentionsTheme = {
   "@": "px-2 py-0.5 mx-0.5 bg-accent text-accent-foreground rounded-md",
   "@Focused": "outline-none ring-2 ring-ring",
+  "/": "px-2 py-0.5 mx-0.5 bg-accent text-accent-foreground rounded-md",
+  "/Focused": "outline-none ring-2 ring-ring",
 };
 
 // Custom menu item component
@@ -41,9 +44,18 @@ const CustomMenuItem = forwardRef<
   BeautifulMentionsMenuItemProps
 >(({ selected, item, ...props }, ref) => {
   const isPrompt = item.data?.type === "prompt";
+  const isSkill = item.data?.type === "skill";
   const isApp = item.data?.type === "app";
   const isHistory = item.data?.type === "history";
-  const label = isPrompt ? "Prompt" : isApp ? "App" : isHistory ? "" : "File";
+  const label = isSkill
+    ? "Skill"
+    : isPrompt
+      ? "Prompt"
+      : isApp
+        ? "App"
+        : isHistory
+          ? ""
+          : "File";
   const value = (item as any)?.value;
 
   // For history items, show full text without label
@@ -76,7 +88,7 @@ const CustomMenuItem = forwardRef<
       <div className="flex items-center space-x-2 min-w-0">
         <span
           className={`px-2 py-0.5 text-xs font-medium rounded-md flex-shrink-0 ${
-            isPrompt
+            isSkill || isPrompt
               ? "bg-purple-500 text-white"
               : isApp
                 ? "bg-primary text-primary-foreground"
@@ -286,7 +298,11 @@ export function LexicalChatInput({
 
   // Prepare mention items - convert apps to mention format
   const mentionItems = React.useMemo(() => {
-    const result: Record<string, any[]> = { "@": [], [HISTORY_TRIGGER]: [] };
+    const result: Record<string, any[]> = {
+      "@": [],
+      "/": [],
+      [HISTORY_TRIGGER]: [],
+    };
 
     // Add history items under the history trigger - always available regardless of app loading
     // Reverse so most recent appears at the bottom
@@ -299,6 +315,16 @@ export function LexicalChatInput({
       }));
     result[HISTORY_TRIGGER] = historyItems;
 
+    // Skills (slash commands): all prompts by slug
+    const skillItems = (prompts || [])
+      .map((p) => ({
+        value: slugForPrompt(p),
+        type: "skill",
+        id: p.id,
+      }))
+      .filter((item) => item.value != null && item.value !== "");
+    result["/"] = skillItems;
+
     if (!apps) return result;
 
     // Get current app name

src/db/schema.ts

@@ -10,18 +10,23 @@ export type AiMessagesJsonV6 = {
   sdkVersion: typeof AI_MESSAGES_SDK_VERSION;
 };
 
-export const prompts = sqliteTable("prompts", {
+export const prompts = sqliteTable(
+  "prompts",
+  {
     id: integer("id").primaryKey({ autoIncrement: true }),
     title: text("title").notNull(),
     description: text("description"),
     content: text("content").notNull(),
+    slug: text("slug"),
     createdAt: integer("created_at", { mode: "timestamp" })
       .notNull()
       .default(sql`(unixepoch())`),
     updatedAt: integer("updated_at", { mode: "timestamp" })
       .notNull()
       .default(sql`(unixepoch())`),
-});
+  },
+  (table) => [unique("prompts_slug_unique").on(table.slug)],
+);
 
 export const apps = sqliteTable("apps", {
   id: integer("id").primaryKey({ autoIncrement: true }),

src/hooks/usePrompts.ts

@@ -7,6 +7,7 @@ export interface PromptItem {
   title: string;
   description: string | null;
   content: string;
+  slug: string | null;
   createdAt: Date;
   updatedAt: Date;
 }
@@ -26,8 +27,14 @@ export function usePrompts() {
       title: string;
       description?: string;
       content: string;
+      slug?: string | null;
     }): Promise<PromptItem> => {
-      return ipc.prompt.create(params);
+      return ipc.prompt.create({
+        title: params.title,
+        description: params.description,
+        content: params.content,
+        slug: params.slug ?? undefined,
+      });
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: queryKeys.prompts.all });
@@ -43,8 +50,15 @@ export function usePrompts() {
       title: string;
       description?: string;
       content: string;
+      slug?: string | null;
     }): Promise<void> => {
-      return ipc.prompt.update(params);
+      return ipc.prompt.update({
+        id: params.id,
+        title: params.title,
+        description: params.description,
+        content: params.content,
+        slug: params.slug ?? undefined,
+      });
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: queryKeys.prompts.all });

src/ipc/handlers/chat_stream_handlers.ts

@@ -81,6 +81,7 @@ import { parseAppMentions } from "@/shared/parse_mention_apps";
 import { prompts as promptsTable } from "../../db/schema";
 import { inArray } from "drizzle-orm";
 import { replacePromptReference } from "../utils/replacePromptReference";
+import { replaceSlashSkillReference } from "../utils/replaceSlashSkillReference";
 import { parsePlanFile, validatePlanId } from "./planUtils";
 import { ensureDyadGitignored } from "./gitignoreUtils";
 import { DYAD_MEDIA_DIR_NAME } from "../utils/media_path_utils";
@@ -375,6 +376,23 @@ export function registerChatStreamHandlers() {
         logger.error("Failed to inline referenced prompts:", e);
       }
 
+      // Expand /slug skill references (e.g. /webapp-testing) to prompt content
+      try {
+        const slashSkillPattern = /(?:^|\s)\/([a-zA-Z0-9-]+)(?=\s|$)/;
+        if (slashSkillPattern.test(userPrompt)) {
+          const allPrompts = db.select().from(promptsTable).all();
+          const promptsBySlug: Record<string, string> = {};
+          for (const p of allPrompts) {
+            if (p.slug && !promptsBySlug[p.slug]) {
+              promptsBySlug[p.slug] = p.content;
+            }
+          }
+          userPrompt = replaceSlashSkillReference(userPrompt, promptsBySlug);
+        }
+      } catch (e) {
+        logger.error("Failed to expand slash skill references:", e);
+      }
+
       // Expand /implement-plan= into full implementation prompt
       // Keep the original short form for display in the UI; the expanded
       // content is only injected into the AI message history.

src/ipc/handlers/prompt_handlers.ts

@@ -15,13 +15,14 @@ export function registerPromptHandlers() {
       title: r.title,
       description: r.description,
       content: r.content,
+      slug: r.slug,
       createdAt: r.createdAt,
       updatedAt: r.updatedAt,
     }));
   });
 
   createTypedHandler(promptContracts.create, async (_, params) => {
-    const { title, content, description } = params;
+    const { title, content, description, slug } = params;
     if (!title || !content) {
       throw new Error("Title and content are required");
     }
@@ -31,6 +32,7 @@ export function registerPromptHandlers() {
         title,
         description,
         content,
+        slug: slug ?? null,
       })
       .run();
 
@@ -42,19 +44,21 @@ export function registerPromptHandlers() {
       title: row.title,
       description: row.description,
       content: row.content,
+      slug: row.slug,
       createdAt: row.createdAt,
       updatedAt: row.updatedAt,
     };
   });
 
   createTypedHandler(promptContracts.update, async (_, params) => {
-    const { id, title, content, description } = params;
+    const { id, title, content, description, slug } = params;
     if (!id) throw new Error("Prompt id is required");
     const now = new Date();
     const updateData: Record<string, any> = { updatedAt: now };
     if (title !== undefined) updateData.title = title;
     if (content !== undefined) updateData.content = content;
     if (description !== undefined) updateData.description = description;
+    if (slug !== undefined) updateData.slug = slug ?? null;
     db.update(prompts).set(updateData).where(eq(prompts.id, id)).run();
   });
 

src/ipc/types/prompts.ts

@@ -5,11 +5,23 @@ import { defineContract, createClient } from "../contracts/core";
 // Prompt Schemas
 // =============================================================================
 
+const slugSchema = z
+  .string()
+  .optional()
+  .nullable()
+  .refine(
+    (s) =>
+      s === undefined || s === null || s === "" || /^[a-zA-Z0-9-]+$/.test(s),
+    "Slug must be letters, numbers, and hyphens only",
+  )
+  .transform((s) => (s === "" ? undefined : s));
+
 export const PromptDtoSchema = z.object({
   id: z.number(),
   title: z.string(),
   description: z.string().nullable(),
   content: z.string(),
+  slug: z.string().nullable(),
   createdAt: z.date(),
   updatedAt: z.date(),
 });
@@ -20,6 +32,7 @@ export const CreatePromptParamsDtoSchema = z.object({
   title: z.string(),
   description: z.string().optional(),
   content: z.string(),
+  slug: slugSchema,
 });
 
 export type CreatePromptParamsDto = z.infer<typeof CreatePromptParamsDtoSchema>;
@@ -29,6 +42,7 @@ export const UpdatePromptParamsDtoSchema = z.object({
   title: z.string().optional(),
   description: z.string().optional(),
   content: z.string().optional(),
+  slug: slugSchema,
 });
 
 export type UpdatePromptParamsDto = z.infer<typeof UpdatePromptParamsDtoSchema>;

src/ipc/utils/replaceSlashSkillReference.ts

+/**
+ * Returns the explicit slug for a prompt, or null if none is set.
+ */
+export function slugForPrompt(p: {
+  title: string;
+  slug: string | null;
+}): string | null {
+  return p.slug || null;
+}
+
+/**
+ * Replaces slash-skill references like /webapp-testing with the corresponding
+ * prompt content. Only matches /slug when slug is a single token (letters,
+ * numbers, hyphens) at word boundary (start of string or after
+ * whitespace, and followed by space or end).
+ */
+export function replaceSlashSkillReference(
+  userPrompt: string,
+  promptsBySlug: Record<string, string>,
+): string {
+  if (typeof userPrompt !== "string" || userPrompt.length === 0)
+    return userPrompt;
+  if (Object.keys(promptsBySlug).length === 0) return userPrompt;
+
+  return userPrompt.replace(
+    /(^|\s)\/([a-zA-Z0-9-]+)(?=\s|$)/g,
+    (match: string, before: string, slug: string) => {
+      const content = promptsBySlug[slug];
+      return content !== undefined ? `${before}${content}` : match;
+    },
+  );
+}

src/pages/library.tsx

@@ -85,6 +85,8 @@ export default function LibraryPage() {
   );
 }
 
+import { slugForPrompt } from "@/ipc/utils/replaceSlashSkillReference";
+
 function PromptCard({
   prompt,
   onUpdate,
@@ -95,15 +97,18 @@ function PromptCard({
     title: string;
     description: string | null;
     content: string;
+    slug: string | null;
   };
   onUpdate: (p: {
     id: number;
     title: string;
     description?: string;
     content: string;
+    slug?: string | null;
   }) => Promise<void>;
   onDelete: (id: number) => Promise<void>;
 }) {
+  const slashCommand = slugForPrompt(prompt);
   return (
     <div
       data-testid="prompt-card"
@@ -118,6 +123,11 @@ function PromptCard({
                 {prompt.description}
               </p>
             )}
+            {slashCommand && (
+              <p className="text-xs text-muted-foreground mt-1 font-mono">
+                Use /{slashCommand} in chat
+              </p>
+            )}
           </div>
           <div className="flex gap-2">
             <CreateOrEditPromptDialog