前言¶
团队一扩人，命名、目录、组件写法就容易各写各的；Code Review 反复纠同类问题，文档又和实际代码对不上。把规范写进 Confluence 或 README，Agent 对话里往往还是按默认习惯生成代码。下面介绍 SkillHub 上的「前端开发规范」Skill：以通用 SKILL.md 形式安装到 Cursor、Claude Code 等客户端，让模型在写前端相关代码时有一致、可引用的规范约束。
这是什么¶
「前端开发规范」是社区发布者 user_27ccabd4 在 SkillHub 提供的 dev-programming 类 Skill，坐标为 @user_27ccabd4/frontend-spec，当前版本 1.0.0，来源标注为 community。官方 API 地址为 https://api.skillhub.cn/user_27ccabd4/frontend-spec，SkillHub 展示页为 https://www.skillhub.cn/skills/user_27ccabd4/frontend-spec。
Skill 简介说明：这是一套企业级前端开发规范 Skill，覆盖命名、目录结构，以及 CSS、JavaScript、TypeScript、Vue、React、Git、构建、性能、安全等方面的完整规范。标签 requires_api_key=false，安装后不需要额外 API Key。
核心功能¶
依据 SkillHub 页面与 API 元数据，可核实的能力范围如下（具体条文以安装后的 SKILL.md 为准）：
- 工程与目录：统一项目目录与文件组织方式，减少「同一类文件放不同路径」的分歧。
- 语言与样式规范：CSS、JavaScript、TypeScript 的写法与约定。
- 框架相关：Vue、React 场景下的规范要点。
- 协作与交付：Git 使用、构建流程相关的约定。
- 质量与安全：性能与安全相关的开发规范条目。
该 Skill 不替代你们团队已有的设计系统或 ESLint 配置；它是在 Agent 侧提供一份可被模型读取、遵循的规范文本，与本地 lint、CI 可以并行使用。
安装与启用¶
SkillHub 官方建议：让 AI 按安装文档处理，或直接通过 SkillHub CLI 安装到当前 Agent 的 skills 目录。未指定 --dir 时，CLI 默认装到 ./skills/，多数客户端不会自动识别，需要指向各自约定的目录。
1. 安装 SkillHub CLI（若尚未安装）¶
先检查是否已有 CLI：
command -v skillhub && skillhub --version
未安装时，可按 SkillHub 安装文档执行完整安装（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
安装说明原文：https://skillhub.cn/install/skillhub.md。
2. 安装本 Skill¶
将 @user_27ccabd4/frontend-spec 安装到当前 Agent 正在使用的 skills 目录。常用路径如下（摘自 SkillHub 安装文档）：
| 客户端 | Skills 目录 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或项目下的 .agents/skills/ |
| Windsurf | ~/.codeium/windsurf/skills/ 或项目下的 .windsurf/skills/ |
示例（把 <skills 目录> 换成上表对应路径）：
skillhub install @user_27ccabd4/frontend-spec --dir <skills 目录>
SkillHub 页面还给出了「提示词安装」方式，等价于让 Agent 阅读 https://skillhub.cn/install/skillhub.md 并完成上述坐标安装：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_27ccabd4/frontend-spec`。
安装完成后，按你所用客户端的说明刷新或重启 Agent，使新 Skill 被加载。本文未核实 Codex CLI、Claude Code 在 2026-10-19 是否有额外配置文件名差异；若与上表不一致，以各客户端当前文档为准。
典型用法¶
在 Skill 已安装且被 Agent 识别的前提下，典型用法是：在前端相关任务中主动依赖该 Skill，让模型按规范生成或审查代码，而不是临时口述几条规则。
可复现的起步步骤：
- 确认
frontend-spec出现在 skills 目录（例如 Cursor 的~/.cursor/skills/下对应包名目录）。 - 在新对话中说明任务类型（新建页面、重构组件、补全 TS 类型、写 Vue/React 模块等），并注明需遵循已安装的「前端开发规范」Skill。
- 对已有代码做 Review 时，同样引用该 Skill，请模型按规范中的命名、目录、性能、安全等条目逐条对照。
SkillHub 展示页未公开 Skill 内部的触发词或分节标题；更细的示例（例如某类组件必须如何命名）需在安装后打开 Skill 包内的 SKILL.md 与附带 reference 再对照使用。
适用场景与注意¶
适合谁
- 希望 Agent 生成的前端代码与团队书面规范对齐，又不想每次粘贴长文档的开发者。
- 技术负责人需要把「命名 / 目录 / Git / 构建 / 性能 / 安全」等约定固化成 Agent 可读的单一来源。
限制与注意
- 来源为 community，规范内容可能与贵司栈或内部标准不完全一致，落地前建议由前端 Owner 通读 SKILL.md 并做裁剪或 fork 后自用。
- 规范 Skill 不能代替自动化测试、ESLint/Stylelint、安全扫描；仍应在 CI 中保留硬性检查。
- SkillHub 元数据显示评分 100000、下载 34929、安装 281（统计以 SkillHub 页面为准，会随时间变化）。
- 未安装 SkillHub CLI 时，只能通过「让 AI 按 install 文档安装」的方式完成，需保证执行环境允许访问 SkillHub 安装脚本与技能包。
结尾¶
「前端开发规范」把企业级前端约定打包成 @user_27ccabd4/frontend-spec，通过 SkillHub 安装到 Cursor 等客户端的 skills 目录后，可在日常写码与 Review 中减少规范漂移。安装与目录说明以 https://skillhub.cn/install/skillhub.md 为准；Skill 详情与版本见 https://www.skillhub.cn/skills/user_27ccabd4/frontend-spec 与 https://api.skillhub.cn/user_27ccabd4/frontend-spec。
