From ab531d946e5bb6c8c2d13b128c6bd20437e2a8e0 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 14 Jan 2026 16:27:54 +0800
Subject: [PATCH] feat: add main skill struct

---
 .../components/workflow/skill/editor-area.tsx | 17 ++++++++
 .../components/workflow/skill/editor-body.tsx | 17 ++++++++
 .../workflow/skill/editor-tab-item.tsx        | 13 ++++++
 .../components/workflow/skill/editor-tabs.tsx | 17 ++++++++
 .../components/workflow/skill/file-item.tsx   | 13 ++++++
 web/app/components/workflow/skill/files.tsx   | 17 ++++++++
 .../components/workflow/skill/fold-item.tsx   | 13 ++++++
 web/app/components/workflow/skill/main.tsx    | 31 +++++++++++++-
 .../components/workflow/skill/mock-data.ts    | 40 +++++++++----------
 .../workflow/skill/sidebar-search-add.tsx     | 16 ++++++++
 web/app/components/workflow/skill/sidebar.tsx | 17 ++++++++
 .../workflow/skill/skill-doc-editor.tsx       | 13 ++++++
 .../workflow/skill/skill-page-layout.tsx      | 17 ++++++++
 web/app/components/workflow/skill/type.ts     | 24 +++++------
 14 files changed, 232 insertions(+), 33 deletions(-)
 create mode 100644 web/app/components/workflow/skill/editor-area.tsx
 create mode 100644 web/app/components/workflow/skill/editor-body.tsx
 create mode 100644 web/app/components/workflow/skill/editor-tab-item.tsx
 create mode 100644 web/app/components/workflow/skill/editor-tabs.tsx
 create mode 100644 web/app/components/workflow/skill/file-item.tsx
 create mode 100644 web/app/components/workflow/skill/files.tsx
 create mode 100644 web/app/components/workflow/skill/fold-item.tsx
 create mode 100644 web/app/components/workflow/skill/sidebar-search-add.tsx
 create mode 100644 web/app/components/workflow/skill/sidebar.tsx
 create mode 100644 web/app/components/workflow/skill/skill-doc-editor.tsx
 create mode 100644 web/app/components/workflow/skill/skill-page-layout.tsx

