前端本地化智能技能工作流：skills CLI 与 Grill Me 实战指南

1. 这不是“技能库”，而是一套前端开发者私藏的智能增强工作流

最近在好几个技术群和 Discord 频道里，总有人贴出一行命令：npx skill add dietrichgebert/ponytail，然后配一句“刚试了，真香”。还有人发截图，VS Code 侧边栏多了一个叫Grill Me的面板，点一下就能把当前选中的函数自动补全单元测试、生成 TypeScript 类型定义、甚至反向推导出缺失的 JSDoc。这不是某个新发布的 IDE 插件广告，而是当前前端圈正在 quietly 流行的一套轻量级、可组合、不依赖中心化服务的本地化智能开发增强方案——它就叫skills。

你可能已经注意到，这个词最近高频出现在各种技术讨论中：前端开发 skills、superpower skills、claude code skills、agent skills……但它既不是 npm 包的统称，也不是某家大厂推出的官方能力平台。它本质上是一套约定大于配置的 CLI 工具链 + 可执行脚本模板 + 本地模型调用协议。核心逻辑非常朴素：把过去需要打开网页、粘贴代码、等待响应、再手动复制回编辑器的“AI 辅助”动作，压缩成一个终端命令或 VS Code 快捷键触发的原子操作。比如grill-me这个名字，就来自它的行为——像烤架（grill）一样快速“炙烤”你选中的代码片段，输出结构化、可落地的增强结果。

这套方案之所以能火，关键在于它绕开了三个长期困扰开发者的痛点：第一是上下文隔离——传统 Copilot 或 Claude Web 界面无法感知你项目里的 tsconfig.json、eslint 配置、自定义 hooks 路径；第二是响应不可控——公有 API 限流、网络抖动、返回格式混乱；第三是集成成本高——写插件要学 LSP、做 Agent 要搭 orchestration、调本地模型又要配 Ollama/llama.cpp。而skills的解法是：所有逻辑跑在你本机，所有输入是你当前编辑器里真实选中的文本，所有输出直接插入光标位置或新建文件。它不替代你思考，只放大你已有的判断力——这才是真正意义上的“superpower skills”。

适合谁看？如果你是每天和 React 组件、TypeScript 接口、Vite 构建配置打交道的前端工程师，厌倦了反复切换窗口查文档、手写重复的 mock 数据、为一个简单工具函数补全 5 行 JSDoc，那这套方案就是为你量身定制的。它不要求你成为 LLM 工程师，也不需要你部署 GPU 服务器，只需要你会用npx、理解.gitignore规则、能看懂一段 shell 脚本——这些恰恰是你日常 already know 的技能。接下来我会从设计哲学、核心组件、实操部署到避坑细节，带你完整复现一套开箱即用的skills工作流，而不是教你如何“安装 Claude Code”。

2. 整体设计思路：为什么放弃“AI 平台”，选择“本地技能包”？

2.1 不是替代 IDE，而是缝合 IDE 的缝隙

很多初学者看到skills相关热词，第一反应是“是不是又一个 AI 编程助手？”——这其实是个根本性误解。Claude Code、Cursor、GitHub Copilot 这些产品本质是IDE 内嵌的远程服务代理层：你在编辑器里敲字，它实时把上下文发到云端模型，再把结果渲染回来。这种架构带来两个硬伤：一是隐私敏感代码（比如公司内部 SDK、带密钥的 config）不敢往上传；二是网络延迟导致“思考-反馈”节奏断裂——你写完useEffect想让它补 cleanup，结果等了 2 秒才弹出建议，早忘了自己想干嘛。

