diff --git a/web/app/components/workflow/skill/editor-area.tsx b/web/app/components/workflow/skill/content-area.tsx
similarity index 58%
rename from web/app/components/workflow/skill/editor-area.tsx
rename to web/app/components/workflow/skill/content-area.tsx
index 35e2c8b821..2221b3d392 100644
--- a/web/app/components/workflow/skill/editor-area.tsx
+++ b/web/app/components/workflow/skill/content-area.tsx
@@ -1,9 +1,9 @@
 import type { FC, PropsWithChildren } from 'react'
 import * as React from 'react'
 
-type EditorAreaProps = PropsWithChildren
+type ContentAreaProps = PropsWithChildren
 
-const EditorArea: FC<EditorAreaProps> = ({ children }) => {
+const ContentArea: FC<ContentAreaProps> = ({ children }) => {
   return (
     <section className="flex min-h-0 flex-1 flex-col rounded-lg">
       {children}
@@ -11,4 +11,4 @@ const EditorArea: FC<EditorAreaProps> = ({ children }) => {
   )
 }
 
-export default React.memo(EditorArea)
+export default React.memo(ContentArea)
diff --git a/web/app/components/workflow/skill/editor-body.tsx b/web/app/components/workflow/skill/content-body.tsx
similarity index 54%
rename from web/app/components/workflow/skill/editor-body.tsx
rename to web/app/components/workflow/skill/content-body.tsx
index b4fd537aca..8a94db6e04 100644
--- a/web/app/components/workflow/skill/editor-body.tsx
+++ b/web/app/components/workflow/skill/content-body.tsx
@@ -1,9 +1,9 @@
 import type { FC, PropsWithChildren } from 'react'
 import * as React from 'react'
 
-type EditorBodyProps = PropsWithChildren
+type ContentBodyProps = PropsWithChildren
 
-const EditorBody: FC<EditorBodyProps> = ({ children }) => {
+const ContentBody: FC<ContentBodyProps> = ({ children }) => {
   return (
     <div className="flex min-h-0 flex-1">
       {children}
@@ -11,4 +11,4 @@ const EditorBody: FC<EditorBodyProps> = ({ children }) => {
   )
 }
 
-export default React.memo(EditorBody)
+export default React.memo(ContentBody)
diff --git a/web/app/components/workflow/skill/skill-doc-editor.tsx b/web/app/components/workflow/skill/file-content-panel.tsx
similarity index 96%
rename from web/app/components/workflow/skill/skill-doc-editor.tsx
rename to web/app/components/workflow/skill/file-content-panel.tsx
index b54922906f..0d619b95a3 100644
--- a/web/app/components/workflow/skill/skill-doc-editor.tsx
+++ b/web/app/components/workflow/skill/file-content-panel.tsx
@@ -14,18 +14,18 @@ import { Theme } from '@/types/app'
 import { basePath } from '@/utils/var'
 import CodeFileEditor from './editor/code-file-editor'
 import MarkdownFileEditor from './editor/markdown-file-editor'
-import MediaFilePreview from './editor/media-file-preview'
-import UnsupportedFileDownload from './editor/unsupported-file-download'
 import { useFileTypeInfo } from './hooks/use-file-type-info'
 import { useSkillAssetNodeMap } from './hooks/use-skill-asset-tree'
 import { useSkillFileData } from './hooks/use-skill-file-data'
 import { useSkillFileSave } from './hooks/use-skill-file-save'
 import { getFileLanguage } from './utils/file-utils'
+import MediaFilePreview from './viewer/media-file-preview'
+import UnsupportedFileDownload from './viewer/unsupported-file-download'
 
 if (typeof window !== 'undefined')
   loader.config({ paths: { vs: `${window.location.origin}${basePath}/vs` } })
 
-const SkillDocEditor: FC = () => {
+const FileContentPanel: FC = () => {
   const { t } = useTranslation('workflow')
   const { theme: appTheme } = useTheme()
   const [isMounted, setIsMounted] = useState(false)
@@ -199,4 +199,4 @@ const SkillDocEditor: FC = () => {
   )
 }
 
-export default React.memo(SkillDocEditor)
+export default React.memo(FileContentPanel)
diff --git a/web/app/components/workflow/skill/editor-tab-item.tsx b/web/app/components/workflow/skill/file-tab-item.tsx
similarity index 96%
rename from web/app/components/workflow/skill/editor-tab-item.tsx
rename to web/app/components/workflow/skill/file-tab-item.tsx
index 9356ecb9e4..34e41061ea 100644
--- a/web/app/components/workflow/skill/editor-tab-item.tsx
+++ b/web/app/components/workflow/skill/file-tab-item.tsx
@@ -10,7 +10,7 @@ import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
 import { cn } from '@/utils/classnames'
 import { getFileIconType } from './utils/file-utils'
 
-type EditorTabItemProps = {
+type FileTabItemProps = {
   fileId: string
   name: string
   isActive: boolean
@@ -21,7 +21,7 @@ type EditorTabItemProps = {
   onDoubleClick: (fileId: string) => void
 }
 
-const EditorTabItem: FC<EditorTabItemProps> = ({
+const FileTabItem: FC<FileTabItemProps> = ({
   fileId,
   name,
   isActive,
@@ -100,4 +100,4 @@ const EditorTabItem: FC<EditorTabItemProps> = ({
   )
 }
 
-export default React.memo(EditorTabItem)
+export default React.memo(FileTabItem)
diff --git a/web/app/components/workflow/skill/editor-tabs.tsx b/web/app/components/workflow/skill/file-tabs.tsx
similarity index 95%
rename from web/app/components/workflow/skill/editor-tabs.tsx
rename to web/app/components/workflow/skill/file-tabs.tsx
index 8f5ea5896f..c5de5ad784 100644
--- a/web/app/components/workflow/skill/editor-tabs.tsx
+++ b/web/app/components/workflow/skill/file-tabs.tsx
@@ -7,10 +7,10 @@ import { useTranslation } from 'react-i18next'
 import Confirm from '@/app/components/base/confirm'
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
 import { cn } from '@/utils/classnames'
-import EditorTabItem from './editor-tab-item'
+import FileTabItem from './file-tab-item'
 import { useSkillAssetNodeMap } from './hooks/use-skill-asset-tree'
 
-const EditorTabs: FC = () => {
+const FileTabs: FC = () => {
   const { t } = useTranslation('workflow')
   const openTabIds = useStore(s => s.openTabIds)
   const activeTabId = useStore(s => s.activeTabId)
@@ -73,7 +73,7 @@ const EditorTabs: FC = () => {
           const isPreview = previewTabId === fileId
 
           return (
-            <EditorTabItem
+            <FileTabItem
               key={fileId}
               fileId={fileId}
               name={name}
@@ -100,4 +100,4 @@ const EditorTabs: FC = () => {
   )
 }
 
-export default React.memo(EditorTabs)
+export default React.memo(FileTabs)
diff --git a/web/app/components/workflow/skill/main.tsx b/web/app/components/workflow/skill/main.tsx
index 385eab3d40..92f7bb5138 100644
--- a/web/app/components/workflow/skill/main.tsx
+++ b/web/app/components/workflow/skill/main.tsx
@@ -3,13 +3,13 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
-import EditorArea from './editor-area'
-import EditorBody from './editor-body'
-import EditorTabs from './editor-tabs'
+import ContentArea from './content-area'
+import ContentBody from './content-body'
+import FileContentPanel from './file-content-panel'
+import FileTabs from './file-tabs'
 import FileTree from './file-tree'
 import Sidebar from './sidebar'
 import SidebarSearchAdd from './sidebar-search-add'
-import SkillDocEditor from './skill-doc-editor'
 import SkillPageLayout from './skill-page-layout'
 
 const SkillMain: FC = () => {
@@ -26,12 +26,12 @@ const SkillMain: FC = () => {
           <SidebarSearchAdd onSearchChange={handleSearchChange} />
           <FileTree searchTerm={searchTerm} />
         </Sidebar>
-        <EditorArea>
-          <EditorTabs />
-          <EditorBody>
-            <SkillDocEditor />
-          </EditorBody>
-        </EditorArea>
+        <ContentArea>
+          <FileTabs />
+          <ContentBody>
+            <FileContentPanel />
+          </ContentBody>
+        </ContentArea>
       </SkillPageLayout>
     </div>
   )
diff --git a/web/app/components/workflow/skill/editor/media-file-preview.tsx b/web/app/components/workflow/skill/viewer/media-file-preview.tsx
similarity index 100%
rename from web/app/components/workflow/skill/editor/media-file-preview.tsx
rename to web/app/components/workflow/skill/viewer/media-file-preview.tsx
diff --git a/web/app/components/workflow/skill/editor/unsupported-file-download.tsx b/web/app/components/workflow/skill/viewer/unsupported-file-download.tsx
similarity index 100%
rename from web/app/components/workflow/skill/editor/unsupported-file-download.tsx
rename to web/app/components/workflow/skill/viewer/unsupported-file-download.tsx