使用 Claude Code 创建一个自己的前端知识库

前言从头开始学习 Vibe Coding从选择 Coding Plan 和适用于 AI 编程的插件开始逐步摸索。当前选择 Claude Code 结合 MiniMax 的 Coding Plan如果后续能抢到 GLM 或有更好用的模型再进行更换。当前主要使用 Opcode 和 VSCode 中的插件 Claude Code for VSCode。同时简单编写了一个总结前端知识文件的 Skill负责总结近期看到的前端知识。该知识库的大部分文件均由 AI 自动总结生成。创建文件我写了一个简单的 SKILL这个 SKILL 主要负责做这个总结生成文件的工作。在一个空文件夹中创建一个专门放 AI 生成的文件的一个文件夹我这里起名叫 knowledgeBase后续 AI 生成的文件都会放在这里。你的项目文件夹/ ├── .claude/ │ └── skills/ │ └── frontend-secretary/ │ └── SKILL.md -- 你的“前端小秘书”大脑 ├── knowledgeBase/ │ └── README.md -- 知识库首页 └── (其他文件...)SKILL.md以下内容是负责生成前端知识文件的 SKILL.md--- name: 前端小秘书 description: 前端知识沉淀助手。请全程用中文回答用户。当用户要求总结对话中的前端知识、生成技术笔记或整理代码片段时使用。 --- ### 角色定义 你是一个专业的“前端小秘书”专注于协助开发者沉淀技术知识。你的目标是将非结构化的对话转化为结构清晰、易于检索的 Markdown 技术文档。 ### 触发条件 当用户输入包含以下意图时请激活此技能 - 总结刚才的对话 - 把这段代码的知识点记下来 - 生成前端笔记 - 沉淀一下这个技术 ### 核心任务 1. **提取核心**识别对话中的前端技术点如 React, Vue, CSS, TypeScript, 性能优化等。 2. **去伪存真**去除闲聊、试错过程和冗余信息只保留最终的正确结论和最佳实践。 3. **格式化**文件内容严格按照下方的【输出模板】生成 Markdown 内容。 4.**生成文件**生成的文件名称没有要求的情况下默认使用【日期xxxx_xx_xx】[十字左右的总结].md。自动放到/knowledgeBase文件夹下面。 ### 输出模板 请严格遵循以下格式输出不要输出模板之外的废话 --- title: [根据内容生成一个简练的标题] date: [当前日期 YYYY-MM-DD] tags: [标签1, 标签2, 标签3] --- ### 核心摘要 [用一句话概括本次沉淀的核心价值例如解决了 React useEffect 闭包陷阱的问题] ### 知识点详情 #### [知识点分类例如React Hooks 机制] - **原理/概念**[简要解释技术原理] - **关键代码** javascript // 必须包含关键代码片段并添加简短注释 const [count, setCount] useState(0); - **注意事项** - [易错点或最佳实践 1] - [易错点或最佳实践 2] #### [知识点分类例如CSS 布局技巧] - **解决方案**[描述解决方案] ### 参考资料 - [如果对话中提到了官方文档或链接请在此列出] --- ### 执行约束 - **代码规范**所有代码块试阅读以下内容由 AI 总结并生成title: AI Skill与Prompt技术指南 date: 2026-04-02 tags: [AI, Skill, Prompt, Agent, 前端工具, Claude] 核心摘要全面解析 AI Skill 的核心原理、与 Prompt/Agent 的区别、使用方法以及如何为自己的项目创建自定义 Skill。一、Skill 的核心概念1.1 什么是 SkillSkill技能是一种将特定任务所需的指令、脚本和参考资源封装成可复用能力包的开放标准旨在扩展 AI Agent智能体的功能。简单来说Skill 就像是为 AI 准备的一本工作手册或操作说明书。它让 AI 从一个只能进行通用对话的聊天机器人升级为能够理解并执行特定、复杂任务的协作者。1.2 Skill 的核心原理被理解而非被执行Skill 与传统编程中的函数调用有本质区别对比维度传统函数AI Skill调用方式代码在固定位置调用编译器知道何时执行由大语言模型LLM在推理过程中读懂后自主判断是否需要使用触发机制显式调用隐式理解这意味着你不再是命令 AI 执行某个函数而是告诉它当你遇到这类问题时可以参考这本手册来解决。AI 会根据上下文理解意图然后自己决定是否需要激活某个 Skill 以及如何运用其中的指令。二、Skill 的基本结构一个 Skill 通常是一个文件夹其核心是一个名为SKILL.md的文件my-skill/ ├── SKILL.md # 核心定义文件必需 ├── scripts/ # (可选) 存放 Python 或 Bash 脚本 │ └── calculator.py ├── references/ # (可选) 存放参考资料或规则 │ └── api-docs.md └── assets/ # (可选) 资源文件 └── template.png2.1 SKILL.md 文件结构--- name: my-skill description: 这是最关键的部分描述决定了AI在什么情况下会使用这个Skill。 --- ​ # 我的 Skill 标题 ​ ## 功能 - 清晰列出这个 Skill 能做什么 ​ ## 触发方式 - 给出具体的用户指令示例 ​ ## 执行步骤 1. 分步告诉 AI 如何完成任务 ​ ## 示例输出期望的输出结果示例​2.2 元数据说明nameSkill 的唯一标识符使用英文小写和连字符description最关键的部分描述必须清晰、具体包含明确的触发词和场景。模糊的描述会导致 AI 无法正确识别三、Skill vs Workflow vs Agent区别与适用场景概念比喻核心特点适用场景工作流流水线流程固定结果可预期处理重复性高、步骤明确的任务如每日数据归档Skill方法论/手册封装了可复用的方法需要一定的判断流程大体固定但内容多变需要按特定方法处理的任务如撰写特定风格的报告Agent员工只给目标自主规划路径目标明确但路径未知需要探索和思考的复杂任务如进行一项市场调研四、Skill 的价值从执行者到项目经理没有 SkillAI 可能只是一个执行者需要你一步步下达指令拥有 SkillAI 则升级为项目经理 执行者能够理解意图分析你的模糊需求规划工作流自主拆解任务步骤自主决策在不同执行路径中做出选择数据传递管理步骤之间的数据依赖五、如何使用 Skill5.1 方式一使用 Skills CLI 工具前置准备Node.js 版本 16 及以上npxNode.js 自带核心命令# 安装 Skill从 GitHub 仓库 npx skills add 仓库源 [可选参数] ​ # 关键参数 # -a agent 指定要安装到哪个 AI 的专属目录如 claude-code # -g 全局安装让 Skill 在所有项目中都可用 # -y 自动确认所有提示 ​ # 示例为 Claude Code 全局安装一个 Skill npx skills add anthropics/skills -a claude-code -g -y5.2 方式二在特定 AI 应用中使用以OpenClaw为例使用ClawHub管理工具# 1. 安装 ClawHub npm install -g clawhub ​ # 2. 初始化 clawhub init ​ # 3. 搜索和安装 Skill clawhub search 关键词 clawhub list5.3 Skill 需要关闭吗通常不需要手动关闭。原因按需调用机制Skill 只有在 AI 根据上下文判断需要时才会被激活无后台进程Skill 本质上是一组文本指令不像软件那样占用内存需要管理的场景技能冲突多个功能相似的 Skill 互相干扰时禁用其中一个保持简洁做纯前端页面时可不安装 PDF Skill 等无关技能Bug 或过时某个 Skill 报错时暂时禁用六、如何写一个自己的 Skill6.1 创建步骤第一步创建 Skill 文件夹# 在你的 Skills 工作目录下创建一个新文件夹 mkdir my-hello-skill提示Skills 工作目录通常在~/.openclaw/workspace/skills/或.claude/skills/第二步编写 SKILL.md 文件--- name: my-hello-skill description: 这是一个用于测试的 Skill。当用户输入 hello world 或 测试 skill 时触发。 --- ​ # 我的第一个 Skill ​ 这是一个最基础的 Skill 示例用于验证自定义技能是否被成功创建和调用。 ​ ## 功能 - 当被触发时返回一个固定的字符串 ​ ## 触发方式 当用户输入以下类似内容时请触发此 Skill - hello world - 测试 skill - 运行我的技能 ​ ## 执行步骤 1. 直接返回预设的欢迎信息无需进行任何复杂计算 ​ ## 示例输出 Hello World! 你的自定义 Skill 已成功运行第三步保存并测试大多数 AI 框架会自动监听 Skills 目录变化文件保存后通常会自动热重载输入定义的触发词测试6.2 进阶复杂 Skill 结构my-advanced-skill/ ├── SKILL.md # 核心定义文件 ├── scripts/ # 存放执行脚本 │ └── calculator.py # 用于执行精确计算 └── references/ # 存放参考资料 └── api-docs.md # 相关 API 文档SKILL.md中的执行步骤会指示 AI 去调用脚本将确定性、易出错的操作交给代码处理而 AI 则专注于理解意图和规划流程。七、如何为当前项目添加 Prompt 和 Skill7.1 方式一手动创建文件推荐目录结构示例你的项目/ ├── .trae/ │ └── skills/ │ └── frontend-secretary/ │ └── SKILL.md └── src/Skill 示例frontend-secretary--- name: frontend-secretary description: 前端知识沉淀助手。当用户要求总结对话中的前端知识或生成笔记时触发。 --- ### 角色 你是一个专注于前端开发领域的知识管理专家。 ### 任务 1. 分析对话内容提取 React, CSS, JS 等技术点 2. 去除闲聊保留核心技术干货 3. 按照 Markdown 格式输出笔记 ### 输出格式 请严格按照以下格式输出...项目规则文件工具文件名存放位置Traeproject_rules.md.trae/Cursor.cursorrules项目根目录GitHub Copilotcopilot-instructions.md.github/7.2 方式二通过 IDE 设置界面打开设置Cmd ,(Mac) 或Ctrl ,(Windows)找到规则技能 (Rules Skills)选项点击创建或添加按钮填写名称、描述、指令内容选择当前项目而非全局八、Prompt 的核心概念8.1 什么是 PromptPrompt提示词就是你给 AI 的指令可以理解为人与 AI 沟通的编程语言。8.2 优质 Prompt 的万能公式要素说明示例角色告诉 AI 它是谁你是一位资深的 Python 后端工程师...任务清晰地描述要做什么...请帮我审查这段代码找出潜在的 Bug...背景提供必要的上下文...这段代码用于高并发的支付系统...约束限制回答的范围、长度或风格...回答要简练不要使用复杂的术语...格式指定输出的形式...最后请用表格形式列出修改建议。8.3 Prompt vs Skill对比PromptSkill本质一次性的指令可复用的能力包触发每次对话都需要输入设定一次按需调用复杂度适合简单任务适合复杂、可复用的任务流程九、关键注意事项路径至关重要不同的 AI 应用会从不同的目录读取 Skill。例如 Claude Code 只会识别.claude/skills目录环境依赖很多 Skill 依赖 Node.js 版本如遇报错检查是否需要升级权限问题在某些系统上可能需要使用sudo或调整权限设置描述要具体Skill 的description是最关键的模糊的描述会导致 AI 无法识别 参考资料Anthropic Skills 官方仓库Frontend Design SkillSkill Creator 插件Web Access SkillPUA SkillClaude-mem