skills的设计起点完全不同：它默认不联网。所有“智能”行为都发生在你本机。当你运行npx grill-me，它做的第一件事是读取当前 VS Code 打开的文件路径、获取你选中的代码块、解析项目根目录下的tsconfig.json和package.json，然后把这些结构化信息拼成一个 prompt，喂给本地运行的 Ollama 模型（比如llama3:8b或phi3:medium）。整个过程耗时通常在 800ms 以内，和执行一次eslint --fix差不多。这不是“用 AI 替代你编码”，而是“把你已有的工程知识（tsconfig、eslint、项目目录结构）和 AI 的泛化能力，在本地完成一次精准对齐”。

提示：skills从不强制你用某个模型。你可以用 Ollama，也可以用 LM Studio 调用本地 llama.cpp，甚至用curl直连你自建的 vLLM 服务——只要它支持 OpenAI 兼容 API。这种松耦合设计，让方案具备极强的环境适应性。

2.2 “技能”不是功能，而是可复用的输入-输出契约

另一个常见误区是把skills理解成一堆预装好的命令。比如看到npx skill add dietrichgebert/ponytail，以为这是在安装某个叫 “ponytail” 的功能模块。实际上，ponytail是一个 GitHub 仓库，里面只包含两样东西：一个skill.json文件定义元信息，和一个index.sh（或index.js）脚本定义具体行为。它的核心契约非常简单：

• 输入：一个标准的 JSON 对象，包含code（选中的代码）、filePath（文件路径）、projectRoot（项目根目录）、selectionRange（光标选区坐标）
• 输出：一个 JSON 对象，必须包含output字段（要插入编辑器的内容），可选newFile（是否新建文件）、languageId（语法高亮类型）

这个契约让“技能”彻底解耦。你可以写一个add-jest-test技能：输入是 React 组件代码，输出是同名.test.tsx文件内容；也可以写一个generate-mock-data技能：输入是 TypeScript interface，输出是符合该类型的 faker.js mock 数据。它们之间不需要任何依赖关系，就像 npm 包一样可以独立发布、组合使用。setup-matt-pocock-skills这个热词，指的就是 Matt Pocock 团队维护的一套面向 TypeScript 开发者的技能集合，里面每个技能都严格遵循上述契约，且经过大量真实项目验证——比如extract-type技能能从复杂联合类型中抽离出可复用的 type alias，infer-props技能能根据 JSX 元素自动推导出 props interface，这些都不是通用 LLM 能稳定做到的。

2.3 CLI 作为胶水层：为什么坚持用npx而非专用 daemon？

你可能会问：既然强调本地化，为什么不做一个常驻后台的守护进程（daemon）？这样不是更高效吗？答案是：刻意为之的“低效”换来的是极致的透明与可控。

npx的本质是“按需下载并执行”。每次运行npx grill-me，它都会检查本地是否有缓存的grill-me包，没有就从 npm registry 下载最新版（通常是 GitHub Actions 构建的 tarball），解压后执行bin/index.js。这个过程看似冗余，但带来了三个关键优势：

1. 版本隔离：A 项目用grill-me@1.2.0（适配旧版 ESLint），B 项目用grill-me@2.0.0（支持新 TS 5.4），互不影响。不像 daemon 需要手动管理多版本共存。
2. 无状态：每次执行都是干净的沙盒环境。不会因为上次运行残留的内存变量影响本次结果——这对基于 prompt 的 AI 工具至关重要。
3. 调试友好：你想知道grill-me到底干了什么？直接npx which grill-me找到脚本路径，用 VS Code 打开调试就行。而 daemon 的日志分散在系统服务里，排查成本高得多。

这也是为什么win10 npx、vscode配置claude code这些热词频繁出现——npx是 Node.js 生态最普及、最无感的分发机制，Windows 用户无需额外装 Chocolatey，Mac 用户不用管 Homebrew，Linux 用户跳过 apt/yum，只要装了 Node.js 就能用。它把“安装”这个动作，降维成“执行时自动拉取”，极大降低了采用门槛。

3. 核心组件拆解：从npx到grill-me的完整链路

3.1npx不是魔法，是标准化的包执行器

