diff --git a/web/app/components/base/modal/index.tsx b/web/app/components/base/modal/index.tsx
index 192fb7b70a..0e15613a7e 100644
--- a/web/app/components/base/modal/index.tsx
+++ b/web/app/components/base/modal/index.tsx
@@ -19,6 +19,7 @@ type IModal = {
   highPriority?: boolean // For modals that need to appear above dropdowns
   overlayOpacity?: boolean // For semi-transparent overlay instead of default
   clickOutsideNotClose?: boolean // Prevent closing when clicking outside modal
+  initialFocus?: React.RefObject<HTMLElement | null>
 }
 
 export default function Modal({
@@ -35,10 +36,11 @@ export default function Modal({
   highPriority = false,
   overlayOpacity = false,
   clickOutsideNotClose = false,
+  initialFocus,
 }: IModal) {
   return (
     <Transition appear show={isShow} as={Fragment}>
-      <Dialog as="div" className={cn('relative', highPriority ? 'z-[1100]' : 'z-[60]', wrapperClassName)} onClose={clickOutsideNotClose ? noop : onClose}>
+      <Dialog as="div" className={cn('relative', highPriority ? 'z-[1100]' : 'z-[60]', wrapperClassName)} onClose={clickOutsideNotClose ? noop : onClose} initialFocus={initialFocus}>
         <TransitionChild>
           <div className={cn('fixed inset-0', overlayOpacity ? 'bg-workflow-canvas-canvas-overlay' : 'bg-background-overlay', 'duration-300 ease-in data-[closed]:opacity-0', 'data-[enter]:opacity-100', 'data-[leave]:opacity-0')} />
         </TransitionChild>
diff --git a/web/app/components/workflow/skill/start-tab/create-blank-skill-modal.tsx b/web/app/components/workflow/skill/start-tab/create-blank-skill-modal.tsx
index fe5e6c2556..499008e31b 100644
--- a/web/app/components/workflow/skill/start-tab/create-blank-skill-modal.tsx
+++ b/web/app/components/workflow/skill/start-tab/create-blank-skill-modal.tsx
@@ -46,6 +46,8 @@ const CreateBlankSkillModal = ({ isOpen, onClose }: CreateBlankSkillModalProps)
 
   const { data: existingNames } = useExistingSkillNames()
 
+  const inputRef = useRef<HTMLInputElement>(null)
+
   const trimmedName = skillName.trim()
   const isDuplicate = !!trimmedName && (existingNames?.has(trimmedName) ?? false)
   const canCreate = !!trimmedName && !isDuplicate && !isCreating
@@ -116,18 +118,19 @@ const CreateBlankSkillModal = ({ isOpen, onClose }: CreateBlankSkillModalProps)
       title={t('skill.startTab.createModal.title', { ns: 'workflow' })}
       closable={!isCreating}
       clickOutsideNotClose={isCreating}
+      initialFocus={inputRef}
     >
       <div className="mt-6 flex flex-col gap-1">
         <label className="system-sm-semibold text-text-secondary">
           {t('skill.startTab.createModal.nameLabel', { ns: 'workflow' })}
         </label>
         <Input
+          ref={inputRef}
           value={skillName}
           onChange={e => setSkillName(e.target.value)}
           placeholder={t('skill.startTab.createModal.namePlaceholder', { ns: 'workflow' }) || ''}
           destructive={isDuplicate}
           disabled={isCreating}
-          autoFocus
           onKeyDown={(e) => {
             if (e.key === 'Enter' && canCreate)
               handleCreate()