refactor: 使用 skill cli 安装 skills

Author: kqcoxn

Storage/skills/KhazixW2/pipeline-testing/SKILL.md

@@ -1,3 +1,8 @@
+---
+name: pipeline-testing
+description: 测试 MaaFramework Pipeline JSON 节点、识别结果与设备控制流程，并排查 OCR、ROI 和跨页面导航问题。
+---
+
 # Pipeline Testing Skill
 
 ## 概述

website/src/components/SkillDetailApp.tsx

@@ -6,6 +6,7 @@ import { cn } from '../lib/utils';
 import { sitePath } from '../lib/routes';
 import { FileViewer, type DownloadFile } from './FileViewer';
 import { DownloadSection } from './DownloadSection';
+import { getSkillInstallCommand } from '../lib/skillInstall';
 
 type SkillDetailData = {
   id: string;
@@ -35,8 +36,7 @@ type SkillDetailData = {
 // In a real app, this data would come from the astro page props (fetched from getCollection)
 export function SkillDetailApp({ skillId, skillData, lang = 'zh' }: { skillId: string, skillData: SkillDetailData, lang?: 'zh' | 'en' }) {
   const [currentLang, setCurrentLang] = React.useState(lang);
-  const [isCopied1, setIsCopied1] = React.useState(false);
-  const [isCopied2, setIsCopied2] = React.useState(false);
+  const [isInstallCommandCopied, setIsInstallCommandCopied] = React.useState(false);
 
   const [isClient, setIsClient] = React.useState(false);
 
@@ -59,20 +59,15 @@ export function SkillDetailApp({ skillId, skillData, lang = 'zh' }: { skillId: s
 
   const t = (key: keyof typeof ui['zh']) => ui[currentLang][key];
 
-  const handleCopy1 = () => {
-    navigator.clipboard.writeText(`git clone https://github.com/MaaXYZ/MaaHub.git --depth=1`);
-    setIsCopied1(true);
-    setTimeout(() => setIsCopied1(false), 2000);
-  };
+  const packageName = skillData.id.split('/')[1] || skillData.id;
+  const installCommand = getSkillInstallCommand(skillData.skillName || packageName);
 
-  const handleCopy2 = () => {
-    navigator.clipboard.writeText(`cp -r MaaHub/Storage/skills/${skillData.author}/${skillData.id.split('/')[1]} ./your_agent_skills/`);
-    setIsCopied2(true);
-    setTimeout(() => setIsCopied2(false), 2000);
+  const handleCopyInstallCommand = () => {
+    navigator.clipboard.writeText(installCommand);
+    setIsInstallCommandCopied(true);
+    setTimeout(() => setIsInstallCommandCopied(false), 2000);
   };
 
-  const packageName = skillData.id.split('/')[1] || skillData.id;
-
   return (
     <>
       <Header lang={currentLang} toggleLang={toggleLang} />
@@ -141,28 +136,16 @@ export function SkillDetailApp({ skillId, skillData, lang = 'zh' }: { skillId: s
                     <Terminal className="mr-2 h-4 w-4 text-muted-foreground" />
                     {t('skill.install')}
                   </h3>
-                  <div className="relative mb-2">
-                    <pre className="overflow-x-auto rounded bg-muted p-3 text-xs font-mono whitespace-pre-wrap break-all pr-10">
-                      <code>{`git clone https://github.com/MaaXYZ/MaaHub.git --depth=1`}</code>
-                    </pre>
-                    <button 
-                      onClick={handleCopy1}
-                      className="absolute right-2 top-2 rounded bg-background p-1.5 text-muted-foreground hover:text-foreground border shadow-sm transition-colors"
-                      title="Copy clone command"
-                    >
-                      {isCopied1 ? <Check className="h-3.5 w-3.5 text-green-500" /> : <Copy className="h-3.5 w-3.5" />}
-                    </button>
-                  </div>
                   <div className="relative">
                     <pre className="overflow-x-auto rounded bg-muted p-3 text-xs font-mono whitespace-pre-wrap break-all pr-10">
-                      <code>{`cp -r MaaHub/Storage/skills/${skillData.author}/${skillData.id.split('/')[1]} ./your_agent_skills/`}</code>
+                      <code>{installCommand}</code>
                     </pre>
                     <button 
-                      onClick={handleCopy2}
+                      onClick={handleCopyInstallCommand}
                       className="absolute right-2 top-2 rounded bg-background p-1.5 text-muted-foreground hover:text-foreground border shadow-sm transition-colors"
-                      title="Copy copy command"
+                      title="Copy install command"
                     >
-                      {isCopied2 ? <Check className="h-3.5 w-3.5 text-green-500" /> : <Copy className="h-3.5 w-3.5" />}
+                      {isInstallCommandCopied ? <Check className="h-3.5 w-3.5 text-green-500" /> : <Copy className="h-3.5 w-3.5" />}
                     </button>
                   </div>
                 </div>

website/src/lib/skillInstall.ts

@@ -0,0 +1,5 @@
+const SKILLS_REPOSITORY_URL = 'https://github.com/MaaXYZ/MaaHub';
+
+export function getSkillInstallCommand(skillName: string) {
+  return `npx skills add ${SKILLS_REPOSITORY_URL} --skill ${skillName}`;
+}

website/src/pages/skills/[...id]/index.astro

@@ -3,6 +3,7 @@ import Layout from '../../../layouts/Layout.astro';
 import { SkillDetailApp } from '../../../components/SkillDetailApp';
 import { withDownloadFiles } from '../../../lib/downloadFiles';
 import { getAllSkills } from '../../../lib/skills';
+import { getSkillInstallCommand } from '../../../lib/skillInstall';
 
 export async function getStaticPaths() {
   const skills = await getAllSkills();
@@ -34,8 +35,7 @@ const jsonLd = {
   "runtimePlatform": "MaaFramework",
 };
 
-const installCmd1 = `git clone https://github.com/MaaXYZ/MaaHub.git --depth=1`;
-const installCmd2 = `cp -r MaaHub/Storage/skills/${skill.id} ./your_agent_skills/`;
+const installCommand = getSkillInstallCommand(skill.skillName);
 ---
 
 <Layout
@@ -77,8 +77,7 @@ const installCmd2 = `cp -r MaaHub/Storage/skills/${skill.id} ./your_agent_skills
 
     <section>
       <h2>Installation</h2>
-      <pre><code>{installCmd1}</code></pre>
-      <pre><code>{installCmd2}</code></pre>
+      <pre><code>{installCommand}</code></pre>
     </section>
 
     {skill.downloadFiles?.length && (