From ced4f71f96a064f4fddf9a16b9dfbb7ebffab2e3 Mon Sep 17 00:00:00 2001
From: Simos Mikelatos <simosmik@gmail.com>
Date: Fri, 3 Jul 2026 23:10:49 +0000
Subject: [PATCH] fix: skill folder picker

---
 src/components/skills/view/ProviderSkills.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/skills/view/ProviderSkills.tsx b/src/components/skills/view/ProviderSkills.tsx
index f7077209..42f7159c 100644
--- a/src/components/skills/view/ProviderSkills.tsx
+++ b/src/components/skills/view/ProviderSkills.tsx
@@ -219,7 +219,7 @@ export default function ProviderSkills({ selectedProvider, currentProjects }: Pr
   const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
   const [showInstallPath, setShowInstallPath] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const folderInputRef = useRef<HTMLInputElement>(null);
+  const folderInputRef = useRef<HTMLInputElement | null>(null);
 
   const providerName = PROVIDER_NAMES[selectedProvider];
   const providerPath = selectedProvider === 'opencode' ? null : PROVIDER_SKILL_PATHS[selectedProvider];
@@ -234,9 +234,14 @@ export default function ProviderSkills({ selectedProvider, currentProjects }: Pr
     setJustInstalled(false);
   }, [selectedProvider]);
 
-  useEffect(() => {
-    folderInputRef.current?.setAttribute('webkitdirectory', '');
-    folderInputRef.current?.setAttribute('directory', '');
+  const setFolderInputRef = useCallback((node: HTMLInputElement | null) => {
+    folderInputRef.current = node;
+    if (!node) {
+      return;
+    }
+
+    node.setAttribute('webkitdirectory', '');
+    node.setAttribute('directory', '');
   }, []);
 
   const filteredSkills = useMemo(() => {
@@ -407,7 +412,7 @@ export default function ProviderSkills({ selectedProvider, currentProjects }: Pr
           }}
         />
         <input
-          ref={folderInputRef}
+          ref={setFolderInputRef}
           type="file"
           multiple
           className="hidden"