@reus-able/frontend-helper-mcp 1.0.13 → 1.1.1

package/dist/index.js

@@ -1,59 +1,115 @@
 #!/usr/bin/env node
 import { McpServer as R } from "@modelcontextprotocol/sdk/server/mcp.js";
-import { StdioServerTransport as v } from "@modelcontextprotocol/sdk/server/stdio.js";
-import i from "fs/promises";
+import { StdioServerTransport as F } from "@modelcontextprotocol/sdk/server/stdio.js";
+import c from "fs/promises";
 import a from "path";
-import { fileURLToPath as l } from "url";
-import { ListPromptsRequestSchema as h, GetPromptRequestSchema as P, ListResourcesRequestSchema as S, ReadResourceRequestSchema as g, ListToolsRequestSchema as F, CallToolRequestSchema as M } from "@modelcontextprotocol/sdk/types.js";
-import q from "fs";
-function x(r) {
+import { fileURLToPath as p } from "url";
+import { ListPromptsRequestSchema as P, GetPromptRequestSchema as x, ListResourcesRequestSchema as $, ReadResourceRequestSchema as M, ListToolsRequestSchema as C, CallToolRequestSchema as L } from "@modelcontextprotocol/sdk/types.js";
+import N from "fs";
+function T(e) {
   try {
-    return q.statSync(r).isDirectory();
+    return N.statSync(e).isDirectory();
   } catch {
     return !1;
   }
 }
-function p(r, e, o = 8) {
-  let t = r;
+function u(e, t, o = 8) {
+  let r = e;
   for (let n = 0; n <= o; n++) {
-    const s = a.resolve(t, e);
-    if (x(s)) return s;
-    const c = a.dirname(t);
-    if (c === t) break;
-    t = c;
+    const s = a.resolve(r, t);
+    if (T(s)) return s;
+    const i = a.dirname(r);
+    if (i === r) break;
+    r = i;
   }
 }
-function d() {
-  const r = process.env.MCP_COMMAND_PROMPTS_DIR ?? process.env.MCP_PROMPTS_DIR;
-  if (r) return r;
-  const e = a.dirname(l(import.meta.url)), o = p(
-    e,
+function y() {
+  const e = process.env.MCP_COMMAND_PROMPTS_DIR ?? process.env.MCP_PROMPTS_DIR;
+  if (e) return e;
+  const t = a.dirname(p(import.meta.url)), o = u(
+    t,
     "resources/command-prompts"
   );
   if (o) return o;
-  const t = p(
+  const r = u(
     process.cwd(),
     "resources/command-prompts"
   );
-  return t || a.resolve(process.cwd(), "resources/command-prompts");
+  return r || a.resolve(process.cwd(), "resources/command-prompts");
 }
-async function m(r) {
+function _() {
+  const e = process.env.MCP_SKILLS_DIR;
+  if (e) return e;
+  const t = a.dirname(p(import.meta.url)), o = u(t, "resources/skills");
+  if (o) return o;
+  const r = u(process.cwd(), "resources/skills");
+  return r || a.resolve(process.cwd(), "resources/skills");
+}
+async function d(e) {
   try {
-    return await i.access(r), (await i.readdir(r)).filter(
+    return await c.access(e), (await c.readdir(e)).filter(
       (o) => [".txt", ".md", ".json"].includes(a.extname(o).toLowerCase())
     );
-  } catch (e) {
-    return console.error(`Error accessing prompts directory ${r}:`, e), [];
+  } catch (t) {
+    return console.error(`Error accessing prompts directory ${e}:`, t), [];
   }
 }
-async function f(r, e) {
-  return (await m(r)).find((t) => a.parse(t).name === e);
+function D(e) {
+  return !(!e || e.includes("..") || e.includes("/") || e.includes("\\"));
 }
-function u(r) {
-  const e = a.extname(r).toLowerCase();
-  return e === ".md" ? "text/markdown" : e === ".json" ? "application/json" : "text/plain";
+function q(e) {
+  const t = e.match(/^---\s*\n([\s\S]*?)\n---\s*\n/);
+  if (!t) return {};
+  const o = {};
+  for (const r of t[1].split(`
+`)) {
+    const n = r.trim();
+    if (!n) continue;
+    const s = n.match(/^([A-Za-z0-9_-]+):\s*(.*)\s*$/);
+    if (!s) continue;
+    const i = s[1], m = s[2];
+    i === "name" && (o.name = m), i === "description" && (o.description = m);
+  }
+  return o;
+}
+async function w(e) {
+  try {
+    await c.access(e);
+    const o = (await c.readdir(e, { withFileTypes: !0 })).filter((n) => n.isDirectory()).map((n) => n.name), r = [];
+    for (const n of o) {
+      const s = a.join(e, n, "SKILL.md");
+      try {
+        const i = await c.readFile(s, "utf-8"), m = q(i);
+        r.push({
+          dirName: n,
+          name: m.name,
+          description: m.description,
+          filePath: s
+        });
+      } catch {
+        continue;
+      }
+    }
+    return r.sort((n, s) => n.dirName.localeCompare(s.dirName)), r;
+  } catch (t) {
+    return console.error(`Error accessing skills directory ${e}:`, t), [];
+  }
 }
-const w = {
+async function E(e, t) {
+  if (!D(t)) return;
+  const r = (await w(e)).find((s) => s.dirName === t || s.name === t);
+  if (!r) return;
+  const n = await c.readFile(r.filePath, "utf-8");
+  return { entry: r, markdown: n };
+}
+async function v(e, t) {
+  return (await d(e)).find((r) => a.parse(r).name === t);
+}
+function f(e) {
+  const t = a.extname(e).toLowerCase();
+  return t === ".md" ? "text/markdown" : t === ".json" ? "application/json" : "text/plain";
+}
+const S = {
   "code-refactor": {
     name: "代码重构",
     description: "对代码进行结构调整，不改变功能逻辑"
@@ -65,97 +121,171 @@ const w = {
   "component-refactor": {
     name: "组件重构",
     description: "对组件进行结构调整，不改变功能逻辑"
+  },
+  "install-skill": {
+    name: "安装技能",
+    description: "安装mcp中定义的技能"
   }
 };
-function C(r) {
-  const e = d();
-  r.server.setRequestHandler(h, async () => {
+function j(e) {
+  const t = y();
+  e.server.setRequestHandler(P, async () => {
     try {
-      return { prompts: (await m(e)).map((n) => {
+      return { prompts: (await d(t)).map((n) => {
         const s = a.parse(n).name;
         return {
           name: s,
-          description: w[s]?.description || `Content of ${n}`
+          description: S[s]?.description || `Content of ${n}`
         };
       }) };
     } catch (o) {
       return console.error("Error listing prompts:", o), { prompts: [] };
     }
-  }), r.server.setRequestHandler(P, async (o) => {
-    const t = o.params.name;
+  }), e.server.setRequestHandler(x, async (o) => {
+    const r = o.params.name;
     try {
-      const n = await f(e, t);
+      const n = await v(t, r);
       if (!n)
-        throw new Error(`Prompt not found: ${t}`);
+        throw new Error(`Prompt not found: ${r}`);
       return {
         messages: [
           {
             role: "user",
             content: {
               type: "text",
-              text: await i.readFile(a.join(e, n), "utf-8")
+              text: await c.readFile(a.join(t, n), "utf-8")
             }
           }
         ]
       };
     } catch (n) {
-      throw new Error(`Failed to load prompt ${t}: ${n}`);
+      throw new Error(`Failed to load prompt ${r}: ${n}`);
     }
   });
 }
-function T(r) {
-  const e = d();
-  r.server.setRequestHandler(S, async () => {
+function H(e) {
+  const t = y();
+  e.server.setRequestHandler($, async () => {
     try {
-      return { resources: (await m(e)).map((n) => {
-        const s = a.parse(n).name, c = u(n);
+      return { resources: (await d(t)).map((n) => {
+        const s = a.parse(n).name, i = f(n);
         return {
           uri: `prompt://${s}`,
           name: s,
-          mimeType: c,
-          description: w[s]?.description || `Content of ${n}`
+          mimeType: i,
+          description: S[s]?.description || `Content of ${n}`
         };
       }) };
     } catch (o) {
       return console.error("Error listing resources:", o), { resources: [] };
     }
-  }), r.server.setRequestHandler(
-    g,
+  }), e.server.setRequestHandler(
+    M,
     async (o) => {
-      const t = o.params.uri, n = t.replace(/^prompt:\/\//, "");
+      const r = o.params.uri, n = r.replace(/^prompt:\/\//, "");
       try {
-        const s = await f(e, n);
+        const s = await v(t, n);
         if (!s)
-          throw new Error(`Resource not found: ${t}`);
-        const c = await i.readFile(a.join(e, s), "utf-8"), y = u(s);
+          throw new Error(`Resource not found: ${r}`);
+        const i = await c.readFile(a.join(t, s), "utf-8"), m = f(s);
         return {
           contents: [
             {
-              uri: t,
-              mimeType: y,
-              text: c
+              uri: r,
+              mimeType: m,
+              text: i
             }
           ]
         };
       } catch (s) {
-        throw new Error(`Failed to read resource ${t}: ${s}`);
+        throw new Error(`Failed to read resource ${r}: ${s}`);
       }
     }
   );
 }
-function $(r) {
-  r.server.setRequestHandler(F, async () => ({ tools: [] })), r.server.setRequestHandler(M, async (e) => ({
-    content: [
-      {
-        type: "text",
-        text: `Tool not found: ${e.params.name}`
+function I(e) {
+  const t = _(), o = {
+    name: "get_skill",
+    description: "按名称获取 resources/skills 下的 SKILL.md 内容",
+    inputSchema: {
+      type: "object",
+      properties: {
+        name: {
+          type: "string",
+          description: "skill 名称（目录名或 SKILL.md frontmatter 的 name）"
+        }
+      },
+      required: ["name"]
+    },
+    annotations: { readOnlyHint: !0, idempotentHint: !0 }
+  };
+  e.server.setRequestHandler(C, async () => ({ tools: [o] })), e.server.setRequestHandler(L, async (r) => {
+    if (r.params.name === "get_skill") {
+      const n = r.params.arguments, s = n && typeof n == "object" && typeof n.name == "string" ? n.name : void 0;
+      if (!s)
+        return {
+          content: [
+            {
+              type: "text",
+              text: "Missing required argument: name"
+            }
+          ],
+          isError: !0
+        };
+      try {
+        const i = await E(t, s);
+        if (!i) {
+          const h = (await w(t)).map((l) => {
+            const k = [l.dirName, l.name].filter(Boolean).join(", "), g = l.description ? ` - ${l.description}` : "";
+            return `- ${k}${g}`;
+          }).join(`
+`);
+          return {
+            content: [
+              {
+                type: "text",
+                text: `Skill not found: ${s}
+
+Available skills:
+` + (h || "- (none)")
+              }
+            ],
+            isError: !0
+          };
+        }
+        return {
+          content: [
+            {
+              type: "text",
+              text: i.markdown
+            }
+          ]
+        };
+      } catch (i) {
+        return {
+          content: [
+            {
+              type: "text",
+              text: `Failed to read skill: ${i}`
+            }
+          ],
+          isError: !0
+        };
       }
-    ],
-    isError: !0
-  }));
+    }
+    return {
+      content: [
+        {
+          type: "text",
+          text: `Tool not found: ${r.params.name}`
+        }
+      ],
+      isError: !0
+    };
+  });
 }
-async function D() {
-  const r = a.dirname(l(import.meta.url)), e = a.resolve(r, "../package.json"), o = JSON.parse(await i.readFile(e, "utf-8")), t = new R(
+async function O() {
+  const e = a.dirname(p(import.meta.url)), t = a.resolve(e, "../package.json"), o = JSON.parse(await c.readFile(t, "utf-8")), r = new R(
     {
       name: o.name,
       version: o.version
@@ -168,13 +298,13 @@ async function D() {
       }
     }
   );
-  return C(t), T(t), $(t), t;
+  return j(r), H(r), I(r), r;
 }
-async function H() {
+async function b() {
   console.error("Starting MCP server serving...");
-  const r = await D(), e = new v();
-  await r.connect(e);
+  const e = await O(), t = new F();
+  await e.connect(t);
 }
-H().catch((r) => {
-  console.error("Fatal error:", r), process.exit(1);
+b().catch((e) => {
+  console.error("Fatal error:", e), process.exit(1);
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "前端开发的一些cursor mcp工具集",
   "name": "@reus-able/frontend-helper-mcp",
-  "version": "1.0.13",
+  "version": "1.1.1",
   "publishConfig": {
     "access": "public"
   },

package/resources/command-prompts/install-skill.md

@@ -0,0 +1,55 @@
+## 帮助用户进行技能安装
+
+请你协助用户对mcp中定义的技能进行安装。请按照如下步骤进行操作
+
+## 1. 获取用户输入的技能名称
+用户在使用当前 command 时，应该附带技能名称作为参数。如果没有，需要提示用户进行输入。
+当用户输入的是「全部」，那么需要安装目前所有的技能。技能列表如下：
+
+1. vue-components
+2. vue-hooks
+
+## 2. 获取技能信息
+
+你可以使用 `get_skill` mcp 工具来获取用户输入的技能名称对应的技能信息。如果存在skill，那么其会返回skill的 `SKILL.md` 的内容
+
+## 3. 检测项目中是否已安装该技能
+
+你需要在 `.claude/skills/` 目录下检测是否已存在该技能的目录。如果存在，那么需要提示用户进行选择
+1. 覆盖安装
+2. 取消安装
+
+询问的格式如下：
+```
+⚠️ 当前项目中已经包含该技能，是否要覆盖安装？(y/n)
+```
+
+## 4. 写入技能
+
+根据用户的选择，你需要执行不同的操作：
+- 如果用户选择了覆盖安装，那么需要删除已存在的技能目录，然后创建新的技能目录，并将技能信息写入其中。
+- 如果用户选择了取消安装，那么需要提示用户取消安装操作。
+
+你需要在 `.claude/skills/` 目录下创建一个新的目录，目录名就是技能名称。然后把技能信息写入到 `SKILL.md` 文件中。
+
+## 5. 安装完成
+
+安装完成后，需要提示用户安装成功。格式如下：
+```
+✅ 技能安装成功：<技能名称>
+```
+
+如果用户选择了取消安装，那么需要提示用户取消安装操作。格式如下：
+```
+❌ 技能安装取消：<技能名称>
+```
+
+如果用户输入的技能名称不存在，那么需要提示用户技能不存在。格式如下：
+```
+❌ 技能不存在：<技能名称>
+```
+
+如果安装了多个技能，那么需要提示用户安装完成。格式如下：
+```
+✅ 技能安装成功：<技能名称1>, <技能名称2>, ...
+```

package/resources/skills/vue-components/SKILL.md

@@ -0,0 +1,108 @@
+---
+name: vue-component
+description: 构建 Vue3 SFC 组件，采用分层架构，包含组件、样式、模板、脚本等文件。
+---
+
+## 构建Vue3 SFC组件
+
+你需要按照如下要求构建一个 Vue3 SFC 组件
+
+### 1) 组件文件结构
+组件文件结构应该如下：
+```
+./MyComponent/
+├── components/
+│   └── // 子组件目录，可选
+├── hooks/
+│   └── useMyComponent.ts
+├── constants.ts
+├── utils.ts
+├── types.ts
+└── index.vue
+```
+components中应该递归地去编写子组件，每个子组件的文件结构与 MyComponent 相同。
+
+### 2) 各个文件的内容与规范
+
+#### 2.1) index.vue
+index.vue 是组件的入口文件，应该包含
+
+1. defineOptions 定义组件选项，必须包含name属性，值为组件的名称。
+2. defineProps 定义组件的 props，需要以类型定义的方式定义，例如：defineProps<IProps>()
+3. defineEmits 定义组件的 emits，需要以类型定义的方式定义，例如：defineEmits<IEmits>()
+4. 类型定义应该都放在 types.ts 文件中，例如：IProps、IEmits 等。
+5. 组件内编写顺序应该为：script setup -> template -> style scoped
+
+对于组件的逻辑层，应该编写在 useMyComponent.ts 文件中。该文件的编写请使用 `vue-hooks` SKILL。
+
+以下是完整示例
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { IProps, IEmits } from './types'
+import { useMyComponent } from './hooks/useMyComponent'
+
+defineOptions({
+  name: 'MyComponent',
+})
+
+const props = defineProps<IProps>()
+const emits = defineEmits<IEmits>()
+
+const { title } = useMyComponent(props, emits)
+</script>
+
+<template>
+  <div class="my-component">
+    <h1>{{ title }}</h1>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.my-component {
+  h1 {
+    color: red;
+  }
+}
+</style>
+```
+
+
+#### 2.2) types.ts
+types.ts 文件应该包含组件的 props、emits 类型定义。例如：
+
+```ts
+export interface IProps {
+  title: string
+}
+
+export interface IEmits {
+  (e: 'click'): void
+}
+```
+
+#### 2.3) hooks/useMyComponent.ts
+hooks/useMyComponent.ts 文件应该包含组件的逻辑层代码。该文件的编写请使用 `vue-hooks` SKILL。
+
+#### 2.4) constants.ts
+constants.ts 文件应该包含组件的常量定义。例如：
+```ts
+export const DEFAULT_TITLE = 'My Component'
+```
+
+#### 2.5) utils.ts
+utils.ts 文件应该包含组件的工具函数。例如：
+
+请注意
+1. **工具函数应该是纯函数，不应该包含任何副作用。**
+2. **遵守DRY原则，优先查看项目中的 utils.ts 文件，查看是否有重复的工具函数。**
+
+```ts
+export function formatTitle(title: string) {
+  return title.toUpperCase()
+}
+```
+
+### 3) 其他事项
+
+1. 对于样式，你需要判断项目是否使用scss、是否使用tailwind。在style标签中，根据项目情况优先使用 @apply tailwind 类名，其次使用 scss 类名。

package/resources/skills/vue-hooks/SKILL.md

@@ -0,0 +1,148 @@
+---
+name: vue-hooks
+description: 构建 Vue3 组件的 hooks 函数。
+---
+
+## 构建Vue3 组件的 hooks 函数
+
+你需要按照如下要求构建一个 Vue3 组件的 hooks 函数
+
+### 1) 入参
+
+hooks 函数的入参应该包含组件的 props 和 emits。例如：
+
+```ts
+export function useMyComponent(props: IProps, emits: IEmits) {
+  // 组件逻辑
+}
+```
+
+IProps 和 IEmits 是组件的 props 和 emits 类型定义。应该从 types.ts 文件中引入。
+
+### 2) 文件内容与规范
+
+文件应该按照如下规则与顺序编写：
+
+#### 2.1) 状态定义区
+
+hooks 函数中应该包含组件的状态定义，以及相关的操作行为。避免hooks外部直接对状态进行操作。例如：
+
+```ts
+export function useMyComponent(props: IProps, emits: IEmits) {
+  const visible = ref(false);
+  
+  const handleVisibleChange = (value: boolean) => {
+    visible.value = value;
+  };
+
+  // 业务逻辑
+  // ...
+
+  return {
+    visible: readonly(visible),
+    handleVisibleChange,
+  };
+}
+```
+
+要求：
+1. 状态定义区应该在 hooks 函数的顶部。
+2. 对于复杂状态的类型，应该使用 TypeScript 类型定义，并提取到 types.ts 文件中。
+3. 状态返回值应该是 readonly，避免外部直接修改状态。
+4. 状态应该有相对应的操作行为，如果没有的话设置一个简单的set方法即可。
+
+#### 2.2) 业务逻辑区
+
+hooks 函数中应该包含组件的业务逻辑。例如：
+
+```ts
+export function useMyComponent(props: IProps, emits: IEmits) {
+  const visible = ref(false);
+  
+  const handleVisibleChange = (value: boolean) => {
+    visible.value = value;
+  };
+
+  // 业务逻辑
+  const handleOpenDialog = () => {
+    handleVisibleChange(true);
+    // 具体逻辑...
+  };
+
+  const onXXX = () => {
+    // 具体逻辑...
+    emit('xxx');
+  }
+
+  return {
+    // ...状态定义
+    handleOpenDialog,
+    onXXX,
+  };
+}
+```
+
+要求：
+1. 业务逻辑区应该在状态定义区下方。
+2. 业务逻辑中需要操作状态的地方，应该调用相关的操作行为。
+3. 业务逻辑中，避免出现与当前状态无相关的函数，如果只是单纯的工具函数，应该提取到 utils.ts 文件中。
+4. 相关的业务逻辑应该被集中编写
+
+#### 2.3) 声明周期函数区
+
+如果组件需要在生命周期的某个阶段执行一些逻辑，应该在声明周期函数区中实现，并导出在组件中使用。例如：
+
+```ts
+export function useMyComponent(props: IProps, emits: IEmits) {
+  // 状态声明
+  // ...
+
+  // 业务逻辑
+  // ...
+
+  const handleMounted = () => {
+    handleInit();
+    // 具体逻辑...
+  };
+
+  return {
+    // ...状态定义
+    // ...业务逻辑
+    handleMounted,
+  };
+}
+```
+
+要求：
+1. 声明周期函数区应该在业务逻辑区下方。
+2. 声明周期函数中，应该是对业务逻辑的组合调用，避免在其中进行复杂的逻辑处理。
+
+#### 2.4) hooks的拆分
+
+如果一个 hooks 函数的业务逻辑比较复杂，应该考虑将其拆分成多个 hooks 函数。每个 hooks 函数负责处理一个独立的业务逻辑。例如
+
+```ts
+export function useMyComponent(props: IProps, emits: IEmits) {
+  const logicA = useMyComponentLogicA(props, emits);
+  const logicB = useMyComponentLogicB(props, emits);
+
+  const handleMounted = () => {
+    logicA.handleInit();
+    logicB.handleInit();
+    // 具体逻辑...
+  };
+
+  return {
+    // 导出逻辑A
+    ...logicA,
+    // 导出逻辑B
+    ...logicB,
+
+    // ... 其余导出
+    handleMounted,
+  };
+}
+```
+
+1. 其中每一个 hooks 函数都应该符合以上的要求。
+2. hooks统一存放在 `hooks` 目录下。