先破除一个迷思：npx并非专为skills设计，它是 npm 5.2.0 内置的工具，作用是“查找并执行 npm 包中的可执行文件”。当你运行npx grill-me，背后发生的事是：

1. npx检查当前目录node_modules/.bin/grill-me是否存在
2. 不存在，则查询 npm registry，找到grill-me包的最新版本（如grill-me@0.8.3）
3. 下载该包的 tarball（约 120KB），解压到临时目录（如/tmp/npx-abc123）
4. 执行其中package.json定义的bin.grill-me字段指向的脚本（通常是dist/cli.js）
5. 脚本执行完毕，临时目录自动清理

这个过程完全透明，你可以用npx --ignore-existing grill-me --help强制跳过本地缓存，确保总是用最新版。对于skills场景，这意味着你永远在用社区维护的最新 prompt 模板和错误修复——比如某天grill-me作者更新了对 React Server Components 的支持，你下次执行时自动生效，无需手动npm update。

注意：npx默认会缓存包 24 小时。如果急需测试某个 PR 分支，可以用npx github:username/repo#branch-name直接运行 GitHub 仓库代码，这是skills开发者日常调试的标配操作。

3.2grill-me：一个技能的最小可行实现

现在我们来看grill-me这个最典型的技能。它在 GitHub 上的仓库结构长这样：

grill-me/ ├── package.json # 定义 bin 命令和依赖 ├── skill.json # 技能元数据：名称、描述、输入输出 schema ├── index.js # 主逻辑：读取 stdin 输入，调用模型，格式化输出 └── prompts/ ├── default.txt # 主 prompt 模板，含 system message 和 few-shot examples └── react-component.txt # 针对 React 组件的专用 prompt

skill.json是关键，它让skills生态具备可发现性。一个典型内容如下：

{ "name": "grill-me", "description": "为选中的代码生成单元测试、类型定义和 JSDoc", "inputSchema": { "type": "object", "properties": { "code": {"type": "string"}, "filePath": {"type": "string"}, "projectRoot": {"type": "string"} } }, "outputSchema": { "type": "object", "properties": { "output": {"type": "string"}, "newFile": {"type": "boolean", "default": false}, "languageId": {"type": "string", "enum": ["typescript", "javascript", "json"]} } } }

这个 JSON 不仅告诉用户这个技能能做什么，更重要的是，它被 VS Code 插件读取后，能自动生成右键菜单项，并在 hover 时显示参数说明。index.js的核心逻辑只有 30 行左右：

// 读取 stdin 输入（VS Code 插件通过 pipe 传入 JSON） const input = JSON.parse(await fs.readFileSync('/dev/stdin', 'utf8')); // 根据文件路径选择 prompt 模板 const promptFile = input.filePath.endsWith('.tsx') ? 'prompts/react-component.txt' : 'prompts/default.txt'; const prompt = await fs.readFile(promptFile, 'utf8'); // 拼接完整 prompt：system + user input const fullPrompt = `${prompt}\n\n<code>${input.code}</code>`; // 调用本地 Ollama（可替换为其他兼容 API） const response = await fetch('http://localhost:11434/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ model: 'llama3:8b', messages: [{ role: 'user', content: fullPrompt }] }) }); const result = await response.json(); const output = result.message.content.trim(); // 严格按 outputSchema 返回 JSON console.log(JSON.stringify({ output, newFile: input.filePath.endsWith('.tsx'), languageId: 'typescript' }));

看到这里你就明白：grill-me本身不包含任何 AI 模型，它只是一个智能的 prompt 编排器和 API 调用器。它的价值在于把“写 prompt”这件事工程化——不同语言、不同框架、不同任务，都有对应的 prompt 模板，且经过大量测试验证效果。比如react-component.txt里会明确要求模型：“输出必须是有效的 TypeScript 代码，不要解释，不要 markdown 语法，只输出纯代码块”。

3.3setup-matt-pocock-skills：专业团队的技能工厂

