feat: add insert @ info

web/app/components/workflow/skill/start-tab/create-import-section.tsx

@@ -17,7 +17,7 @@ const CreateImportSection = () => {
 
   return (
     <>
-      <div className="grid grid-cols-3 gap-2 px-6 pb-4 pt-6">
+      <div className="grid grid-cols-3 gap-2 px-6 pb-4 pt-0">
         <ActionCard
           icon={<span className="i-ri-add-circle-fill size-5 text-text-accent" />}
           title={t('skill.startTab.createBlankSkill')}

web/app/components/workflow/skill/start-tab/file-explorer-intro.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { memo } from 'react'
+import { Trans } from 'react-i18next'
+
+const FileExplorerIntro = () => {
+  return (
+    <section className="px-6 pb-4 pt-4">
+      <p className="flex h-8 items-center rounded-md border border-text-accent-secondary bg-components-badge-bg-dimm px-2 text-text-accent-secondary system-xs-medium">
+        <Trans
+          i18nKey="skill.startTab.fileExplorerIntro"
+          ns="workflow"
+          components={{
+            mention: (
+              <span className="mx-0.5 inline-flex h-4 w-3.5 items-center justify-center rounded-[4px] bg-components-button-secondary-accent-text-disabled text-components-button-secondary-accent-text system-kbd">
+                @
+              </span>
+            ),
+          }}
+        />
+      </p>
+    </section>
+  )
+}
+
+export default memo(FileExplorerIntro)

web/app/components/workflow/skill/start-tab/index.spec.tsx

@@ -55,6 +55,7 @@ describe('StartTabContent', () => {
     it('should render create/import actions and template list when mounted', () => {
       const { container } = render(<StartTabContent />)
 
+      expect(screen.getByText('skill.startTab.fileExplorerIntro')).toBeInTheDocument()
       expect(screen.getByRole('button', { name: /workflow\.skill\.startTab\.createBlankSkill/i })).toBeInTheDocument()
       expect(screen.getByRole('button', { name: /workflow\.skill\.startTab\.importSkill/i })).toBeInTheDocument()
       expect(screen.getByRole('textbox')).toBeInTheDocument()

web/app/components/workflow/skill/start-tab/index.tsx

@@ -4,6 +4,7 @@ import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ScrollArea } from '@/app/components/base/ui/scroll-area'
 import CreateImportSection from './create-import-section'
+import FileExplorerIntro from './file-explorer-intro'
 import SkillTemplatesSection from './skill-templates-section'
 
 const StartTabContent = () => {
@@ -19,6 +20,7 @@ const StartTabContent = () => {
           scrollbar: 'z-20',
         }}
       >
+        <FileExplorerIntro />
         <CreateImportSection />
         <SkillTemplatesSection />
       </ScrollArea>