diff --git a/web/app/components/workflow/skill/editor-area.tsx b/web/app/components/workflow/skill/editor-area.tsx
new file mode 100644
index 0000000000..d6f4858c30
--- /dev/null
+++ b/web/app/components/workflow/skill/editor-area.tsx
@@ -0,0 +1,17 @@
+import type { FC, PropsWithChildren } from 'react'
+import * as React from 'react'
+
+type EditorAreaProps = PropsWithChildren
+
+const EditorArea: FC<EditorAreaProps> = ({ children }) => {
+  return (
+    <section
+      className="flex flex-1 flex-col gap-3 rounded-lg bg-white p-3"
+      data-component="editor-area"
+    >
+      {children}
+    </section>
+  )
+}
+
+export default React.memo(EditorArea)
diff --git a/web/app/components/workflow/skill/editor-body.tsx b/web/app/components/workflow/skill/editor-body.tsx
new file mode 100644
index 0000000000..2584f8cc12
--- /dev/null
+++ b/web/app/components/workflow/skill/editor-body.tsx
@@ -0,0 +1,17 @@
+import type { FC, PropsWithChildren } from 'react'
+import * as React from 'react'
+
+type EditorBodyProps = PropsWithChildren
+
+const EditorBody: FC<EditorBodyProps> = ({ children }) => {
+  return (
+    <div
+      className="flex flex-1 rounded-md bg-gray-50 p-3"
+      data-component="editor-body"
+    >
+      {children}
+    </div>
+  )
+}
+
+export default React.memo(EditorBody)
diff --git a/web/app/components/workflow/skill/editor-tab-item.tsx b/web/app/components/workflow/skill/editor-tab-item.tsx
new file mode 100644
index 0000000000..ca1e643899
--- /dev/null
+++ b/web/app/components/workflow/skill/editor-tab-item.tsx
@@ -0,0 +1,13 @@
+import type { FC } from 'react'
+import * as React from 'react'
+
+const EditorTabItem: FC = () => {
+  return (
+    <div
+      className="h-7 w-24 rounded bg-gray-100"
+      data-component="editor-tab-item"
+    />
+  )
+}
+
+export default React.memo(EditorTabItem)
diff --git a/web/app/components/workflow/skill/editor-tabs.tsx b/web/app/components/workflow/skill/editor-tabs.tsx
new file mode 100644
index 0000000000..12f3d6205f
--- /dev/null
+++ b/web/app/components/workflow/skill/editor-tabs.tsx
@@ -0,0 +1,17 @@
+import type { FC, PropsWithChildren } from 'react'
+import * as React from 'react'
+
+type EditorTabsProps = PropsWithChildren
+
+const EditorTabs: FC<EditorTabsProps> = ({ children }) => {
+  return (
+    <div
+      className="flex items-center gap-2"
+      data-component="editor-tabs"
+    >
+      {children}
+    </div>
+  )
+}
+
+export default React.memo(EditorTabs)
diff --git a/web/app/components/workflow/skill/file-item.tsx b/web/app/components/workflow/skill/file-item.tsx
new file mode 100644
index 0000000000..198cc8e0e4
--- /dev/null
+++ b/web/app/components/workflow/skill/file-item.tsx
@@ -0,0 +1,13 @@
+import type { FC } from 'react'
+import * as React from 'react'
+
+const FileItem: FC = () => {
+  return (
+    <div
+      className="h-6 rounded bg-gray-100"
+      data-component="file-item"
+    />
+  )
+}
+
+export default React.memo(FileItem)
diff --git a/web/app/components/workflow/skill/files.tsx b/web/app/components/workflow/skill/files.tsx
new file mode 100644
index 0000000000..c9a53dd88e
--- /dev/null
+++ b/web/app/components/workflow/skill/files.tsx
@@ -0,0 +1,17 @@
+import type { FC, PropsWithChildren } from 'react'
+import * as React from 'react'
+
+type FilesProps = PropsWithChildren
+
+const Files: FC<FilesProps> = ({ children }) => {
+  return (
+    <div
+      className="flex flex-1 flex-col gap-2 overflow-auto"
+      data-component="files"
+    >
+      {children}
+    </div>
+  )
+}
+
+export default React.memo(Files)
diff --git a/web/app/components/workflow/skill/fold-item.tsx b/web/app/components/workflow/skill/fold-item.tsx
new file mode 100644
index 0000000000..670199c9ca
--- /dev/null
+++ b/web/app/components/workflow/skill/fold-item.tsx
@@ -0,0 +1,13 @@
+import type { FC } from 'react'
+import * as React from 'react'
+
+const FoldItem: FC = () => {
+  return (
+    <div
+      className="h-6 rounded bg-gray-100"
+      data-component="fold-item"
+    />
+  )
+}
+
+export default React.memo(FoldItem)
diff --git a/web/app/components/workflow/skill/main.tsx b/web/app/components/workflow/skill/main.tsx
index f3ab87de51..d560ab5dfb 100644
--- a/web/app/components/workflow/skill/main.tsx
+++ b/web/app/components/workflow/skill/main.tsx
@@ -1,11 +1,40 @@
 'use client'
 import type { FC } from 'react'
 import * as React from 'react'
+import EditorArea from './editor-area'
+import EditorBody from './editor-body'
+import EditorTabItem from './editor-tab-item'
+import EditorTabs from './editor-tabs'
+import FileItem from './file-item'
+import Files from './files'
+import FoldItem from './fold-item'
+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 = () => {
   return (
     <div className="h-full bg-workflow-canvas-workflow-top-bar-1 pl-3 pt-[52px]">
-      Main
+      <SkillPageLayout>
+        <Sidebar>
+          <SidebarSearchAdd />
+          <Files>
+            <FoldItem />
+            <FileItem />
+            <FileItem />
+          </Files>
+        </Sidebar>
+        <EditorArea>
+          <EditorTabs>
+            <EditorTabItem />
+            <EditorTabItem />
+          </EditorTabs>
+          <EditorBody>
+            <SkillDocEditor />
+          </EditorBody>
+        </EditorArea>
+      </SkillPageLayout>
     </div>
   )
 }
diff --git a/web/app/components/workflow/skill/mock-data.ts b/web/app/components/workflow/skill/mock-data.ts
index 924753ff57..7962c3ac05 100644
--- a/web/app/components/workflow/skill/mock-data.ts
+++ b/web/app/components/workflow/skill/mock-data.ts
@@ -1,30 +1,30 @@
-import type { SkillItem } from './type'
-import { SKILL_ROOT_ID, SkillItemKind } from './type'
+import type { ResourceItem } from './type'
+import { ResourceKind, SKILL_ROOT_ID } from './type'
 
