diff --git a/web/src/components/ShortcutsModal.tsx b/web/src/components/ShortcutsModal.tsx
index ecd7b831..50697b0b 100644
--- a/web/src/components/ShortcutsModal.tsx
+++ b/web/src/components/ShortcutsModal.tsx
@@ -1,7 +1,6 @@
-import { useEffect } from 'react';
-import { X } from 'lucide-react';
 import { useUIStore } from '../stores/uiStore';
 import { formatCombo, type ShortcutCombo } from '../utils/keyboard';
+import { Modal } from './ui/Modal';
 
 interface DisplayShortcut {
   combo: ShortcutCombo;
@@ -51,65 +50,31 @@ export function ShortcutsModal() {
   const open = useUIStore((s) => s.shortcutsModalOpen);
   const close = useUIStore((s) => s.closeShortcutsModal);
 
-  // Local Esc handler — runs *before* the document-level shortcut listeners
-  // because modal mount captures it first when focus is inside.
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        e.stopPropagation();
-        close();
-      }
-    };
-    document.addEventListener('keydown', onKey, true); // capture phase = wins
-    return () => document.removeEventListener('keydown', onKey, true);
-  }, [open, close]);
-
-  if (!open) return null;
-
+  // The capture-phase Escape handling this component used to own is now
+  // the Modal's job, along with the focus trap it never had.
   return (
-    <div
-      className="fixed inset-0 bg-black/60 flex items-center justify-center z-50"
-      onClick={close}
-    >
-      <div
-        className="bg-surface-raised border border-border-subtle rounded-xl w-[520px] max-w-[90vw] max-h-[80vh] flex flex-col"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="flex items-center justify-between px-5 py-3 border-b border-border">
-          <h2 className="text-[15px] font-semibold">Keyboard shortcuts</h2>
-          <button
-            onClick={close}
-            className="text-text-faint hover:text-text-muted cursor-pointer p-1"
-            title="Close"
-          >
-            <X size={18} />
-          </button>
-        </div>
-
-        <div className="overflow-y-auto p-5 space-y-5">
-          {SECTIONS.map((section) => (
-            <div key={section.title}>
-              <h3 className="text-[11px] uppercase tracking-wider text-text-faint font-medium mb-2">
-                {section.title}
-              </h3>
-              <div className="space-y-1.5">
-                {section.items.map((item, idx) => (
-                  <div
-                    key={idx}
-                    className="flex items-center justify-between gap-4 py-1"
-                  >
-                    <span className="text-[13px] text-text-secondary">{item.description}</span>
-                    <Kbd combo={item.combo} />
-                  </div>
-                ))}
-              </div>
+    <Modal open={open} onClose={close} title="Keyboard shortcuts" size="lg">
+      <div className="p-5 space-y-5">
+        {SECTIONS.map((section) => (
+          <div key={section.title}>
+            <h3 className="text-[11px] uppercase tracking-wider text-text-faint font-medium mb-2">
+              {section.title}
+            </h3>
+            <div className="space-y-1.5">
+              {section.items.map((item, idx) => (
+                <div
+                  key={idx}
+                  className="flex items-center justify-between gap-4 py-1"
+                >
+                  <span className="text-[13px] text-text-secondary">{item.description}</span>
+                  <Kbd combo={item.combo} />
+                </div>
+              ))}
             </div>
-          ))}
-        </div>
+          </div>
+        ))}
       </div>
-    </div>
+    </Modal>
   );
 }
 
diff --git a/web/src/components/Tasks/TaskCreateDialog.tsx b/web/src/components/Tasks/TaskCreateDialog.tsx
index 37de8333..e560d225 100644
--- a/web/src/components/Tasks/TaskCreateDialog.tsx
+++ b/web/src/components/Tasks/TaskCreateDialog.tsx
@@ -1,5 +1,7 @@
 import { useState } from 'react';
