前言¶
前端项目里,页面逻辑、操作流程和接口调用往往分散在路由、组件与请求封装里。要把这些知识交给 Agent 复用,常见做法是手写 SKILL.md,对照代码逐段整理,成本高且容易漏链。
下面介绍 SkillHub 社区 Skill code-skill(坐标 @user_c36d82a7/code-skill,版本 1.0.0)。它面向「从前端代码反推业务说明」这一路径:扫描前端仓库,归纳页面逻辑、业务场景、操作流程与 API 调用链,并产出可执行业务 Skill 的 Markdown 文档。页面标注 requires_api_key=false,安装后无需额外 API Key。
这是什么¶
code-skill 由社区发布者 user_c36d82a7 维护,分类为 dev-programming,来源为 community。一句话定位:把前端仓库里的实现细节,整理成 Agent 可加载的业务 Skill(基于通用 SKILL.md 格式)。
官方说明中的适用表述包括:当用户提到「生成业务 skill」「code-skill」「fe-code2skill」「把页面逻辑变成 skill」「扫描前端生成 skill」「代码转 skill」「帮我生成 skill」等意图时,适合启用该 Skill。
SkillHub 页面当前展示:评分 100000,下载 622 次,安装 17 次(数据以 SkillHub 为准,会随时间变化)。
核心功能¶
依据官方简介,已核实的能力如下:
- 扫描前端仓库:以仓库代码为输入,而非仅依赖口头描述。
- 分析页面逻辑:从实现中识别页面侧的行为与结构关系。
- 提取业务场景与操作流程:把分散在 UI 与交互里的业务步骤归纳出来。
- 梳理 API 调用链:关联前端请求与后端接口的调用关系。
- 生成业务 Skill MD:输出可被执行、可被 Agent 加载的业务 Skill 文档。
官方未在公开页列出具体扫描目录规则、支持框架列表或输出文件名约定;实际效果取决于仓库结构与 Agent 执行 Skill 时的上下文,使用前宜在目标项目上试跑一轮。
安装与启用¶
安装流程遵循 SkillHub 安装说明。Skill 页给出的安装提示为:按该文档安装 @user_c36d82a7/code-skill。
1. 检查或安装 skillhub CLI¶
先确认本机是否已有 CLI:
command -v skillhub && skillhub --version
若未安装,可使用官方推荐的一键安装(含 CLI 与默认 Skill):
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
仅需 CLI 时:
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
2. 安装到当前 Agent 的 skills 目录¶
官方强调:安装时必须用 --dir 指向当前 Agent 识别的 skills 目录,否则默认会装到 ./skills/,Agent 可能无法加载。
skillhub install @user_c36d82a7/code-skill --dir <skills 目录>
常用路径示例(来自 SkillHub 安装文档):
- Cursor:
~/.cursor/skills/ - Claude Code:
~/.claude/skills/ - Codex:
~/.codex/skills/或项目下的.agents/skills/
在 Cursor 中可执行:
skillhub install @user_c36d82a7/code-skill --dir ~/.cursor/skills/
安装后按你所用客户端的要求刷新或重启 Agent,使新 Skill 生效。Codex CLI、Claude Code 与 Cursor 的差异主要体现在 skills 目录位置;安装命令本身一致,差异仅在 --dir 取值。
典型用法¶
公开资料未提供逐步截图或固定脚本名,可复现的用法是:在已安装 Skill 的 Agent 会话中,用自然语言触发,并指明要扫描的前端仓库路径或上下文。
- 确认
code-skill已出现在 Agent 的 skills 目录中。 - 在对话中使用官方列出的触发意图之一,例如:
- 「扫描这个前端仓库,帮我生成业务 skill」
- 「把页面逻辑变成 skill」
- 「code-skill,代码转 skill」 - 提供或可访问的前端项目路径,让 Agent 按 Skill 指引扫描代码、提取场景与 API 链,并生成业务 Skill MD。
生成物为 Markdown 形式的业务 Skill 文档,便于后续在同仓库或其他 Agent 环境中复用。具体生成步骤与中间产物格式以 Skill 包内 SKILL.md 为准(安装后可在 skills 目录中查看)。
适用场景与注意¶
适合谁
- 维护中大型前端、希望把「页面 + 接口」知识沉淀为 Agent Skill 的团队。
- 需要快速从既有代码反推业务流程说明,而不是从零手写 SKILL 的开发者。
限制与注意
- 输入质量依赖仓库可读性:单页应用、单体前端、单仓多包等结构不同,归纳结果可能需要人工校对。
- 社区来源(
community),使用前可在 SkillHub 查看版本与说明,并在非生产环境先试跑。 - 官方页面未声明必须配置 API Key(
requires_api_key=false),但扫描与生成仍消耗模型与本地 IO,大仓库时注意上下文与权限。 - 勿将自动生成的 Skill 直接当作合规或安全审计结论;涉及权限、支付、隐私的流程应人工复核。
结尾¶
code-skill 把「读前端代码 → 写业务 Skill」收成一条可重复的 Agent 工作流,适合在 SkillHub 上按坐标安装并在 Cursor 等客户端里用触发语启用。
- SkillHub 页面:https://www.skillhub.cn/skills/user_c36d82a7/code-skill
- API 坐标页:https://api.skillhub.cn/user_c36d82a7/code-skill
- 安装说明:https://skillhub.cn/install/skillhub.md