diff --git a/frontend/src/components/SkillCreate.tsx b/frontend/src/components/SkillCreate.tsx
new file mode 100644
index 0000000..7e750bf
--- /dev/null
+++ b/frontend/src/components/SkillCreate.tsx
@@ -0,0 +1,940 @@
+/**
+ * Skill 创建组件 - 统一流程
+ *
+ * **正确的创建流程**（遵循 skill-creator 标准）：
+ * 1. 用户输入需求
+ * 2. AI 使用 skill-creator 标准生成基础 SKILL.md
+ * 3. 用户预览完整内容（可手动编辑）
+ * 4. 可选择上传 references（文档/GitHub/PDF）
+ * 5. 保存为完整 Skill（包含 SKILL.md + references/）
+ *
+ * **关键修复**：
+ * - AI 生成和 References 上传是同一流程的不同步骤，而非分离的模式
+ * - 预览内容完整显示，无高度限制
+ * - 支持在编辑时随意增删 references
+ */
+import { useState, useRef, useEffect } from 'react'
+import {
+ Modal,
+ Form,
+ Input,
+ Select,
+ Button,
+ Space,
+ Card,
+ Alert,
+ message,
+ Spin,
+ Typography,
+ Tag,
+ Upload,
+ Divider,
+ Steps,
+ Tabs,
+ Row,
+ Col,
+ List,
+ Popconfirm,
+ Tooltip
+} from 'antd'
+import {
+ RobotOutlined,
+ CheckCircleOutlined,
+ FileTextOutlined,
+ UploadOutlined,
+ LinkOutlined,
+ GithubOutlined,
+ FilePdfOutlined,
+ PlusOutlined,
+ DeleteOutlined,
+ EditOutlined,
+ SaveOutlined,
+ ArrowLeftOutlined,
+ EyeOutlined,
+ InboxOutlined,
+ CopyOutlined
+} from '@ant-design/icons'
+import { skillService } from '@/services'
+import { taskService } from '@/services/taskService'
+import TaskProgressTracker from '@/components/TaskProgressTracker'
+
+const { TextArea } = Input
+const { Text, Title, Paragraph } = Typography
+const { Step } = Steps
+const { TabPane } = Tabs
+const { Option } = Select
+
+interface SkillCreateProps {
+ visible: boolean
+ onClose: () => void
+ onSuccess: () => void
+ editingSkillId?: string // 如果传入，表示编辑模式
+}
+
+interface ReferenceFile {
+ id: string
+ type: 'url' | 'github' | 'upload' | 'manual'
+ filename: string
+ url?: string
+ content?: string
+ size?: number
+ uploadedAt: Date
+}
+
+interface GeneratedSkill {
+ suggested_id: string
+ suggested_name: string
+ skill_content: string
+ category: string
+ suggested_tags: string[]
+ explanation: string
+}
+
+type CreateStep = 'input' | 'generating' | 'preview' | 'references' | 'saving'
+
+export const SkillCreate: React.FC
= ({
+ visible,
+ onClose,
+ onSuccess,
+ editingSkillId
+}) => {
+ const [form] = Form.useForm()
+
+ // 步骤状态
+ const [step, setStep] = useState('input')
+ const [aiDescription, setAiDescription] = useState('')
+ const [generating, setGenerating] = useState(false)
+ const [currentTaskId, setCurrentTaskId] = useState(null)
+
+ // 生成的Skill内容
+ const [generatedSkill, setGeneratedSkill] = useState(null)
+ const [editingContent, setEditingContent] = useState(false)
+ const [saving, setSaving] = useState(false)
+
+ // References管理
+ const [references, setReferences] = useState([])
+ const [activeReferenceTab, setActiveReferenceTab] = useState<'url' | 'github' | 'upload' | 'manual'>('url')
+ const [urlInput, setUrlInput] = useState('')
+ const [githubInput, setGithubInput] = useState('')
+ const [manualFileName, setManualFileName] = useState('')
+ const [manualContent, setManualContent] = useState('')
+ const [uploadedFiles, setUploadedFiles] = useState([])
+
+ // 预览ID（用于保存）
+ const [previewId, setPreviewId] = useState(null)
+
+ const contentPreviewRef = useRef(null)
+
+ // 重置表单
+ const resetForm = () => {
+ setStep('input')
+ setAiDescription('')
+ setGeneratedSkill(null)
+ setEditingContent(false)
+ setReferences([])
+ setUrlInput('')
+ setGithubInput('')
+ setManualFileName('')
+ setManualContent('')
+ setUploadedFiles([])
+ setPreviewId(null)
+ setCurrentTaskId(null)
+ form.resetFields()
+ }
+
+ // 加载编辑中的Skill
+ useEffect(() => {
+ if (editingSkillId && visible) {
+ loadSkillForEdit(editingSkillId)
+ } else if (visible) {
+ resetForm()
+ setStep('input')
+ }
+ }, [visible, editingSkillId])
+
+ const loadSkillForEdit = async (skillId: string) => {
+ try {
+ const result = await skillService.getSkillWithReferences(skillId, true)
+ if (result) {
+ const { skill, references: refs } = result
+
+ // 设置生成的内容
+ setGeneratedSkill({
+ suggested_id: skill.id,
+ suggested_name: skill.name,
+ skill_content: skill.behavior_guide,
+ category: skill.category,
+ suggested_tags: skill.tags || [],
+ explanation: `正在编辑 Skill: ${skill.name}`
+ })
+
+ form.setFieldsValue({
+ content: skill.behavior_guide
+ })
+
+ // 加载references
+ if (refs) {
+ const refFiles: ReferenceFile[] = Object.entries(refs).map(([filename, content], idx) => ({
+ id: `ref-${idx}`,
+ type: 'manual',
+ filename,
+ content: content as string,
+ uploadedAt: new Date()
+ }))
+ setReferences(refFiles)
+ }
+
+ setStep('preview')
+ }
+ } catch (error) {
+ message.error(`加载Skill失败: ${(error as Error).message}`)
+ }
+ }
+
+ const handleClose = () => {
+ resetForm()
+ onClose()
+ }
+
+ // ========== 步骤1: 输入需求 ==========
+ const handleGenerate = async () => {
+ if (!aiDescription.trim()) {
+ message.warning('请描述你想要创建的 Skill')
+ return
+ }
+
+ setGenerating(true)
+ setStep('generating')
+
+ try {
+ // 创建异步任务
+ const taskResult = await taskService.generateSkill({
+ description: aiDescription,
+ temperature: 0.7
+ })
+
+ setCurrentTaskId(taskResult.taskId)
+ message.success('任务已创建，正在生成中...')
+
+ // 轮询任务直到完成
+ const result = await taskService.pollTask(taskResult.taskId, (progress) => {
+ // 可以在这里更新进度UI，如果需要的话
+ console.log('Task progress:', progress)
+ })
+
+ // 处理任务结果
+ if (result.success && result.result) {
+ const skillData = result.result
+
+ setGeneratedSkill({
+ suggested_id: skillData.suggested_id,
+ suggested_name: skillData.suggested_name,
+ skill_content: skillData.skill_content,
+ category: skillData.category,
+ suggested_tags: skillData.suggested_tags,
+ explanation: skillData.explanation
+ })
+
+ form.setFieldsValue({
+ content: skillData.skill_content
+ })
+
+ setStep('preview')
+ message.success('AI 生成成功！您可以预览和编辑内容')
+ } else {
+ throw new Error(result.error || '生成失败')
+ }
+ } catch (error) {
+ message.error(`AI 生成失败: ${(error as Error).message}`)
+ setStep('input')
+ } finally {
+ setGenerating(false)
+ setCurrentTaskId(null)
+ }
+ }
+
+ // ========== 步骤2: 预览和编辑 ==========
+ const handleStartEditing = () => {
+ setEditingContent(true)
+ }
+
+ const handleCancelEdit = () => {
+ if (generatedSkill) {
+ form.setFieldsValue({ content: generatedSkill.skill_content })
+ }
+ setEditingContent(false)
+ }
+
+ const handleConfirmEdit = () => {
+ const newContent = form.getFieldValue('content')
+ if (newContent && generatedSkill) {
+ setGeneratedSkill({
+ ...generatedSkill,
+ skill_content: newContent
+ })
+ message.success('内容已更新')
+ }
+ setEditingContent(false)
+ }
+
+ // 使用AI调整内容
+ const handleRefineWithAI = async () => {
+ const currentContent = form.getFieldValue('content')
+ if (!currentContent) {
+ message.warning('没有可调整的内容')
+ return
+ }
+
+ const refinePrompt = await new Promise((resolve) => {
+ Modal.input({
+ title: '输入调整需求',
+ placeholder: '例如：把内容改得更简洁、增加代码示例、优化描述...',
+ onOk: (value) => resolve(value || '')
+ })
+ })
+
+ if (!refinePrompt) return
+
+ setGenerating(true)
+ try {
+ const result = await skillService.refineSkill(currentContent, refinePrompt, 0.7)
+
+ if (result.success) {
+ form.setFieldsValue({ content: result.refined_content })
+ setGeneratedSkill(prev => prev ? { ...prev, skill_content: result.refined_content } : null)
+
+ Modal.info({
+ title: '调整完成',
+ content: (
+
+
变更说明：{result.changes_summary}
+
原始长度: {result.original_length} 字符
+
新长度: {result.new_length} 字符
+
+ {ref.content}
+
+ )
+ })
+ }
+
+ // ========== 步骤4: 保存 ==========
+ const handleSaveSkill = async () => {
+ if (!generatedSkill) return
+
+ setSaving(true)
+ try {
+ const skillContent = form.getFieldValue('content')
+
+ // 构建references对象
+ const referencesObj: Record = {}
+ references.forEach(ref => {
+ referencesObj[ref.filename] = ref.content || ''
+ })
+
+ // 判断是新建还是编辑
+ if (editingSkillId) {
+ // 编辑模式：更新现有Skill
+ await skillService.updateSkillWithReferences(
+ editingSkillId,
+ skillContent,
+ referencesObj
+ )
+ message.success('Skill 更新成功！')
+ } else {
+ // 新建模式：创建新Skill
+ // 如果没有previewId，先生成一个
+ let currentPreviewId = previewId
+ if (!currentPreviewId) {
+ const previewResult = await skillService.previewSkill({
+ skill_content: skillContent,
+ skill_name: generatedSkill.suggested_name,
+ category: generatedSkill.category,
+ tags: generatedSkill.suggested_tags
+ })
+ currentPreviewId = previewResult.preview_id
+ setPreviewId(currentPreviewId)
+ }
+
+ // 保存Skill
+ await skillService.saveSkillFromPreview(
+ currentPreviewId,
+ generatedSkill.suggested_id,
+ skillContent,
+ referencesObj
+ )
+ message.success('Skill 创建成功！')
+ }
+
+ onSuccess()
+ handleClose()
+ } catch (error) {
+ message.error(`保存失败: ${(error as Error).message}`)
+ } finally {
+ setSaving(false)
+ }
+ }
+
+ // 计算步骤进度
+ const getStepProgress = () => {
+ switch (step) {
+ case 'input': return 0
+ case 'generating': return 1
+ case 'preview': return 2
+ case 'references': return 2
+ case 'saving': return 3
+ default: return 0
+ }
+ }
+
+ return (
+
+
+ {editingSkillId ? '编辑 Skill' : '创建 Skill'}
+
+ }
+ open={visible}
+ onCancel={handleClose}
+ footer={null}
+ width={1000}
+ destroyOnClose
+ >
+
+
+ {/* 步骤指示器 */}
+
+
+
+
+
+
+
+
+ {/* ========== 步骤1: 输入需求 ========== */}
+ {step === 'input' && (
+
+
+
+