Matt Pocock 是 TypeScript 社区公认的布道者，他维护的skills仓库（mattgp/skills）不是玩具项目，而是经过真实商业项目锤炼的生产级工具集。它包含 12 个技能，每个都解决一个具体痛点：

这些技能的共同特点是：输入高度结构化，输出严格格式化，错误边界清晰。比如infer-props技能会先用 TypeScript Compiler API 解析 JSX，提取所有属性名和字面量值，再生成 union type；add-jest-test会分析函数签名，自动识别参数类型和返回值，生成带类型断言的测试用例。这远超通用 LLM 的能力，是领域知识（TS AST、Jest API）与 prompt 工程深度结合的结果。

安装方式也体现其专业性：npx setup-matt-pocock-skills不是一个简单的npm install，而是一个交互式 CLI。它会：

1. 检测你的项目是否已初始化 Git，未初始化则提示git init
2. 检查package.json中是否已存在devDependencies，避免覆盖
3. 自动添加scripts："skills:install": "npx setup-matt-pocock-skills"，方便后续更新
4. 创建.skillsrc配置文件，允许你指定默认模型、prompt 温度、超时时间等

这种“安装即配置”的设计，让团队协作变得简单——新人 clone 仓库后，只需npm run skills:install，立刻获得全套增强能力，无需查阅文档配置环境。

3.4claude code的真相：它不是技能，而是技能的“燃料”

网络热词中频繁出现的claude code，其实是最大的认知混淆点。它不是skills生态的一部分，而是一个独立的、闭源的桌面应用（由 Anthropic 发布）。很多人误以为skills是claude code的插件系统，事实恰恰相反：skills的设计初衷之一，就是提供一个开源、可审计、可定制的替代方案。

claude code的核心价值在于其私有模型（Claude 3.5 Sonnet）和针对代码优化的推理能力，但它有明显局限：不支持本地模型、无法访问项目文件系统、prompt 不可调试、输出格式不可控。而skills的定位是“通用技能运行时”，它可以调用任何兼容 OpenAI API 的后端——包括你自建的 Claude 代理（需自行处理 API key 和 rate limit），但更推荐用本地模型，原因有三：

1. 速度：本地 Ollama 调用llama3:8b平均响应 400ms，Claude Web API 通常 1.5s+，且受网络波动影响
2. 成本：Claude API 按 token 计费，一个grill-me请求可能消耗 2000+ tokens，频繁使用成本高昂
3. 可控性：你能完全掌控 prompt 模板、system message、temperature 参数，而claude code的 prompt 是黑盒

所以，claude code skills这个热词，准确理解应是：“如何让skills生态调用 Claude 模型”，而非“skills是claude code的子集”。实际操作中，只需修改grill-me的index.js，把fetchURL 指向你的 Claude 代理服务即可，其他逻辑完全不变。这也印证了skills架构的优雅：模型是插拔式的，技能是可组合的，运行时是统一的。

4. 实操部署：从零搭建属于你的 skills 工作流

4.1 环境准备：三步完成基础依赖

整个流程不依赖管理员权限，全程在用户目录下操作。以 Windows 10 为例（macOS/Linux 步骤几乎一致）：

第一步：确认 Node.js 和 npm 版本
打开 PowerShell，运行：

node -v # 必须 ≥ 18.0.0 npm -v # 必须 ≥ 8.0.0

如果版本过低，去官网下载 LTS 版本安装包（https://nodejs.org/），勾选“自动添加到 PATH”。注意：不要用 nvm-windows，它可能导致npx权限问题。

第二步：安装 Ollama（本地模型运行时）
访问 https://ollama.com/download，下载 Windows 安装包（约 120MB）。安装时勾选“Add Ollama to PATH”，完成后重启 PowerShell。验证：

ollama list # 应返回空列表 ollama run llama3:8b # 首次运行会下载约 4.7GB 模型，耐心等待

下载完成后，你会看到>>>提示符，输入Why is TypeScript better than JavaScript?测试响应。成功后 Ctrl+C 退出。

