dk-frontend-skills 2.1.3 → 3.0.0

package/package.json

@@ -1,23 +1,29 @@
 {
   "name": "dk-frontend-skills",
-  "version": "2.1.3",
+  "version": "3.0.0",
   "description": "dk-engineer - 幽默沉稳靠谱的前端开发助手 Claude Skills 配置包，一键注入 .claude/ 技能目录和 CLAUDE.md 人设配置",
   "author": "XiaoMa",
   "license": "MIT",
   "private": false,
   "files": [
-    ".claude/",
     "CLAUDE.md",
-    "scripts/"
+    "scripts/",
+    "skills-index.json",
+    ".claude/settings.json",
+    ".claude/settings.local.json"
   ],
   "bin": {
-    "dk-skills": "./scripts/cli.js"
+    "dk-skills": "./scripts/cli.js",
+    "dk-frontend-skills": "./scripts/cli.js"
   },
   "scripts": {
+    "build-skills": "node scripts/build-skills.js",
     "postinstall": "node scripts/copy-skills.js"
   },
   "dependencies": {
     "@inquirer/prompts": "^8.4.2",
-    "chalk": "^5.6.2"
+    "chalk": "^5.6.2",
+    "cli-progress": "^3.12.0",
+    "tar": "^7.5.15"
   }
 }

package/scripts/build-skills.js

@@ -0,0 +1,89 @@
+#!/usr/bin/env node
+
+/**
+ * 技能打包脚本
+ * 将 skills/<name>/ 目录打包成 dist/skills/<name>-<version>.tar.gz
+ * 并更新 skills-index.json 中的版本和文件大小
+ */
+
+const fs = require("fs");
+const path = require("path");
+const tar = require("tar");
+const { execSync } = require("child_process");
+
+const repoRoot = path.join(__dirname, "..");
+const skillsDir = path.join(repoRoot, "skills");
+const distDir = path.join(repoRoot, "dist", "skills");
+const indexPath = path.join(repoRoot, "skills-index.json");
+
+async function build() {
+  // 读取已有的索引
+  const index = JSON.parse(fs.readFileSync(indexPath, "utf-8"));
+  const indexSkills = index.skills;
+
+  // 确保输出目录存在
+  fs.mkdirSync(distDir, { recursive: true });
+
+  const skillNames = fs.readdirSync(skillsDir);
+
+  for (const name of skillNames) {
+    const skillPath = path.join(skillsDir, name);
+    if (!fs.statSync(skillPath).isDirectory()) continue;
+
+    // 读取 .meta.json 获取版本
+    const metaPath = path.join(skillPath, ".meta.json");
+    if (!fs.existsSync(metaPath)) {
+      console.log(`  ⚠️  ${name}: 缺少 .meta.json，跳过`);
+      continue;
+    }
+
+    const meta = JSON.parse(fs.readFileSync(metaPath, "utf-8"));
+    const version = meta.version || "0.0.0";
+    const fileName = `${name}-${version}.tar.gz`;
+    const outputPath = path.join(distDir, fileName);
+
+    console.log(`  📦 ${name} (${version}) → ${fileName}`);
+
+    // 打包：进入 skills/ 目录，只打包当前技能子目录
+    await tar.c(
+      {
+        gzip: true,
+        file: outputPath,
+        cwd: skillsDir,
+        portable: true,
+      },
+      [name],
+    );
+
+    // 获取文件大小
+    const stat = fs.statSync(outputPath);
+
+    // 更新索引
+    if (indexSkills[name]) {
+      indexSkills[name].version = version;
+      indexSkills[name].fileName = fileName;
+      indexSkills[name].size = stat.size;
+    } else {
+      indexSkills[name] = {
+        version,
+        description: meta.description || "",
+        fileName,
+        tags: meta.tags || [],
+        size: stat.size,
+      };
+    }
+  }
+
+  // 更新索引的更新时间
+  index.updatedAt = new Date().toISOString().slice(0, 10);
+
+  // 写回索引
+  fs.writeFileSync(indexPath, JSON.stringify(index, null, 2) + "\n", "utf-8");
+  console.log(`\n  ✅ skills-index.json 已更新`);
+  console.log(`  📂 压缩包输出目录: dist/skills/\n`);
+}
+
+build().catch((err) => {
+  console.error("打包失败:", err);
+  process.exit(1);
+});

package/scripts/cli.js