-import { X } from 'lucide-react';
+import { Modal } from '../ui/Modal';
+
+const FORM_ID = 'task-create-form';
 
 export function TaskCreateDialog({ onClose, onCreate }: {
   onClose: () => void;
@@ -16,55 +18,63 @@ export function TaskCreateDialog({ onClose, onCreate }: {
   };
 
   return (
-    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50" onClick={onClose}>
-      <div className="bg-surface-raised border border-border-subtle rounded-xl w-[480px] max-w-[90vw]" onClick={e => e.stopPropagation()}>
-        <div className="flex items-center justify-between px-5 py-3 border-b border-border">
-          <h2 className="text-[15px] font-semibold">New Task</h2>
-          <button onClick={onClose} className="text-text-faint hover:text-text-muted cursor-pointer p-1">
-            <X size={18} />
+    <Modal
+      open
+      onClose={onClose}
+      title="New Task"
+      // A stray backdrop click shouldn't bin a half-typed task.
+      closeOnBackdrop={false}
+      footer={
+        <>
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-4 py-2 text-[13px] text-text-muted hover:text-text-secondary cursor-pointer"
+          >
+            Cancel
+          </button>
+          {/* Outside the <form>, associated by id — keeps the button in the
+              modal's footer slot while Enter-to-submit still works. */}
+          <button
+            type="submit"
+            form={FORM_ID}
+            className="px-4 py-2 text-[13px] bg-accent hover:bg-accent-hover text-white rounded-lg cursor-pointer disabled:opacity-50"
+            disabled={!title.trim()}
+          >
+            Create
           </button>
+        </>
+      }
+    >
+      <form id={FORM_ID} onSubmit={handleSubmit} className="p-5 space-y-4">
+        <div>
+          <label className="block text-[12px] text-text-muted mb-1">Title</label>
+          <input
+            value={title}
+            onChange={e => setTitle(e.target.value)}
+            autoFocus
+            className="w-full px-3 py-2 bg-surface-raised border border-border-subtle rounded-lg text-[14px] text-text outline-none focus:border-accent/50"
+          />
+        </div>
+        <div>
+          <label className="block text-[12px] text-text-muted mb-1">Details</label>
+          <textarea
+            value={content}
+            onChange={e => setContent(e.target.value)}
+            rows={4}
+            className="w-full px-3 py-2 bg-surface-raised border border-border-subtle rounded-lg text-[14px] text-text outline-none focus:border-accent/50 resize-none"
+          />
+        </div>
+        <div>
+          <label className="block text-[12px] text-text-muted mb-1">Deadline</label>
+          <input
+            type="date"
+            value={deadline}
+            onChange={e => setDeadline(e.target.value)}
+            className="px-3 py-2 bg-surface-raised border border-border-subtle rounded-lg text-[14px] text-text outline-none focus:border-accent/50"
+          />
         </div>
-        <form onSubmit={handleSubmit} className="p-5 space-y-4">
-          <div>
-            <label className="block text-[12px] text-text-muted mb-1">Title</label>
-            <input
-              value={title}
-              onChange={e => setTitle(e.target.value)}
-              autoFocus
-              className="w-full px-3 py-2 bg-surface-raised border border-border-subtle rounded-lg text-[14px] text-text outline-none focus:border-accent/50"
-            />
-          </div>
-          <div>
-            <label className="block text-[12px] text-text-muted mb-1">Details</label>
-            <textarea
-              value={content}
-              onChange={e => setContent(e.target.value)}
-              rows={4}
-              className="w-full px-3 py-2 bg-surface-raised border border-border-subtle rounded-lg text-[14px] text-text outline-none focus:border-accent/50 resize-none"
-            />
-          </div>
-          <div>
-            <label className="block text-[12px] text-text-muted mb-1">Deadline</label>
-            <input
-              type="date"
-              value={deadline}
-              onChange={e => setDeadline(e.target.value)}
-              className="px-3 py-2 bg-surface-raised border border-border-subtle rounded-lg text-[14px] text-text outline-none focus:border-accent/50"
-            />
-          </div>
-          <div className="flex justify-end gap-2 pt-2">
-            <button type="button" onClick={onClose}
-              className="px-4 py-2 text-[13px] text-text-muted hover:text-text-muted cursor-pointer">
-              Cancel
-            </button>
-            <button type="submit"
-              className="px-4 py-2 text-[13px] bg-accent hover:bg-accent-hover text-white rounded-lg cursor-pointer disabled:opacity-50"
-              disabled={!title.trim()}>
-              Create
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
+      </form>
+    </Modal>
   );
 }
diff --git a/web/src/components/Tasks/TaskStatusManager.tsx b/web/src/components/Tasks/TaskStatusManager.tsx
index 1c86209e..72b4b626 100644
--- a/web/src/components/Tasks/TaskStatusManager.tsx
+++ b/web/src/components/Tasks/TaskStatusManager.tsx
@@ -5,6 +5,7 @@ import {
   statusBadgeStyle,
   type TaskStatusDef,
 } from '../../stores/taskStatusStore';
+import { Modal } from '../ui/Modal';
 
 const PALETTE = [
   '#ef4444', '#f97316', '#f59e0b', '#eab308', '#84cc16', '#22c55e',
@@ -100,26 +101,86 @@ export function TaskStatusManager({ onClose }: { onClose: () => void }) {
     finally { setBusy(false); }
   };
 
-  return (
-    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50" onClick={onClose}>
-      <div
-        className="bg-surface-raised border border-border-subtle rounded-xl w-[560px] max-w-[92vw] max-h-[85vh] flex flex-col"
-        onClick={e => e.stopPropagation()}
-      >
-        <div className="flex items-center justify-between px-5 py-3 border-b border-border">
-          <h2 className="text-[15px] font-semibold">Task Statuses</h2>
-          <button onClick={onClose} className="text-text-faint hover:text-text-muted cursor-pointer p-1">
-            <X size={18} />
-          </button>
-        </div>
+  // The add form is pinned below the scrolling status list, so it stays
+  // reachable however many statuses are configured. It's a form rather
+  // than a button row, hence the footer layout override.
+  const addStatusFooter = showAdd ? (
+    <div className="space-y-3">
+      <div className="flex gap-2">
+        <label
+          className="relative w-9 h-9 rounded-lg border border-border shrink-0 cursor-pointer"
+          style={{ backgroundColor: color }}
+          title="Pick a color"
+        >
+          <input
+            type="color"
+            value={color}
+            onChange={e => setColor(e.target.value)}
+            className="absolute inset-0 opacity-0 cursor-pointer"
+          />
+        </label>
+        <input
+          value={name}
+          onChange={e => setName(e.target.value)}
+          placeholder="name (e.g. in_review)"
+          autoFocus
+          className="flex-1 px-3 py-2 bg-surface border border-border-subtle rounded-lg text-[13px] text-text outline-none focus:border-accent/50"
+        />
+        <input
+          value={label}
+          onChange={e => setLabel(e.target.value)}
+          placeholder="Label (optional)"
+          className="flex-1 px-3 py-2 bg-surface border border-border-subtle rounded-lg text-[13px] text-text outline-none focus:border-accent/50"
+        />
+      </div>
+      <textarea
+        value={description}
+        onChange={e => setDescription(e.target.value)}
+        rows={2}
+        placeholder="Description (optional)"
+        className="w-full px-3 py-2 bg-surface border border-border-subtle rounded-lg text-[13px] text-text outline-none focus:border-accent/50 resize-none"
+      />
+      <div className="flex justify-end gap-2">
+        <button
+          onClick={resetAdd}
+          className="px-3 py-1.5 text-[13px] text-text-muted hover:text-text cursor-pointer"
+        >
+          Cancel
+        </button>
+        <button
+          onClick={handleCreate}
+          disabled={busy || !name.trim()}
+          className="flex items-center gap-1.5 px-3 py-1.5 text-[13px] bg-accent hover:bg-accent-hover text-white rounded-lg cursor-pointer disabled:opacity-50"
+        >
+          <Plus size={14} /> Add status
+        </button>
+      </div>
+    </div>
+  ) : (
+    <button
+      onClick={() => { setColor(randomColor()); setShowAdd(true); }}
+      className="flex items-center gap-1.5 px-3 py-1.5 text-[13px] text-accent hover:bg-accent/10 rounded-lg cursor-pointer"
+    >
+      <Plus size={14} /> New status
+    </button>
+  );
 
+  return (
+    <Modal
+      open
+      onClose={onClose}
+      title="Task Statuses"
+      size="xl"
+      footer={addStatusFooter}
+      footerClassName="p-4"
+    >
+      <div className="p-5 space-y-2">
         {error && (
-          <div className="mx-5 mt-3 px-3 py-2 text-[12px] text-hue-red bg-red-400/10 border border-red-400/20 rounded-lg">
+          <div className="px-3 py-2 mb-1 text-[12px] text-hue-red bg-red-400/10 border border-red-400/20 rounded-lg">
             {error}
           </div>
         )}
 
-        <div className="flex-1 overflow-y-auto p-5 space-y-2">
           {statuses.map(s => (
             <div key={s.name} className="border border-border-subtle rounded-lg p-3">
               <div className="flex items-center gap-3">
@@ -215,71 +276,7 @@ export function TaskStatusManager({ onClose }: { onClose: () => void }) {
               )}
             </div>
           ))}
-        </div>
-
-        <div className="border-t border-border p-4">
-          {showAdd ? (
-            <div className="space-y-3">
-              <div className="flex gap-2">
-                <label
-                  className="relative w-9 h-9 rounded-lg border border-border shrink-0 cursor-pointer"
-                  style={{ backgroundColor: color }}
-                  title="Pick a color"
-                >
-                  <input
-                    type="color"
-                    value={color}
-                    onChange={e => setColor(e.target.value)}
-                    className="absolute inset-0 opacity-0 cursor-pointer"
-                  />
-                </label>
-                <input
-                  value={name}
-                  onChange={e => setName(e.target.value)}
-                  placeholder="name (e.g. in_review)"
-                  autoFocus
-                  className="flex-1 px-3 py-2 bg-surface border border-border-subtle rounded-lg text-[13px] text-text outline-none focus:border-accent/50"
-                />
-                <input
-                  value={label}
-                  onChange={e => setLabel(e.target.value)}
-                  placeholder="Label (optional)"
-                  className="flex-1 px-3 py-2 bg-surface border border-border-subtle rounded-lg text-[13px] text-text outline-none focus:border-accent/50"
-                />
-              </div>
-              <textarea
-                value={description}
-                onChange={e => setDescription(e.target.value)}
-                rows={2}
-                placeholder="Description (optional)"
-                className="w-full px-3 py-2 bg-surface border border-border-subtle rounded-lg text-[13px] text-text outline-none focus:border-accent/50 resize-none"
-              />
-              <div className="flex justify-end gap-2">
-                <button
-                  onClick={resetAdd}
-                  className="px-3 py-1.5 text-[13px] text-text-muted hover:text-text cursor-pointer"
-                >
-                  Cancel
-                </button>
-                <button
-                  onClick={handleCreate}
-                  disabled={busy || !name.trim()}
-                  className="flex items-center gap-1.5 px-3 py-1.5 text-[13px] bg-accent hover:bg-accent-hover text-white rounded-lg cursor-pointer disabled:opacity-50"
-                >
-                  <Plus size={14} /> Add status
-                </button>
-              </div>
-            </div>
-          ) : (
-            <button
-              onClick={() => { setColor(randomColor()); setShowAdd(true); }}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-[13px] text-accent hover:bg-accent/10 rounded-lg cursor-pointer"
-            >
-              <Plus size={14} /> New status
-            </button>
-          )}
-        </div>
       </div>
-    </div>
+    </Modal>
   );
 }
diff --git a/web/src/components/ui/Modal.tsx b/web/src/components/ui/Modal.tsx
new file mode 100644
index 00000000..fcd9d46b
--- /dev/null
+++ b/web/src/components/ui/Modal.tsx
@@ -0,0 +1,259 @@
+import { useCallback, useEffect, useId, useRef, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+
+/**
+ * The app's one dialog primitive.
+ *
+ * Five dialogs were hand-rolled before this: each re-implemented the
+ * backdrop, one handled Escape, none trapped focus, none locked body
+ * scroll, and none carried dialog semantics for a screen reader. Behaviour
+ * that every dialog needs belongs in one place.
+ *
+ * Three details are load-bearing:
+ *
+ * **Escape is captured, not bubbled.** The app installs document-level
+ * shortcut handlers (App.tsx, ChatPage.tsx) that also claim Escape — to
+ * clear a search box, to stop generation. A bubble-phase listener here
+ * would fire *after* them, so closing a dialog could also stop a running
+ * generation behind it. Capture phase runs outermost-first, so the dialog
+ * sees the key and stops it before anything else does.
+ *
+ * **Only the topmost dialog reacts.** Every open Modal has a capture-phase
+ * listener, so without the stack below, one Escape would close a
+ * confirmation *and* the dialog that raised it.
+ *
+ * **Focus is trapped and restored.** Tab must not walk into the page
+ * behind the backdrop, and dismissing a dialog has to put focus back where
+ * the user left it, or keyboard navigation restarts from the top of the
+ * document.
+ */
+
+/**
+ * Open dialogs, oldest first. Module-level rather than context so a dialog
+ * rendered anywhere in the tree participates without a provider.
+ */
+const modalStack: string[] = [];
+
+/**
+ * Body scroll lock, refcounted so stacked dialogs don't unlock early.
+ *
+ * The count is deliberately its own thing rather than a read of
+ * `modalStack.length`. React runs effect cleanups in declaration order, so
+ * this cleanup fires while the dialog is still in the stack — reading the
+ * stack here would see a length of 1 on the last dialog out and never
+ * restore scrolling at all.
+ */
+let scrollLockCount = 0;
+let scrollLockPrevious = '';
+
+function useScrollLock(active: boolean) {
+  useEffect(() => {
+    if (!active) return;
+    if (scrollLockCount === 0) {
+      scrollLockPrevious = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+    }
+    scrollLockCount += 1;
+    return () => {
+      scrollLockCount -= 1;
+      // Only the last dialog out restores the original value — an inner
+      // dialog closing must not re-enable scrolling under an outer one.
+      if (scrollLockCount === 0) {
+        document.body.style.overflow = scrollLockPrevious;
+      }
+    };
+  }, [active]);
+}
+
+const FOCUSABLE = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',');
+
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
+
+const SIZES: Record<ModalSize, string> = {
+  sm: 'w-[360px] max-w-[90vw]',
+  md: 'w-[480px] max-w-[90vw]',
+  lg: 'w-[520px] max-w-[90vw]',
+  xl: 'w-[620px] max-w-[92vw]',
+};
+
+export interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  /** Renders the header bar with a close button. Omit for a bare panel. */
+  title?: ReactNode;
+  size?: ModalSize;
+  children: ReactNode;
+  /** Pinned below the scrolling body, for action buttons. */
+  footer?: ReactNode;
+  /**
+   * Layout for the footer region. Defaults to a right-aligned button row;
+   * override for footers that are a form rather than a set of actions.
+   * The separator and `shrink-0` are always applied.
+   */
+  footerClassName?: string;
+  /** Set false for dialogs where a stray click shouldn't discard input. */
+  closeOnBackdrop?: boolean;
+  /** Extra classes on the panel (e.g. a taller max-height). */
+  className?: string;
+  /** Accessible name when there's no visible `title`. */
+  ariaLabel?: string;
+}
+
+export function Modal({
+  open,
+  onClose,
+  title,
+  size = 'md',
+  children,
+  footer,
+  footerClassName = 'px-5 py-3 flex justify-end gap-2',
+  closeOnBackdrop = true,
+  className = '',
+  ariaLabel,
+}: ModalProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+  const restoreFocusRef = useRef<HTMLElement | null>(null);
+  const titleId = useId();
+  const id = useId();
+
+  useScrollLock(open);
+
+  // Register in the stack for the lifetime of the open state, so the
+  // Escape handler and the scroll lock both know who is on top.
+  useEffect(() => {
+    if (!open) return;
+    modalStack.push(id);
+    return () => {
+      const at = modalStack.indexOf(id);
+      if (at !== -1) modalStack.splice(at, 1);
+    };
+  }, [open, id]);
+
+  const isTopmost = useCallback(
+    () => modalStack[modalStack.length - 1] === id,
+    [id],
+  );
+
+  // Escape + focus trap. Capture phase so this beats the global handlers.
+  useEffect(() => {
+    if (!open) return;
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        if (!isTopmost()) return;
+        e.preventDefault();
+        e.stopPropagation();
+        onClose();
+        return;
+      }
+
+      if (e.key !== 'Tab' || !isTopmost()) return;
+      const panel = panelRef.current;
+      if (!panel) return;
+
+      const focusable = Array.from(
+        panel.querySelectorAll<HTMLElement>(FOCUSABLE),
+      ).filter((el) => el.offsetParent !== null || el === document.activeElement);
+      if (focusable.length === 0) {
+        // Nothing tabbable inside — keep focus on the panel rather than
+        // letting Tab escape to the page behind the backdrop.
+        e.preventDefault();
+        panel.focus();
+        return;
+      }
+
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const active = document.activeElement as HTMLElement | null;
+
+      // Wrap at both ends, and pull focus back in if it has drifted out
+      // (which happens when the previously focused node is unmounted).
+      if (e.shiftKey && (active === first || !panel.contains(active))) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && (active === last || !panel.contains(active))) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+
+    document.addEventListener('keydown', onKeyDown, true);
+    return () => document.removeEventListener('keydown', onKeyDown, true);
+  }, [open, onClose, isTopmost]);
+
+  // Move focus in on open, and put it back on close.
+  useEffect(() => {
+    if (!open) return;
+    restoreFocusRef.current = document.activeElement as HTMLElement | null;
+
+    // After paint, so children that autoFocus have already claimed it.
+    const raf = requestAnimationFrame(() => {
+      const panel = panelRef.current;
+      if (!panel || panel.contains(document.activeElement)) return;
+      const target = panel.querySelector<HTMLElement>(FOCUSABLE);
+      (target ?? panel).focus();
+    });
+
+    return () => {
+      cancelAnimationFrame(raf);
+      restoreFocusRef.current?.focus?.();
+    };
+  }, [open]);
+
+  if (!open) return null;
+
+  return createPortal(
+    <div
+      className="modal-backdrop fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4"
+      onMouseDown={(e) => {
+        // mousedown, not click: a click fires on the backdrop when a drag
+        // that *started* inside the panel (selecting text, dragging a
+        // slider) is released outside it, which would discard the dialog.
+        if (closeOnBackdrop && e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title ? titleId : undefined}
+        aria-label={title ? undefined : ariaLabel}
+        tabIndex={-1}
+        className={`modal-panel bg-surface-raised border border-border-subtle rounded-xl flex flex-col max-h-[85vh] outline-none ${SIZES[size]} ${className}`}
+      >
+        {title && (
+          <div className="flex items-center justify-between px-5 py-3 border-b border-border shrink-0">
+            <h2 id={titleId} className="text-[15px] font-semibold">
+              {title}
+            </h2>
+            <button
+              onClick={onClose}
+              className="text-text-faint hover:text-text-muted cursor-pointer p-1"
+              aria-label="Close dialog"
+              title="Close"
+            >
+              <X size={18} />
+            </button>
+          </div>
+        )}
+
+        <div className="flex-1 overflow-y-auto min-h-0">{children}</div>
+
+        {footer && (
+          <div className={`border-t border-border shrink-0 ${footerClassName}`}>
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>,
+    document.body,
+  );
+}
diff --git a/web/src/index.css b/web/src/index.css
index 68789f89..8ac9c821 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -408,6 +408,37 @@ body {
 .question-option:nth-child(3) { animation-delay: 0.15s; }
 .question-option:nth-child(4) { animation-delay: 0.2s; }
 
+/* Modal (components/ui/Modal.tsx) */
+@keyframes modal-backdrop-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.modal-backdrop {
+  animation: modal-backdrop-in 0.12s ease-out;
+}
+@keyframes modal-panel-in {
+  from { opacity: 0; transform: translateY(8px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+.modal-panel {
+  animation: modal-panel-in 0.15s ease-out;
+}
+
+/* Motion is decoration here — every animation above is an entrance, so
+   dropping them costs nothing but the flourish. Vestibular triggers are
+   the transform-based ones; opacity fades are left alone. */
+@media (prefers-reduced-motion: reduce) {
+  .modal-panel,
+  .todo-row,
+  .quote-card,
+  .rewrite-card,
+  .plan-panel,
+  .question-block,
+  .question-option {
+    animation: none;
+  }
+}
+
 /* Line clamp utility */
 .line-clamp-2 {
   display: -webkit-box;
diff --git a/web/src/pages/SkillDetailPage.tsx b/web/src/pages/SkillDetailPage.tsx
index be46ff79..3eb3d8c9 100644
--- a/web/src/pages/SkillDetailPage.tsx
+++ b/web/src/pages/SkillDetailPage.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { ArrowLeft, Save, Trash2, Zap, CheckCircle, XCircle, Clock, FileText } from 'lucide-react';
 import { useSkillsStore } from '../stores/skillsStore';
+import { Modal } from '../components/ui/Modal';
 
 function UsageBar({ total, success }: { total: number; success: number }) {
   if (total === 0) return null;
@@ -252,28 +253,30 @@ export function SkillDetailPage() {
       </div>
 
       {/* Delete Confirmation */}
-      {showDeleteConfirm && (
-        <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50" onClick={() => setShowDeleteConfirm(false)}>
-          <div className="bg-surface-raised border border-border rounded-lg p-4 w-[360px]" onClick={e => e.stopPropagation()}>
-            <h3 className="text-sm font-medium text-text mb-2">Delete Skill</h3>
-            <p className="text-xs text-text-muted mb-4">
-              This will permanently delete <strong>{selectedSkill.name}</strong> and all its files. This cannot be undone.
-            </p>
-            <div className="flex justify-end gap-2">
-              <button onClick={() => setShowDeleteConfirm(false)} className="px-3 py-1.5 text-xs text-text-muted hover:text-text-secondary cursor-pointer">
-                Cancel
-              </button>
-              <button
-                onClick={handleDelete}
-                disabled={actionLoading}
-                className="px-3 py-1.5 text-xs bg-red-600 text-white rounded hover:bg-red-700 cursor-pointer disabled:opacity-50"
-              >
-                {actionLoading ? 'Deleting...' : 'Delete'}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
+      <Modal
+        open={showDeleteConfirm}
+        onClose={() => setShowDeleteConfirm(false)}
+        title="Delete Skill"
+        size="sm"
+        footer={
+          <>
+            <button onClick={() => setShowDeleteConfirm(false)} className="px-3 py-1.5 text-xs text-text-muted hover:text-text-secondary cursor-pointer">
+              Cancel
+            </button>
+            <button
+              onClick={handleDelete}
+              disabled={actionLoading}
+              className="px-3 py-1.5 text-xs bg-red-600 text-white rounded hover:bg-red-700 cursor-pointer disabled:opacity-50"
+            >
+              {actionLoading ? 'Deleting...' : 'Delete'}
+            </button>
+          </>
+        }
+      >
+        <p className="px-5 py-4 text-xs text-text-muted">
+          This will permanently delete <strong>{selectedSkill.name}</strong> and all its files. This cannot be undone.
+        </p>
+      </Modal>
     </div>
   );
 }
diff --git a/web/src/pages/SkillsPage.tsx b/web/src/pages/SkillsPage.tsx
index b63660b8..ec9c6ce3 100644
--- a/web/src/pages/SkillsPage.tsx
+++ b/web/src/pages/SkillsPage.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Plus, RefreshCw, Zap, CheckCircle, XCircle, Clock } from 'lucide-react';
 import { useSkillsStore, type Skill } from '../stores/skillsStore';
+import { Modal } from '../components/ui/Modal';
 
 function SkillCard({ skill }: { skill: Skill }) {
   const navigate = useNavigate();
@@ -77,39 +78,15 @@ function CreateSkillDialog() {
   };
 
   return (
-    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50" onClick={() => setShowCreateDialog(false)}>
-      <div className="bg-surface-raised border border-border rounded-lg w-[500px] max-h-[80vh] overflow-auto" onClick={e => e.stopPropagation()}>
-        <div className="p-4 border-b border-border">
-          <h2 className="text-sm font-medium text-text">New Skill</h2>
-        </div>
-        <div className="p-4 space-y-3">
-          <div>
-            <label className="text-xs text-text-muted block mb-1">Name</label>
-            <input
-              value={name} onChange={e => setName(e.target.value)}
-              className="w-full bg-bg border border-border rounded px-3 py-1.5 text-sm text-text outline-none focus:border-accent"
-              placeholder="e.g. code-review"
-              autoFocus
-            />
-          </div>
-          <div>
-            <label className="text-xs text-text-muted block mb-1">Description</label>
-            <textarea
-              value={description} onChange={e => setDescription(e.target.value)}
-              className="w-full bg-bg border border-border rounded px-3 py-1.5 text-sm text-text outline-none focus:border-accent min-h-[60px] resize-y"
-              placeholder='This skill should be used when the user asks to "review code"...'
-            />
-          </div>
-          <div>
-            <label className="text-xs text-text-muted block mb-1">Instructions (optional)</label>
-            <textarea
-              value={content} onChange={e => setContent(e.target.value)}
-              className="w-full bg-bg border border-border rounded px-3 py-1.5 text-sm text-text outline-none focus:border-accent min-h-[120px] resize-y font-mono text-xs"
-              placeholder="Markdown instructions for the agent..."
-            />
-          </div>
-        </div>
-        <div className="p-4 border-t border-border flex justify-end gap-2">
+    <Modal
+      open
+      onClose={() => setShowCreateDialog(false)}
+      title="New Skill"
+      size="lg"
+      // Three fields of typing behind a backdrop click is too much to lose.
+      closeOnBackdrop={false}
+      footer={
+        <>
           <button onClick={() => setShowCreateDialog(false)} className="px-3 py-1.5 text-xs text-text-muted hover:text-text-secondary cursor-pointer">
             Cancel
           </button>
@@ -120,9 +97,37 @@ function CreateSkillDialog() {
           >
             {actionLoading ? 'Creating...' : 'Create Skill'}
           </button>
+        </>
+      }
+    >
+      <div className="p-4 space-y-3">
+        <div>
+          <label className="text-xs text-text-muted block mb-1">Name</label>
+          <input
+            value={name} onChange={e => setName(e.target.value)}
+            className="w-full bg-bg border border-border rounded px-3 py-1.5 text-sm text-text outline-none focus:border-accent"
+            placeholder="e.g. code-review"
+            autoFocus
+          />
+        </div>
+        <div>
+          <label className="text-xs text-text-muted block mb-1">Description</label>
+          <textarea
+            value={description} onChange={e => setDescription(e.target.value)}
+            className="w-full bg-bg border border-border rounded px-3 py-1.5 text-sm text-text outline-none focus:border-accent min-h-[60px] resize-y"
+            placeholder='This skill should be used when the user asks to "review code"...'
+          />
+        </div>
+        <div>
+          <label className="text-xs text-text-muted block mb-1">Instructions (optional)</label>
+          <textarea
+            value={content} onChange={e => setContent(e.target.value)}
+            className="w-full bg-bg border border-border rounded px-3 py-1.5 text-sm text-text outline-none focus:border-accent min-h-[120px] resize-y font-mono text-xs"
+            placeholder="Markdown instructions for the agent..."
+          />
         </div>
       </div>
-    </div>
+    </Modal>
   );
 }