diff --git a/src/components/skills/view/ProviderSkills.tsx b/src/components/skills/view/ProviderSkills.tsx
index 21fc8cb8..9dbf41ce 100644
--- a/src/components/skills/view/ProviderSkills.tsx
+++ b/src/components/skills/view/ProviderSkills.tsx
@@ -26,9 +26,6 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
-  Dialog,
-  DialogContent,
-  DialogTitle,
   Input,
 } from '../../../shared/view/ui';
 import { useProviderSkills } from '../hooks/useProviderSkills';
@@ -670,72 +667,94 @@ export default function ProviderSkills({ selectedProvider, currentProjects }: Pr
         </div>
       </div>
 
-      <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
-        <DialogContent className="max-h-[90vh] max-w-3xl overflow-y-auto p-0">
-          <DialogTitle>Add Skill</DialogTitle>
-          <div className="border-b border-border/60 px-4 py-4">
-            <div className="flex items-start gap-3">
-              <div className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border/70 bg-muted/20 text-muted-foreground">
-                {addMode === 'hub' ? <Compass className="h-4 w-4" /> : <FileUp className="h-4 w-4" />}
-              </div>
-              <div className="min-w-0 flex-1">
-                <div className="text-base font-medium text-foreground">Add {providerName} Skill</div>
-                <div className="mt-1 text-sm text-muted-foreground">
-                  {selectedProvider === 'hermes'
-                    ? 'Upload a local skill or install one from the Hermes Skills Hub.'
-                    : 'Upload a markdown skill file or a complete skill folder.'}
+      {isAddDialogOpen && (
+        <div className="fixed inset-0 z-[10000] flex items-center justify-center p-4">
+          <button
+            type="button"
+            aria-label="Close add skill dialog"
+            className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+            onClick={() => setIsAddDialogOpen(false)}
+          />
+          <div
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="add-skill-title"
+            className="relative z-[10001] max-h-[90vh] w-full max-w-3xl overflow-y-auto rounded-xl border bg-popover text-popover-foreground shadow-lg"
+          >
+            <div className="border-b border-border/60 px-4 py-4">
+              <div className="flex items-start gap-3">
+                <div className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border/70 bg-muted/20 text-muted-foreground">
+                  {addMode === 'hub' ? <Compass className="h-4 w-4" /> : <FileUp className="h-4 w-4" />}
                 </div>
+                <div className="min-w-0 flex-1">
+                  <div id="add-skill-title" className="text-base font-medium text-foreground">Add {providerName} Skill</div>
+                  <div className="mt-1 text-sm text-muted-foreground">
+                    {selectedProvider === 'hermes'
+                      ? 'Upload a local skill or install one from the Hermes Skills Hub.'
+                      : 'Upload a markdown skill file or a complete skill folder.'}
+                  </div>
+                </div>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+                  aria-label="Close add skill dialog"
+                  onClick={() => setIsAddDialogOpen(false)}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
               </div>
+
+              {selectedProvider === 'hermes' && (
+                <div className="mt-4 inline-flex rounded-lg border border-border/70 bg-muted/20 p-1">
+                  <button
+                    type="button"
+                    className={cn(
+                      'inline-flex h-8 items-center gap-2 rounded-md px-3 text-sm transition-colors',
+                      addMode === 'upload'
+                        ? 'bg-background text-foreground shadow-sm'
+                        : 'text-muted-foreground hover:text-foreground',
+                    )}
+                    onClick={() => setAddMode('upload')}
+                  >
+                    <FileUp className="h-4 w-4" />
+                    Upload
+                  </button>
+                  <button
+                    type="button"
+                    className={cn(
+                      'inline-flex h-8 items-center gap-2 rounded-md px-3 text-sm transition-colors',
+                      addMode === 'hub'
+                        ? 'bg-background text-foreground shadow-sm'
+                        : 'text-muted-foreground hover:text-foreground',
+                    )}
+                    onClick={() => setAddMode('hub')}
+                  >
+                    <Compass className="h-4 w-4" />
+                    Skills Hub
+                  </button>
+                </div>
+              )}
             </div>
 
-            {selectedProvider === 'hermes' && (
-              <div className="mt-4 inline-flex rounded-lg border border-border/70 bg-muted/20 p-1">
-                <button
-                  type="button"
-                  className={cn(
-                    'inline-flex h-8 items-center gap-2 rounded-md px-3 text-sm transition-colors',
-                    addMode === 'upload'
-                      ? 'bg-background text-foreground shadow-sm'
-                      : 'text-muted-foreground hover:text-foreground',
-                  )}
-                  onClick={() => setAddMode('upload')}
-                >
-                  <FileUp className="h-4 w-4" />
-                  Upload
-                </button>
-                <button
-                  type="button"
-                  className={cn(
-                    'inline-flex h-8 items-center gap-2 rounded-md px-3 text-sm transition-colors',
-                    addMode === 'hub'
-                      ? 'bg-background text-foreground shadow-sm'
-                      : 'text-muted-foreground hover:text-foreground',
-                  )}
-                  onClick={() => setAddMode('hub')}
-                >
-                  <Compass className="h-4 w-4" />
-                  Skills Hub
-                </button>
-              </div>
-            )}
-          </div>
+            <div className="space-y-4 p-4">
+              {addMode === 'hub' && hermesHubPanel ? hermesHubPanel : uploadPanel}
 
-          <div className="space-y-4 p-4">
-            {addMode === 'hub' && hermesHubPanel ? hermesHubPanel : uploadPanel}
-
-            {(submitError || loadError || registryError || registryStatus || saveStatus === 'success') && (
-              <div className={cn(
-                'rounded-lg border px-3 py-2 text-sm',
-                submitError || loadError || registryError
-                  ? 'border-red-200 bg-red-50 text-red-700 dark:border-red-800/60 dark:bg-red-900/20 dark:text-red-200'
-                  : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300',
-              )}>
-                {submitError || loadError || registryError || registryStatus || 'Skills saved successfully.'}
-              </div>
-            )}
+              {(submitError || loadError || registryError || registryStatus || saveStatus === 'success') && (
+                <div className={cn(
+                  'rounded-lg border px-3 py-2 text-sm',
+                  submitError || loadError || registryError
+                    ? 'border-red-200 bg-red-50 text-red-700 dark:border-red-800/60 dark:bg-red-900/20 dark:text-red-200'
+                    : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300',
+                )}>
+                  {submitError || loadError || registryError || registryStatus || 'Skills saved successfully.'}
+                </div>
+              )}
+            </div>
           </div>
-        </DialogContent>
-      </Dialog>
+        </div>
+      )}
 
       {saveStatus === 'success' && !isAddDialogOpen && (
         <div className="inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3 py-1 text-xs font-medium text-emerald-700 dark:text-emerald-300">