@@ -2,7 +2,13 @@
 
 const fs = require("fs");
 const path = require("path");
-const { getPackageSkills, getUserSkills } = require("./core");
+const tar = require("tar");
+const {
+  getPackageSkills,
+  getUserSkills,
+  readSkillsIndex,
+  downloadFile,
+} = require("./core");
 
 // npx 运行时：process.cwd() 是用户项目目录
 // __dirname 是包内 scripts/ 目录
@@ -18,7 +24,6 @@ const packageDir = path.join(__dirname, "..");
 const claudeDest = path.join(projectRoot, ".claude");
 const skillsDest = path.join(claudeDest, "skills");
 const settingsPath = path.join(claudeDest, "settings.json");
-const pkgSkillsSource = path.join(packageDir, ".claude", "skills");
 
 // ---------- 文件写入 ----------
 
@@ -43,47 +48,110 @@ function writeSettings(settings) {
   );
 }
 
-// ---------- 安装勾选的技能 ----------
+// ---------- 远程下载与安装 ----------
 
-// 手动递归拷贝目录，绕开 Windows 中文路径下 fs.cpSync({ recursive: true }) 死锁的 bug
-function copyDirSync(src, dest) {
-  fs.mkdirSync(dest, { recursive: true });
-  for (const item of fs.readdirSync(src)) {
-    const srcPath = path.join(src, item);
-    const destPath = path.join(dest, item);
-    if (fs.statSync(srcPath).isDirectory()) {
-      copyDirSync(srcPath, destPath);
-    } else {
-      fs.copyFileSync(srcPath, destPath);
+async function downloadAndInstallSkill(name, index) {
+  const skillInfo = index.skills[name];
+  if (!skillInfo) {
+    console.error(`  ❌ 技能 "${name}" 不在索引中`);
+    return false;
+  }
+
+  const destDir = path.join(skillsDest, name);
+
+  // 检查本地是否已安装且版本一致
+  const localMetaPath = path.join(destDir, ".meta.json");
+  if (fs.existsSync(localMetaPath)) {
+    try {
+      const localMeta = JSON.parse(fs.readFileSync(localMetaPath, "utf-8"));
+      if (localMeta.version === skillInfo.version) {
+        return true; // 已是最新，跳过
+      }
+    } catch {
+      // 元信息损坏，重新下载
     }
   }
+
+  // 构造下载地址
+  const url = `${index.baseUrl}/${skillInfo.fileName}`;
+  const tempDir = path.join(claudeDest, ".temp");
+  if (!fs.existsSync(tempDir)) {
+    fs.mkdirSync(tempDir, { recursive: true });
+  }
+  const tempFile = path.join(tempDir, skillInfo.fileName);
+
+  // 下载带进度条
+  const { SingleBar, Presets } = await import("cli-progress");
+  const bar = new SingleBar(
+    {
+      format: `  📥 ${name} |{bar}| {percentage}% | {value}/{total} bytes`,
+      barCompleteChar: "\u2588",
+      barIncompleteChar: "\u2591",
+      hideCursor: true,
+    },
+    Presets.shades_classic,
+  );
+
+  try {
+    console.log(`  ⏬ 正在下载 ${name} (${skillInfo.version})...`);
+    bar.start(skillInfo.size || 100, 0);
+    await downloadFile(url, tempFile, (downloaded, total) => {
+      bar.setTotal(total || skillInfo.size || 100);
+      bar.update(downloaded);
+    });
+    bar.stop();
+
+    // 创建目标目录，解压
+    if (fs.existsSync(destDir)) {
+      fs.rmSync(destDir, { recursive: true, force: true });
+    }
+    fs.mkdirSync(destDir, { recursive: true });
+
+    await tar.x({
+      file: tempFile,
+      C: destDir,
+    });
+
+    // 清理临时文件
+    fs.rmSync(tempFile, { force: true });
+
+    console.log(`  ✅ ${name} (${skillInfo.version}) 安装成功`);
+    return true;
+  } catch (err) {
+    bar.stop();
+    // 清理残留
+    if (fs.existsSync(tempFile)) fs.rmSync(tempFile, { force: true });
+    if (fs.existsSync(destDir))
+      fs.rmSync(destDir, { recursive: true, force: true });
+    console.error(`  ❌ 下载 "${name}" 失败: ${err.message}`);
+    return false;
+  }
 }
 
-function installSelectedSkills(selectedNames) {
-  // 创建 .claude/ 和 skills/ 目录
+async function installSelectedSkills(selectedNames) {
+  // 创建目录
   if (!fs.existsSync(skillsDest)) {
     fs.mkdirSync(skillsDest, { recursive: true });
   }
 
-  const allPkgSkills = fs.readdirSync(pkgSkillsSource);
+  const index = readSkillsIndex(packageDir);
+  if (!index) {
+    console.error("  ❌ skills-index.json 读取失败");
+    return 0;
+  }
+
+  const indexSkills = index.skills;
   let installedCount = 0;
 
-  for (const name of allPkgSkills) {
-    const src = path.join(pkgSkillsSource, name);
+  for (const name of Object.keys(indexSkills)) {
     const dest = path.join(skillsDest, name);
 
     if (selectedNames.includes(name)) {
-      // 勾选了的 → 安装（不存在才装）
-      if (!fs.existsSync(dest)) {
-        try {
-          copyDirSync(src, dest);
-          installedCount++;
-        } catch (err) {
-          console.error(`  ❌ 安装技能 "${name}" 失败:`, err.message);
-        }
-      }
+      // 勾选了的 → 下载/更新
+      const ok = await downloadAndInstallSkill(name, index);
+      if (ok) installedCount++;
     } else {
-      // 没勾选的 → 如果之前装了，删掉
+      // 没勾选的 → 移除
       if (fs.existsSync(dest)) {
         fs.rmSync(dest, { recursive: true, force: true });
       }
@@ -94,7 +162,7 @@ function installSelectedSkills(selectedNames) {
   const settings = readSettings();
   if (!settings.skills) settings.skills = {};
 
-  for (const name of allPkgSkills) {
+  for (const name of Object.keys(indexSkills)) {
     const enabled = selectedNames.includes(name);
     if (!settings.skills[name]) {
       settings.skills[name] = {};
@@ -109,7 +177,7 @@ function installSelectedSkills(selectedNames) {
   const mdDest = path.join(projectRoot, "CLAUDE.md");
   if (fs.existsSync(mdSource) && !fs.existsSync(mdDest)) {
     fs.copyFileSync(mdSource, mdDest);
-    console.log("  📝 CLAUDE.md 已创建\n");
+    console.log("  📝 CLAUDE.md 已创建");
   }
 
   return installedCount;
@@ -164,12 +232,6 @@ async function cmdList() {
 
 async function startInteractiveMenu() {
   const { checkbox } = await import("@inquirer/prompts");
-
-  if (!fs.existsSync(pkgSkillsSource)) {
-    console.log("  ⚠️  包内没有找到技能文件\n");
-    return;
-  }
-
   const pkgSkills = getPackageSkills(packageDir);
 
   if (pkgSkills.length === 0) {
@@ -210,7 +272,7 @@ async function startInteractiveMenu() {
     (name) => !selected.includes(name),
   ).length;
 
-  const installed = installSelectedSkills(selected);
+  const installed = await installSelectedSkills(selected);
 
   const parts = [];
   if (newCount > 0) parts.push(`新装 ${newCount} 个`);

package/scripts/copy-skills.js

@@ -3,9 +3,6 @@ const path = require("path");
 const {
   backupTimestamp,
   appendLog,
-  backupDir,
-  copyDirSync,
-  installSkills,
   installSettings,
 } = require("./core");
 
@@ -30,25 +27,21 @@ const logFile = path.join(claudeDest, ".install.log");
 
 console.log("\n📦 dk-frontend-skills 技能包安装开始\n");
 
-if (fs.existsSync(claudeSource)) {
-  if (fs.existsSync(claudeDest)) {
-    // .claude 已存在 → 备份后再操作
-    appendLog(logFile, "INFO", "Install started (upgrade)");
-    backupDir(claudeDest);
-
-    const skillsSource = path.join(claudeSource, "skills");
-    const skillsDest = path.join(claudeDest, "skills");
+// 确保 .claude/ 目录存在
+if (!fs.existsSync(claudeDest)) {
+  fs.mkdirSync(claudeDest, { recursive: true });
+  appendLog(logFile, "INFO", `.claude/ directory created`);
+}
 
-    installSkills(skillsSource, skillsDest, logFile);
-    installSettings(claudeSource, claudeDest, logFile);
-  } else {
-    // 全新安装
-    appendLog(logFile, "INFO", "Install started (fresh)");
-    copyDirSync(claudeSource, claudeDest);
-    appendLog(logFile, "INFO", `.claude/ directory created`);
-  }
+// 确保 .claude/skills/ 目录存在（不覆盖已有技能）
+const skillsDest = path.join(claudeDest, "skills");
+if (!fs.existsSync(skillsDest)) {
+  fs.mkdirSync(skillsDest, { recursive: true });
 }
 
+// 安装 settings.json（深度合并）
+installSettings(claudeSource, claudeDest, logFile);
+
 // 安装 CLAUDE.md
 if (fs.existsSync(mdSource)) {
   if (!fs.existsSync(mdDest)) {
@@ -83,4 +76,4 @@ if (fs.existsSync(logFile)) {
   console.log("");
 }
 
-console.log("💡 提示：运行 npx dk-skills 可交互选择启用/禁用技能\n");
+console.log("💡 提示：运行 npx dk-skills 可交互选择安装/启用/禁用技能\n");

package/scripts/core.js

@@ -118,51 +118,6 @@ function readMeta(skillDir) {
   return null;
 }
 
-/**
- * 安装技能：逐个复制，补缺不覆盖
- */
-function installSkills(skillsSource, skillsDest, logFile) {
-  if (!fs.existsSync(skillsSource)) return [];
-
-  if (!fs.existsSync(skillsDest)) {
-    fs.mkdirSync(skillsDest, { recursive: true });
-  }
-
-  const skillDirs = fs.readdirSync(skillsSource);
-  const results = [];
-
-  for (const dir of skillDirs) {
-    const srcSkill = path.join(skillsSource, dir);
-    const destSkill = path.join(skillsDest, dir);
-    const meta = readMeta(srcSkill);
-    const version = meta ? meta.version : "?";
-
-    if (!fs.existsSync(destSkill)) {
-      copyDirSync(srcSkill, destSkill);
-      appendLog(logFile, "SKILL", `${dir} (${version}) → installed`);
-      results.push({ name: dir, version, action: "installed" });
-    } else {
-      const destMeta = readMeta(destSkill);
-      const needUpdate = meta && destMeta && meta.version !== destMeta.version;
-
-      if (needUpdate) {
-        const bakName = `${dir}.bak.${backupTimestamp()}`;
-        const bakPath = path.join(skillsDest, bakName);
-        copyDirSync(destSkill, bakPath);
-        fs.rmSync(destSkill, { recursive: true, force: true });
-        copyDirSync(srcSkill, destSkill);
-        appendLog(logFile, "SKILL", `${dir} (${destMeta.version} → ${meta.version}) → updated`);
-        results.push({ name: dir, version: meta.version, action: "updated" });
-      } else {
-        appendLog(logFile, "SKILL", `${dir} (${version}) → skipped (exists)`);
-        results.push({ name: dir, version, action: "skipped" });
-      }
-    }
-  }
-
-  return results;
-}
-
 /**
  * 安装 settings.json，深度合并
  */
@@ -192,21 +147,31 @@ function installSettings(sourceDir, destDir, logFile) {
 }
 
 /**
- * 获取包内的技能列表（带元信息）
+ * 读取 skills-index.json 获取包内技能列表
  */
-function getPackageSkills(packageDir) {
-  const skillsSource = path.join(packageDir, ".claude", "skills");
-  if (!fs.existsSync(skillsSource)) return [];
+function readSkillsIndex(packageDir) {
+  const indexPath = path.join(packageDir, "skills-index.json");
+  if (!fs.existsSync(indexPath)) return null;
+  try {
+    return JSON.parse(fs.readFileSync(indexPath, "utf-8"));
+  } catch {
+    return null;
+  }
+}
 
-  return fs.readdirSync(skillsSource).map((name) => {
-    const meta = readMeta(path.join(skillsSource, name));
-    return {
-      name,
-      version: meta ? meta.version : "?",
-      description: meta ? meta.description : "",
-      tags: meta ? meta.tags : [],
-    };
-  });
+/**
+ * 获取包的技能列表（从 skills-index.json 读取）
+ */
+function getPackageSkills(packageDir) {
+  const index = readSkillsIndex(packageDir);
+  if (!index) return [];
+
+  return Object.entries(index.skills).map(([name, info]) => ({
+    name,
+    version: info.version,
+    description: info.description || "",
+    tags: info.tags || [],
+  }));
 }
 
 /**
@@ -241,6 +206,34 @@ function getUserSkills(claudeDest) {
   });
 }
 
+/**
+ * 从远程下载文件到本地临时路径
+ */
+async function downloadFile(url, destPath, onProgress) {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`HTTP ${response.status} ${response.statusText}`);
+  }
+
+  const total = parseInt(response.headers.get("content-length") || "0", 10);
+  let downloaded = 0;
+
+  const reader = response.body.getReader();
+  const writer = fs.createWriteStream(destPath);
+
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      downloaded += value.length;
+      if (onProgress) onProgress(downloaded, total);
+      writer.write(value);
+    }
+  } finally {
+    writer.close();
+  }
+}
+
 module.exports = {
   timestamp,
   backupTimestamp,
@@ -249,8 +242,9 @@ module.exports = {
   copyDirSync,
   deepMerge,
   readMeta,
-  installSkills,
   installSettings,
+  readSkillsIndex,
   getPackageSkills,
   getUserSkills,
+  downloadFile,
 };

package/skills-index.json

@@ -0,0 +1,99 @@
+{
+  "version": "3.0.0",
+  "updatedAt": "2026-05-09",
+  "baseUrl": "https://github.com/Milo-K0/dk-frontend-skills/releases/download/skills",
+  "skills": {
+    "agentation": {
+      "version": "1.0.0",
+      "description": "Agentation React 可视化反馈工具栏",
+      "fileName": "agentation-1.0.0.tar.gz",
+      "tags": [
+        "react",
+        "ui",
+        "debug"
+      ],
+      "size": 1374
+    },
+    "fe-biz-patterns": {
+      "version": "1.0.0",
+      "description": "小马自己的前端业务模式库，收录小马在前端业务中沉淀的方案和最佳实践",
+      "fileName": "fe-biz-patterns-1.0.0.tar.gz",
+      "tags": [
+        "frontend",
+        "pattern",
+        "vue",
+        "react"
+      ],
+      "size": 18175
+    },
+    "frontend-code-review": {
+      "version": "1.0.0",
+      "description": "前端代码全面审查，含 React/Vue/Angular/原生 JS/TS 项目",
+      "fileName": "frontend-code-review-1.0.0.tar.gz",
+      "tags": [
+        "frontend",
+        "review",
+        "react",
+        "vue",
+        "angular"
+      ],
+      "size": 5976
+    },
+    "frontend-design": {
+      "version": "1.0.0",
+      "description": "创意前端界面设计，落地页/品牌页/营销页/Html/CSS",
+      "fileName": "frontend-design-1.0.0.tar.gz",
+      "tags": [
+        "frontend",
+        "design",
+        "ui",
+        "css"
+      ],
+      "size": 5965
+    },
+    "moai-framework-electron": {
+      "version": "1.0.0",
+      "description": "Electron 桌面应用开发，含主进程/渲染进程/IPC/自动更新/打包",
+      "fileName": "moai-framework-electron-1.0.0.tar.gz",
+      "tags": [
+        "electron",
+        "desktop",
+        "node"
+      ],
+      "size": 6015
+    },
+    "skill-creator": {
+      "version": "1.0.0",
+      "description": "创建和更新技能的指导工具",
+      "fileName": "skill-creator-1.0.0.tar.gz",
+      "tags": [
+        "meta",
+        "tool"
+      ],
+      "size": 12936
+    },
+    "ui-ux-pro-max": {
+      "version": "1.0.0",
+      "description": "UI/UX 设计智能系统，50 种样式，21 种配色方案，50 种字体搭配",
+      "fileName": "ui-ux-pro-max-1.0.0.tar.gz",
+      "tags": [
+        "design",
+        "ui",
+        "ux",
+        "style"
+      ],
+      "size": 99673
+    },
+    "vue": {
+      "version": "1.0.0",
+      "description": "Vue 3 组件/组合式函数开发，Composition API 最佳实践",
+      "fileName": "vue-1.0.0.tar.gz",
+      "tags": [
+        "vue",
+        "frontend",
+        "composition-api"
+      ],
+      "size": 20091
+    }
+  }
+}

package/.claude/skills/agentation/.meta.json

@@ -1,6 +0,0 @@
-{
-  "name": "agentation",
-  "version": "1.0.0",
-  "description": "Agentation React 可视化反馈工具栏",
-  "tags": ["react", "ui", "debug"]
-}