前言¶

写前端界面时，最容易出问题的不是不会写，而是”先跑起来再说”。时间紧就省略可访问性检查，想着”反正用户都用现代浏览器”就跳过兼容性处理，布局能看就行——这些妥协在交付当下省时间，在后续迭代里加倍还回来。

这个 Skill 的作用就是把这些判断提前定好，让 Agent 在动手写代码之前先接受一套约束。

这是什么¶

「前端工程师」是一个面向前端实现的 Agent Skill，坐标 @user_3c47cf70/frontend-design-mine，版本 1.0.0，由社区发布者 user_3c47cf70 维护，来源标记为 community，归类在 SkillHub 的 dev-programming 分类下。

它解决的问题很明确：前端实现的规范性依赖个人经验，不同 Agent、不同任务里执行的强度不一致。这个 Skill 把规范固化成可复用的指令，在触发时自动生效。

覆盖范围与要求¶

根据官方简介，触发场景包括四类：实现任何前端界面、创建响应式布局、优化性能、确保跨浏览器兼容性。也就是说不是只在”写组件”时才介入，布局和性能优化同样在覆盖范围内。

对实现的要求，简介里写了三点，也是这个 Skill 的核心约束：

1、避免实现中的捷径；
2、遵循最佳实践；
3、无论时间压力、「现代浏览器」假设还是「足够好」的妥协存在与否，都要保证可访问性和性能。

第三点是它区别于普通前端提示词的地方：明确把三类常见借口（时间紧、浏览器够新、凑合能用）列为不构成降低标准的理由，并且把可访问性与性能并列为必须守住的底线，而不是可选项。

官方资料只提供了上述简介，没有展开列出具体的检查项清单、代码规范细节或性能阈值，因此本文不推测其内部指令的具体内容。

安装与启用¶

官方资料中未给出安装命令、目录路径或配置文件字段，也没有针对 Cursor、Codex CLI、Claude Code 分别说明启用方式。因此这里只列出已核实的坐标信息，实际启用步骤请以官方页面为准。

坐标：@user_3c47cf70/frontend-design-mine
版本：1.0.0
来源：community
分类：dev-programming
API Key：不需要（requires_api_key=false）
官方地址：https://api.skillhub.cn/user_3c47cf70/frontend-design-mine
页面地址：https://www.skillhub.cn/skills/user_3c47cf70/frontend-design-mine

requires_api_key=false 意味着启用这个 Skill 不需要额外申请密钥，可以直接接入。

典型用法¶

官方资料没有提供可复现的命令示例或脚本，以下用法基于其声明的触发条件整理，属于对触发场景的应用，而非官方示例。

在对话中提出前端需求时，让 Agent 按照该 Skill 的约束执行即可，例如：

• 「实现一个列表页，包含筛选和分页」——触发界面实现的约束；
• 「做一个移动端优先的响应式布局」——触发响应式布局的约束；
• 「首屏加载太慢，帮我优化」——触发性能优化的约束；
• 「在 Safari 和 Edge 上样式有差异」——触发跨浏览器兼容性的约束。

使用时建议在需求描述里把目标浏览器范围、是否需要键盘导航、目标性能指标一并说明，这样 Skill 里的可访问性和性能要求才有明确的判定依据。

适用场景与注意¶

适合的场景：常规的页面与组件实现、布局搭建、性能排查、兼容性问题处理。凡是需要写前端代码且对质量有要求的任务，都可以用它来约束 Agent 的实现标准。

需要注意的几点：

1、它约束的是实现纪律，不是设计稿还原工具，也不替代具体的组件库或框架选型；
2、官方资料未提供具体的检查项清单，如果项目有内部的代码规范或 ESLint 配置，需要和 Skill 的要求一起使用，两者不一致时以项目规范为准；
3、页面数据存在变动。抓取时页面显示评分 100000、下载 1082、安装 0，而此前的索引记录为评分 99360、下载 911，以官方页面当前显示为准；
4、安装数为 0 说明它目前还不是被广泛使用的状态，作为约束规范使用前，建议先在一个非核心页面上验证 Agent 的实际输出是否符合预期。

结尾¶

这个 Skill 的价值不在于提供新的前端知识，而在于把”别走捷径、守住可访问性和性能”这条线固定下来，让 Agent 在时间压力下也不会主动降级标准。对于需要频繁产出前端界面的场景，它是一个成本很低的约束补充。

官方地址：https://www.skillhub.cn/skills/user_3c47cf70/frontend-design-mine