前言¶
在 Cursor、Claude Code 等环境里做界面时，模型往往缺少统一的前端约定：组件怎么拆、响应式断点怎么定、客户端状态放哪一层、性能和无障碍要不要一并考虑。每次对话都要重复说明技术栈和工程习惯，成本高，产出也容易前后不一致。
下面介绍 SkillHub 上的 frontend-developer（坐标 @org-02qudk26/frontend-developer）。它用通用 SKILL.md 形式把「现代 React / Next 前端」相关指引交给 Agent，在创建 UI 相关任务时作为固定上下文参与推理。
这是什么¶
frontend-developer 是 SkillHub 分类 dev-programming 下的一条企业来源（enterprise）Skill，当前版本 1.0.0，由 智雨科技 发布。官方简介概括为：构建 React 组件、实现响应式布局，并处理客户端状态管理；面向 React 19、Next.js 15 与现代前端架构；同时强调性能优化与无障碍（a11y），适用于创建 UI 的场景。
页面元数据标明 requires_api_key=false，即安装与使用不依赖额外 API Key。SkillHub 展示评分为 100000，下载 4021 次（统计以 SkillHub 页面为准）。
- 技能页：https://www.skillhub.cn/skills/org-02qudk26/frontend-developer
- API 坐标入口：https://api.skillhub.cn/org-02qudk26/frontend-developer
核心功能¶
以下能力均来自官方简介与 SkillHub 条目，未在公开页展开的细则不臆测：
- React 组件：指导 Agent 按组件化方式组织界面与逻辑。
- 响应式布局：在布局与样式决策中考虑多端与断点。
- 客户端状态管理：在浏览器侧状态的设计与实现上提供一致取向。
- 技术栈对齐：明确以 React 19、Next.js 15 及常见现代前端架构为语境。
- 性能与无障碍：在实现 UI 时纳入性能与 a11y 相关考量。
具体触发词、目录结构或代码模板以安装包内 SKILL.md 为准；公开页未提供全文时，以本地安装后的文件为权威说明。
安装与启用¶
SkillHub 提供两种常见路径：让 AI 按安装文档执行，或本机使用 skillhub CLI。
方式一：提示词交给 AI 安装¶
官方技能页给出的安装提示为：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@org-02qudk26/frontend-developer`。
将上述句子发给当前 Agent，由其按 SkillHub 安装与优先源配置 完成 CLI 检查、安装与技能落盘。
方式二：本机 skillhub CLI¶
先确认是否已安装 CLI：
command -v skillhub && skillhub --version
未安装时，可按官方文档执行完整安装（示例为文档中的推荐命令）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
安装技能时，必须用 --dir 指向当前 Agent 的 skills 目录，否则默认落在 ./skills/ 可能不会被识别。文档列出的常用路径包括：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或项目下的.agents/skills/
安装命令形态如下（将 <skills 目录> 换成你环境对应路径）：
skillhub install @org-02qudk26/frontend-developer --dir <skills 目录>
也可先搜索再安装：
skillhub search frontend-developer
skillhub install @org-02qudk26/frontend-developer --dir <skills 目录>
安装后按所用客户端要求重启或刷新 Agent，使技能被加载。
典型用法¶
公开资料未附带独立教程仓库或示例项目，可复现的步骤主要是「安装 + 在前端任务中启用技能」：
- 按上一节将
@org-02qudk26/frontend-developer装入当前 Agent 的 skills 目录。 - 在对话中提出与官方简介一致的需求，例如：用 React 19 实现某组件、在 Next.js 15 中做页面与布局、处理客户端状态、或同时要求性能与无障碍检查。
- Agent 读取技能包内
SKILL.md后，应在组件结构、布局、状态与工程约束上更贴近该 Skill 的定义。
若需核对某条具体规则（命名、目录、测试要求等），请在本地打开安装后的 SKILL.md，不要依赖二手摘要。
适用场景与注意¶
适合谁
- 日常用 AI 写 React / Next 界面，希望默认带上 React 19、Next.js 15 语境的开发者。
- 需要在一次会话里同时覆盖布局、客户端状态、性能与 a11y 的团队或个人。
- 已通过 SkillHub 管理技能、并愿意把前端规范固化在 Skill 而非每次手写 system 提示的用户。
注意
- 技能描述针对「创建 UI」类任务；后端、基础设施或未在简介中写明的能力，不应默认由该 Skill 覆盖。
- 企业来源 Skill 的更新节奏与开源社区包可能不同，升级前可用
skillhub查看版本（当前公开版本为 1.0.0）。 - CLI 安装目录错误是常见踩坑点，务必使用
--dir指向当前客户端的 skills 路径。 - 本文统计数据来自 SkillHub 抓取与页面展示；若与站内实时数字不一致，以 SkillHub 为准。
结尾¶
frontend-developer 把 React 组件、响应式布局、客户端状态，以及 React 19 / Next.js 15 下的性能与无障碍，收敛成一条可安装的 Agent Skill，适合作为前端 UI 工作的默认约束层。需要安装或查看详情时，请访问 SkillHub 技能页：https://www.skillhub.cn/skills/org-02qudk26/frontend-developer
