Frontend Prompt Skill
帮助 Agent 将模糊的前端开发需求转化为专业的结构化方案。
When to use this skill
-
用户提出前端开发任务时（新增页面、修复 Bug、优化性能、重构等）
-
需要将模糊需求转化为结构化方案时
-
需要查询前端开发最佳实践和规范时
How to use it
- 优化需求 (推荐)
使用 npm 包将需求转化为详细开发方案：
npx -y @jdzhang225gmail/frontend-prompt optimize "<用户需求>" --fields optimizedPrompt,workflow
输出字段说明：
-
optimizedPrompt : 优化后的完整 Prompt
-
workflow : 工作流步骤和审批关口
-
guardrails : 开发守则清单
-
clarifyingQuestions : 需要向用户确认的问题
- 查询本地规范数据
搜索 guardrails、gates 和 questions：
node .agent/skills/frontend-prompt/scripts/index.js search "<关键词>"
Decision tree
用户需求 │ ├─ UI/UX 相关？ │ ├─ 是 → 先获取设计建议 → 再运行 optimize │ └─ 否 → 直接运行 optimize │ ├─ 需求是否清晰？ │ ├─ 是 → 执行 optimize 输出的 workflow │ └─ 否 → 使用 clarifyingQuestions 向用户确认 │ └─ workflow 包含 gates？ ├─ 是 → 在 gate 节点暂停并请求用户确认 └─ 否 → 继续执行
Guardrails
执行时应遵循 optimize 命令输出中的 guardrails 列表，主要包括：
-
禁止凭空捏造 - 信息不足时必须反问用户
-
禁止引入新依赖 - 无明确理由不得引入新 npm 包
-
禁止占位符代码 - 必须输出完整可执行代码
-
KISS 原则 - 优先选择最简单的实现方案
Approval Gates
如果 workflow 输出包含 gates ，这是审批关口。Agent 必须在对应步骤：
-
完成当前阶段的输出
-
暂停并提示用户审批
-
等待用户确认后才继续下一阶段
常见的 gate 节点包括：设计方案确认、开发计划确认、变更说明确认等。