-export const mockSkillItems: SkillItem[] = [
+export const mockSkillItems: ResourceItem[] = [
   {
     id: 'skills',
     name: 'skills',
     parent_id: SKILL_ROOT_ID,
-    kind: SkillItemKind.folder,
+    kind: ResourceKind.folder,
   },
   {
     id: 'skills/_schemas',
     name: '_schemas',
     parent_id: 'skills',
-    kind: SkillItemKind.folder,
+    kind: ResourceKind.folder,
   },
   {
     id: 'skills/_schemas/email-writer',
     name: 'email-writer',
     parent_id: 'skills/_schemas',
-    kind: SkillItemKind.folder,
+    kind: ResourceKind.folder,
   },
   {
     id: 'skills/_schemas/email-writer/skill',
     name: 'SKILL.md',
     parent_id: 'skills/_schemas/email-writer',
-    kind: SkillItemKind.file,
+    kind: ResourceKind.file,
     ext: 'md',
     size: 1820,
   },
@@ -32,7 +32,7 @@ export const mockSkillItems: SkillItem[] = [
     id: 'skills/_schemas/email-writer/prompt',
     name: 'prompt.md',
     parent_id: 'skills/_schemas/email-writer',
-    kind: SkillItemKind.file,
+    kind: ResourceKind.file,
     ext: 'md',
     size: 964,
   },
@@ -40,7 +40,7 @@ export const mockSkillItems: SkillItem[] = [
     id: 'skills/_schemas/email-writer/output-schema',
     name: 'output.schema.json',
     parent_id: 'skills/_schemas/email-writer',
-    kind: SkillItemKind.file,
+    kind: ResourceKind.file,
     ext: 'json',
     size: 742,
   },
@@ -48,7 +48,7 @@ export const mockSkillItems: SkillItem[] = [
     id: 'skills/_schemas/email-writer/toolmap',
     name: 'toolmap.yaml',
     parent_id: 'skills/_schemas/email-writer',
-    kind: SkillItemKind.file,
+    kind: ResourceKind.file,
     ext: 'yaml',
     size: 540,
   },
@@ -56,7 +56,7 @@ export const mockSkillItems: SkillItem[] = [
     id: 'skills/_schemas/email-writer/examples',
     name: 'examples.jsonl',
     parent_id: 'skills/_schemas/email-writer',
-    kind: SkillItemKind.file,
+    kind: ResourceKind.file,
     ext: 'jsonl',
     size: 1205,
   },
@@ -64,7 +64,7 @@ export const mockSkillItems: SkillItem[] = [
     id: 'skills/_index',
     name: '_index.json',
     parent_id: 'skills',
-    kind: SkillItemKind.file,
+    kind: ResourceKind.file,
     ext: 'json',
     size: 356,
   },
@@ -72,7 +72,7 @@ export const mockSkillItems: SkillItem[] = [
     id: 'skills/_tags',
     name: '_tags.json',
     parent_id: 'skills',
-    kind: SkillItemKind.file,
+    kind: ResourceKind.file,
     ext: 'json',
     size: 212,
   },
@@ -80,42 +80,42 @@ export const mockSkillItems: SkillItem[] = [
     id: 'skills/web-research',
     name: 'web-research',
     parent_id: 'skills',
-    kind: SkillItemKind.folder,
+    kind: ResourceKind.folder,
   },
   {
     id: 'skills/support-triage',
     name: 'support-triage',
     parent_id: 'skills',
-    kind: SkillItemKind.folder,
+    kind: ResourceKind.folder,
   },
   {
     id: 'knowledge',
     name: 'knowledge',
     parent_id: SKILL_ROOT_ID,
-    kind: SkillItemKind.folder,
+    kind: ResourceKind.folder,
   },
   {
     id: 'tools',
     name: 'tools',
     parent_id: SKILL_ROOT_ID,
-    kind: SkillItemKind.folder,
+    kind: ResourceKind.folder,
   },
   {
     id: 'templates',
     name: 'templates',
     parent_id: SKILL_ROOT_ID,
-    kind: SkillItemKind.folder,
+    kind: ResourceKind.folder,
   },
   {
     id: 'evals',
     name: 'evals',
     parent_id: SKILL_ROOT_ID,
-    kind: SkillItemKind.folder,
+    kind: ResourceKind.folder,
   },
   {
     id: 'dist',
     name: 'dist',
     parent_id: SKILL_ROOT_ID,
-    kind: SkillItemKind.folder,
+    kind: ResourceKind.folder,
   },
 ]
diff --git a/web/app/components/workflow/skill/sidebar-search-add.tsx b/web/app/components/workflow/skill/sidebar-search-add.tsx
new file mode 100644
index 0000000000..2fc0c1b10e
--- /dev/null
+++ b/web/app/components/workflow/skill/sidebar-search-add.tsx
@@ -0,0 +1,16 @@
+import type { FC } from 'react'
+import * as React from 'react'
+
+const SidebarSearchAdd: FC = () => {
+  return (
+    <div
+      className="flex items-center gap-2"
+      data-component="sidebar-search-add"
+    >
+      <div className="h-8 flex-1 rounded-md bg-gray-100" />
+      <div className="h-8 w-8 rounded-md bg-gray-100" />
+    </div>
+  )
+}
+
+export default React.memo(SidebarSearchAdd)
diff --git a/web/app/components/workflow/skill/sidebar.tsx b/web/app/components/workflow/skill/sidebar.tsx
new file mode 100644
index 0000000000..312c150026
--- /dev/null
+++ b/web/app/components/workflow/skill/sidebar.tsx
@@ -0,0 +1,17 @@
+import type { FC, PropsWithChildren } from 'react'
+import * as React from 'react'
+
+type SidebarProps = PropsWithChildren
+
+const Sidebar: FC<SidebarProps> = ({ children }) => {
+  return (
+    <aside
+      className="flex w-[260px] shrink-0 flex-col gap-3 rounded-lg bg-white p-3"
+      data-component="sidebar"
+    >
+      {children}
+    </aside>
+  )
+}
+
+export default React.memo(Sidebar)
diff --git a/web/app/components/workflow/skill/skill-doc-editor.tsx b/web/app/components/workflow/skill/skill-doc-editor.tsx
new file mode 100644
index 0000000000..89b5e08c98
--- /dev/null
+++ b/web/app/components/workflow/skill/skill-doc-editor.tsx
@@ -0,0 +1,13 @@
+import type { FC } from 'react'
+import * as React from 'react'
+
+const SkillDocEditor: FC = () => {
+  return (
+    <div
+      className="h-full w-full rounded-md bg-white"
+      data-component="skill-doc-editor"
+    />
+  )
+}
+
+export default React.memo(SkillDocEditor)
diff --git a/web/app/components/workflow/skill/skill-page-layout.tsx b/web/app/components/workflow/skill/skill-page-layout.tsx
new file mode 100644
index 0000000000..92547990e7
--- /dev/null
+++ b/web/app/components/workflow/skill/skill-page-layout.tsx
@@ -0,0 +1,17 @@
+import type { FC, PropsWithChildren } from 'react'
+import * as React from 'react'
+
+type SkillPageLayoutProps = PropsWithChildren
+
+const SkillPageLayout: FC<SkillPageLayoutProps> = ({ children }) => {
+  return (
+    <div
+      className="flex h-full gap-3"
+      data-component="skill-page-layout"
+    >
+      {children}
+    </div>
+  )
+}
+
+export default React.memo(SkillPageLayout)
diff --git a/web/app/components/workflow/skill/type.ts b/web/app/components/workflow/skill/type.ts
index cc0dbc3b4f..ac7777c381 100644
--- a/web/app/components/workflow/skill/type.ts
+++ b/web/app/components/workflow/skill/type.ts
@@ -1,29 +1,29 @@
 export const SKILL_ROOT_ID = 'root' as const
-export type SkillItemId = string
-export type SkillParentId = SkillItemId | typeof SKILL_ROOT_ID | null
+export type ItemId = string
+export type ParentId = ItemId | typeof SKILL_ROOT_ID | null
 
-export enum SkillItemKind {
+export enum ResourceKind {
   folder = 'folder',
   file = 'file',
 }
 
-export type SkillItemBase = {
-  id: SkillItemId
+export type ResourceItemBase = {
+  id: ItemId
   name: string
-  parent_id: SkillParentId
+  parent_id: ParentId
   path?: string
 }
 
-export type SkillFolderItem = SkillItemBase & {
-  kind: 'folder'
+export type FolderItem = ResourceItemBase & {
+  kind: ResourceKind.folder
 }
 
-export type SkillFileItem = SkillItemBase & {
-  kind: 'file'
+export type FileItem = ResourceItemBase & {
+  kind: ResourceKind.file
   ext?: string
   size?: number
 }
 
-export type SkillItem = SkillFolderItem | SkillFileItem
+export type ResourceItem = FolderItem | FileItem
 
-export type SkillList = SkillItem[]
+export type ResourceItemList = ResourceItem[]