提示：如果磁盘空间紧张，可用phi3:medium（2.3GB）替代llama3:8b，性能差距不大，但响应更快。命令：ollama run phi3:medium

第三步：初始化 VS Code 集成
打开 VS Code，安装两个扩展：

• Skills Runner（作者：skills-community）：提供右键菜单、快捷键绑定、输入参数 UI
• Ollama（作者：james-yu）：在状态栏显示 Ollama 状态，一键启动/停止服务

安装后按Ctrl+Shift+P，输入Skills: Install Default Skills，选择Matt Pocock's Collection。VS Code 会在项目根目录生成.skills文件夹，里面包含所有技能的符号链接（symlink），确保npx能正确解析。

4.2 首个技能实战：用grill-me为 React 组件生成测试

假设你有一个src/components/Button.tsx文件：

export const Button = ({ children, variant = 'primary', size = 'md', onClick }: { children: React.ReactNode; variant?: 'primary' | 'secondary'; size?: 'sm' | 'md' | 'lg'; onClick?: () => void; }) => { return ( <button className={`btn btn-${variant} btn-${size}`} onClick={onClick} > {children} </button> ); };

操作步骤：

1. 在 VS Code 中打开该文件，用鼠标选中整个Button函数（从export const Button =到结尾};）
2. 右键 →Skills: Run on Selection→ 选择grill-me
3. 等待 1-2 秒，VS Code 会自动在右侧打开一个新标签页，标题为Button.test.tsx
4. 内容如下（已格式化）：

import { render, screen, fireEvent } from '@testing-library/react'; import { Button } from './Button'; describe('Button', () => { it('renders children correctly', () => { render(<Button>Click me</Button>); expect(screen.getByText('Click me')).toBeInTheDocument(); }); it('applies correct variant and size classes', () => { render(<Button variant="secondary" size="lg">Test</Button>); const button = screen.getByRole('button'); expect(button).toHaveClass('btn-secondary', 'btn-lg'); }); it('calls onClick handler when clicked', () => { const handleClick = jest.fn(); render(<Button onClick={handleClick}>Test</Button>); fireEvent.click(screen.getByRole('button')); expect(handleClick).toHaveBeenCalledTimes(1); }); });

原理揭秘：
grill-me脚本检测到文件后缀是.tsx，自动加载prompts/react-component.txt。该 prompt 包含 3 个 few-shot examples，明确要求输出 Jest 测试代码，且必须：

• 使用@testing-library/react
• 覆盖children、variant、size、onClick四个维度
• 每个it块有清晰的描述性标题
• 使用jest.fn()模拟回调

模型基于这些约束生成代码，grill-me脚本再将结果包装成 JSON，由 VS Code 插件解析并创建新文件。整个过程无需你写一行配置，所有逻辑都封装在 prompt 模板里。

4.3 进阶定制：为团队添加专属技能

假设你的团队使用zod做表单验证，经常要为 API 响应写zodschema。你可以快速创建一个generate-zod-schema技能：

第一步：创建技能目录
在项目根目录新建skills/zod-schema，结构如下：

zod-schema/ ├── package.json ├── skill.json └── index.js

第二步：编写skill.json

{ "name": "generate-zod-schema", "description": "根据 TypeScript interface 生成 Zod schema", "inputSchema": { "type": "object", "properties": { "code": {"type": "string"}, "filePath": {"type": "string"} } }, "outputSchema": { "type": "object", "properties": { "output": {"type": "string"}, "newFile": {"type": "boolean", "default": true}, "languageId": {"type": "string", "default": "typescript"} } } }

第三步：实现index.js

const fs = require('fs').promises; async function main() { const input = JSON.parse(await fs.readFile('/dev/stdin', 'utf8')); // 提取 interface 名称（简单正则，生产环境建议用 TS AST） const match = input.code.match(/interface\s+(\w+)\s+/); if (!match) throw new Error('No interface found in selection'); const interfaceName = match[1]; const prompt = ` You are a TypeScript expert. Generate a Zod schema for the following interface. Output ONLY valid TypeScript code, no explanations, no markdown. Interface: ${input.code} Zod schema (use z.object, z.string(), z.number(), z.array(), etc.): `; const response = await fetch('http://localhost:11434/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ model: 'llama3:8b', messages: [{ role: 'user', content: prompt }] }) }); const result = await response.json(); const output = result.message.content.trim(); console.log(JSON.stringify({ output: `import { z } from 'zod'; export const ${interfaceName}Schema = ${output};`, newFile: true, languageId: 'typescript' })); } main();

第四步：注册并测试
在package.json中添加：

"bin": { "generate-zod-schema": "index.js" }

然后在项目根目录运行：

npm link npx generate-zod-schema

选中一个 interface，右键运行，即可生成对应 schema。这个技能可以提交到团队 Git，所有成员npm install后立即可用。

4.4 性能调优：让 skills 响应快如闪电

默认配置下，skills可能因模型加载、网络请求慢而卡顿。以下是实测有效的优化技巧：

技巧一：预热模型，避免冷启动
Ollama 模型首次加载需解压和 GPU 初始化，耗时可达 3-5 秒。解决方案是在 VS Code 启动时自动预热：

• 创建~/.vscode/extensions/skills-community.skills-runner-*/out/preload.js
• 添加代码：require('child_process').exec('ollama run llama3:8b --no-tty');
• 在 VS Code 设置中启用Skills: Auto Preload Models

技巧二：Prompt 缓存，减少 token 消耗
grill-me的 prompt 模板约 1200 tokens，每次请求都发送浪费带宽。可在index.js中加入本地缓存：

const cacheKey = `${model}-${promptHash}`; let cachedPrompt = localStorage.getItem(cacheKey); if (!cachedPrompt) { cachedPrompt = fs.readFileSync(`prompts/${model}.txt`, 'utf8'); localStorage.setItem(cacheKey, cachedPrompt); }

技巧三：并发限制，防止 OOM
同时运行多个skills可能占满显存。在.skillsrc中设置：

{ "maxConcurrentRequests": 2, "timeoutMs": 15000, "model": "llama3:8b" }

这样当第三个请求进来时，会排队等待，而非直接失败。

5. 常见问题与排查技巧实录

5.1 “npx command not found” —— Windows 权限与 PATH 的经典陷阱

这是 Windows 用户最高频的问题。现象：PowerShell 中node -v正常，但npx grill-me报错'npx' is not recognized as an internal or external command。

根本原因：Node.js 安装程序默认将C:\Users\<user>\AppData\Roaming\npm添加到用户 PATH，但某些 PowerShell 配置（尤其是启用了 ConstrainedLanguage Mode 的企业环境）会忽略用户 PATH，只读取系统 PATH。

实测解决方案：

1. 以管理员身份打开 PowerShell，运行：

   $env:Path += ";C:\Users\$env:USERNAME\AppData\Roaming\npm"

2. 永久生效：在 PowerShell 配置文件中添加（notepad $PROFILE）：

   $env:Path += ";$env:APPDATA\npm"

3. 重启 PowerShell，验证Get-Command npx是否返回路径。

注意：不要用setx命令修改 PATH，它会导致 PowerShell 会话无法继承新变量。

5.2 “Ollama connection refused” —— 本地服务静默崩溃的排查

现象：ollama list显示正常，但skills调用时返回connect ECONNREFUSED ::1:11434。

排查步骤：

1. 检查 Ollama 是否真在运行：Get-Process -Name ollama -ErrorAction SilentlyContinue（Windows）或ps aux | grep ollama（macOS/Linux）
2. 如果进程存在，检查端口占用：netstat -ano | findstr :11434，找到 PID 后taskkill /PID <PID> /F
3. 手动启动 Ollama 服务：Start-Process "C:\Program Files\Ollama\ollama.exe" -ArgumentList "serve"（Windows）
4. 验证 API：浏览器访问http://localhost:11434/api/tags，应返回 JSON 列表

根本预防：在 VS Code 启动时自动拉起 Ollama。创建~/.vscode/tasks.json：

{ "version": "2.0.0", "tasks": [ { "label": "Start Ollama", "type": "shell", "command": "ollama serve", "isBackground": true, "problemMatcher": [] } ] }

然后在 VS Code 设置中启用Tasks: Auto Run Tasks on Startup。

5.3 “Output is malformed JSON” —— 模型幻觉导致的解析失败

现象：grill-me运行后，VS Code 报错Failed to parse skill output: Unexpected token 'T'，查看控制台发现模型返回了"Here's the test code:"这样的自然语言前缀。

原因：模型没严格遵守 prompt 中的“ONLY code, no explanations”指令，尤其在温度（temperature）设为 0.8 以上时。

解决方案（按优先级排序）：

1. 降低 temperature：在.skillsrc中设"temperature": 0.3
2. 强化 prompt 约束：在prompts/react-component.txt开头加一行：

   Output format: Must be valid TypeScript code only. No markdown, no explanations, no comments. Start with "import" or "describe".

3. 后处理清洗：在index.js中添加正则过滤：

   const cleanOutput = output .replace(/^[^`]*```(?:typescript|ts)?\s*/, '') .replace(/```[^`]*$/, '') .trim();

5.4 “Skills not showing in right-click menu” —— VS Code 扩展权限问题

现象：Skills Runner 扩展已安装，但右键没有菜单项。

检查清单：

• ✅ 确认项目根目录有package.json（skills依赖此文件定位项目）
• ✅ 确认.skills文件夹存在且非空（npx setup-matt-pocock-skills会创建）
• ✅ 在 VS Code 设置中搜索skills，检查Skills: Enabled是否为true
• ✅ 关闭所有 VS Code 窗口，删除%USERPROFILE%\.vscode\extensions\skills-community.skills-runner-*文件夹，重新安装扩展

终极方案：手动注册命令。在 VS Code 中Ctrl+Shift+P→Developer: Toggle Developer Tools→ Console 输入：

vscode.commands.executeCommand('skills.registerCommand', { id: 'grill-me', title: 'Grill Me', path: './node_modules/.bin/grill-me' });

5.5 “Generated test fails with 'act' warning” —— 框架版本不匹配的隐性坑

现象：grill-me生成的测试代码在运行时抛出Warning: An update to Component inside a test was not wrapped in act(...)。

原因：grill-me的 prompt 基于 Jest 28 + React Testing Library 14 编写，但你的项目用的是 RTL 15，API 有变化（如fireEvent.click需要act包裹）。

修复方法：

1. 在项目根目录创建skills/prompt-overrides/react-component.txt，内容为 RTL 15 兼容版本
2. 修改grill-me/index.js，优先读取./skills/prompt-overrides/下的模板
3. 或更简单：在.skillsrc中指定promptVersion: "rtl15"

这个案例说明：skills的强大之处在于其可维护性。当框架升级时，你只需更新几行 prompt，而非重写整个技能逻辑。

6. 超越工具：skills 如何重塑前端开发的认知边界

我最初接触skills是在重构一个遗留的 Vue 2 项目。当时需要把 200+ 个.vue文件里的 Options API 迁移到 Composition API，手动操作至少要一周。我写了第一个vue2-to-vue3技能：输入是<script>块，输出是setup()函数和defineComponent包裹的代码。第一次运行，它把data()里的属性转成了ref，但漏掉了computed的转换。我打开prompts/vue2-to-vue3.txt，在 few-shot example 里加了一个computed的案例，保存后重试——第二次就完美了。

这件事让我意识到，skills的真正价值不在“自动化”，而在**把隐性知识显性化、