Token导航 LogoToken导航

Agent Skill · 前端设计

yy-frontend-commit(yy 前端提交)

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码,整理组件结构,或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式,避免只生成孤立片段;涉及页面改动时,应配合本地预览和构建检查确认视觉效果。

yy-frontend-commit 是前端设计类 Agent Skill,可用宿主为 Codex、Claude、Cursor、Gemini CLI,通过GitHub 仓库获取,权限为需要联网;许可证信息还不明确,第三方扫描已通过,按安装量在前端设计类的 10,216 个 Skill 里排第 6,232。

总安装 539周安装 22GitHub Stars 公开资料未说明下载 174核验 2026-05-01

安装说明

本站只整理中文说明,不托管安装包,也不代用户安装。
GitHub
许可证
unknown

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手,先确认命令和权限,再让它执行。

请帮我安装这个 Agent Skill:yy-frontend-commit(yy 前端提交)
来源仓库:https://github.com/bulls-cows/skills
仓库路径:skills/yy-frontend-commit
安装命令:
npx skills add https://github.com/bulls-cows/skills --skill yy-frontend-commit
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill;本站只展示命令,不托管安装包,也不自动执行。

skills.shnpx skills
npx skills add https://github.com/bulls-cows/skills --skill yy-frontend-commit

这个 Skill 是做什么的

前端设计类 Skill 关注页面结构、视觉规范和组件写法,输出通常是可运行的界面代码。

用于辅助前端代码提交与变更管理。yy-frontend-commit 属于前端设计类 Skill,可作为该场景下的辅助能力补充。适合在 React、Vue 等项目中进行组件开发与版本控制。通过 npx 命令安装并使用,需确认项目结构与设计系统匹配。安装前建议核实仓库维护状态及是否涉及构建流程依赖。

使用时注意代码片段完整性,避免孤立修改导致渲染异常。

来源仓库内路径:skills/yy-frontend-commit

上手步骤

4 步
  1. 1

    确认自己的宿主工具

    公开资料标注支持 Codex、Claude、Cursor、Gemini CLI;先确认自己用的是其中之一,再按对应工具的 Skills 目录放置。

  2. 2

    拿到安装命令

    可以直接复制的命令是 npx skills add https://github.com/bulls-cows/skills --skill yy-frontend-commit;命令里的占位符换成自己的路径或密钥再执行。

  3. 3

    安装后重启宿主

    命令执行完要完全退出宿主工具再打开,让新装的 Skill 被重新扫描到,否则列表里可能看不到。

  4. 4

    按最小权限试用

    它需要需要联网,先在测试目录或测试账号里跑,确认没问题再放到正式项目。

常见问题

6 条

yy-frontend-commit 怎么安装?

在终端执行 npx skills add https://github.com/bulls-cows/skills --skill yy-frontend-commit。装完完全退出宿主工具再打开,让它重新扫描本地 Skill。

yy-frontend-commit 支持哪些 AI 工具?

公开资料标注支持 Codex、Claude、Cursor、Gemini CLI。其他工具只要能读取本地 Skill 目录,一般也能手动放进去,但要自己确认触发方式是否一致。

yy-frontend-commit 需要什么权限?

权限级别是需要联网。该 Skill 可能需要联网访问来源站点、仓库或外部 API;具体网络访问范围需要结合源码和 README 复核。

yy-frontend-commit 是免费的吗?

公开资料没有标注明确许可证,收费和商用限制都无法确认。正式使用前请到来源仓库核对授权说明。

yy-frontend-commit 用的人多吗?

公开数据是累计安装 539 次,近一周安装 22 次,下载 174 次。这些数字来自第三方目录统计,只能当作热度参考,不代表质量或安全性。

yy-frontend-commit 安全吗?

第三方扫描结果为通过,但这只覆盖已知的静态检查项,不能替代自己读一遍源码和安装命令。

值得选的地方和要先想清楚的地方

值得选的地方

  • 同时适配 4 种工具,换客户端不用重新找替代品。
  • 第三方扫描已通过,常见的高风险行为没有命中。

先想清楚的地方

  • 许可证没有明确标注,能不能商用、能不能再分发都不确定。
  • 第三方目录整理,版本更新和行为细节以来源仓库为准。

适不适合你

更适合

  • 已经在用 Codex,想直接扩展它能力的人。
  • 需要处理前端设计类任务、又不想每次都手写提示词的人。

不太适合

  • 需要明确授权才能用到公司项目里的场景。
  • 需要厂商级技术支持和 SLA 的生产系统。

前端设计类 Skill 对比

6 个同类
Skill总安装GitHub 星权限许可证扫描
frontend-design

前端设计 · Codex、Claude

8,823,360126,072只读MIT通过
vercel-composition-patterns

Vercel 组合模式 · Codex、Claude

3,858,81625,893需要联网MIT通过
vercel-react-native-skills

Vercel React native skills 前端 · Codex、Claude

2,468,66425,878只读MIT通过
adapt

adapt 搜索 · Codex、Claude

2,027,04023,125操作浏览器未明确通过
bolder

bolder 分析 · Codex、Claude

2,004,28823,130只读未明确通过
yy-frontend-commit

yy 前端提交 · 本页

539—需要联网未明确通过

按安装量取同分类前几名;数字来自第三方目录统计,只作热度参考,不代表质量结论。

SKILL.md 原文

yy-frontend-commit

目录范围限制:处理 src 目录下的所有文件,但以下目录下的文件禁止提交: src/router 禁止目录定义在 SKILL.md 头部的 metadata.forbidden_directories 中,可根据项目需要自行调整。

重要限制:严格禁止处理禁止目录下的文件,也禁止处理 src 目录之外的文件。

使用场景

当用户提到以下内容时,使用此 skill:

  • 提交代码
  • 生成提交信息
  • 整理改动文件

重要:禁止执行 push 操作,但会自动执行 add 和 commit 操作。

工作流程

阶段一:检查目录范围

  1. 首先检查项目是否存在 src 目录:

- 如果不存在,直接告诉用户:"当前项目不符合前端代码提交助手的目录要求,该技能仅支持包含 src 目录的前端项目,不触发提交流程。" 并终止执行 - 同时检查禁止目录(metadata.forbidden_directories)是否存在,如果存在则记录,后续需要排除这些目录下的文件

阶段二:分析当前状态

目录检查通过后,并行运行以下命令了解当前状态:

git status
git diff
git diff --staged
git log --oneline -5

这些命令帮助你理解:

  • 哪些文件已修改
  • 变更的具体内容
  • 是否有已暂存的内容
  • 项目的提交历史风格

阶段三:过滤改动文件

过滤出 src 目录下、且不在禁止目录中的文件(注意:禁止目录下的文件不参与提交,src 目录之外的文件也不参与提交):

  • 如果过滤后没有符合条件的文件,告诉用户:"当前没有需要提交的文件(仅允许提交 src 目录下且不在禁止目录中的改动文件),提交流程结束。" 并终止执行
  • 已修改的文件 (modified)
  • 新增的文件 (untracked)
  • 删除的文件 (deleted)

阶段三:理解改动意图

综合以下信息理解此次提交的目的和原因:

  1. 代码变更分析:从 diff 中识别:

- 新增了什么功能? - 修复了什么问题? - 优化或重构了什么? - 更新了什么文档?

  1. 对话上下文:如果当前对话中有相关讨论,提取:

- 用户想要实现的功能 - 用户提到的问题或需求 - 之前讨论的改动意图 - 用户为什么要做这个改动?解决什么痛点?

  1. 深层理解:

- 不仅仅理解"做了什么",更要理解"为什么要这么做" - 这是解决了什么问题?避免了什么冲突? - 这是为了支持什么新功能或改进什么体验?

阶段四:智能选择暂存文件

根据以下原则选择需要暂存的文件:

应该暂存的文件:

  • 源代码文件(.ts,.js,.vue,.jsx,.tsx 等)
  • 配置文件(package.json, tsconfig.json 等)
  • 文档文件(.md,.txt 等)
  • 样式文件(.css,.scss 等)
  • 测试文件

应该警告的文件(询问用户):

  • 环境变量文件(.env,.env.local 等)
  • 凭证文件(credentials.json, secrets.* 等)
  • 私钥文件(*.key,*.pem 等)
  • 大型二进制文件

应该忽略的文件:

  • 构建产物(dist/, build/ 等,除非明确需要)
  • 临时文件(*.tmp,*.swp 等)

如果发现需要警告的文件,明确告知用户并询问是否应该包含。

阶段五:生成提交信息

提交信息必须遵循格式:type(scope): description

Type(类型):

  • feat - 新功能
  • fix - 修复 bug
  • docs - 文档更新
  • style - 代码格式调整(不影响功能)
  • refactor - 重构
  • perf - 性能优化
  • test - 测试相关
  • chore - 构建/工具/依赖相关

Scope(范围)- 可选:

  • 受影响的模块、组件或功能区域
  • 例如:auth、api、ui

Description(描述):

  • 使用中文(代码标识符、专有名词除外)
  • 使用动词开头的祈使语气
  • 精炼,不超过 50 个字符
  • 重要原则:优先说明"为什么"或"为了解决什么问题",而不只是"做了什么"
  • 精确性原则:当改动内容不多时,提交信息不应过于宽泛,要具体描述变更的细节

- 例如:不说"更新用户模块",而说"更新用户登录 API 添加验证码校验"

  • 如果有对话上下文,必须结合上下文说明改动的目的

- 例如:不说"修复登录 bug",而说"修复登录 bug 解决验证码错误后无法重试的问题"

示例:

优秀的提交信息:

feat(auth): 添加 JWT 用户认证功能
fix(auth): 修复登录 bug 解决验证码错误后无法重试的问题
refactor(api): 简化请求拦截器逻辑
docs(readme): 更新安装说明和环境要求

需要改进的提交信息:

❌ 更新代码  (太模糊)
❌ fix bug   (未使用中文,不够具体)
❌ docs: 更新文档  (过于宽泛,不够具体)
❌ refactor: 重构代码  (只说了做了什么,没说为什么)

更好的版本:

✅ feat(api): 添加用户登录 API 支持验证码登录
✅ fix(auth): 修复登录 bug 解决验证码错误后无法重试的问题

阶段六:展示并确认

在执行提交前,向用户展示:

  1. 将要暂存的文件列表(按模块分类)
  2. 关键变更摘要
  3. 生成的提交信息

重要提示: 用户可能会对提交信息提出修改意见(例如认为信息过于宽泛、不够具体等),应该认真听取用户反馈并调整提交信息,直到用户满意为止。

使用以下格式:

即将提交以下更改:

📝 暂存文件:
  - src/api/user.ts
  - src/views/User.vue

📊 主要变更:
  - 新增用户登录 API
  - 添加登录页面组件

💬 提交信息:
feat(auth): 添加用户登录功能

是否确认提交?

阶段七:执行提交

用户确认后,按顺序执行:

# 1. 暂存文件
git add <file1> <file2> ...

# 2. 创建提交(使用 HEREDOC 确保格式正确)
# 注意:将 <当前 AI 模型名称> 替换为你实际使用的模型名称
git commit -m "$(cat <<'EOF'
<提交信息>

Committed using model: <当前 AI 模型名称>
EOF
)"

# 3. 确认提交成功
git status
git log -1

重要提示:

  • 绝对不要执行 git push 命令
  • 在提交时,动态填写当前使用的 AI 模型名称(不是硬编码)

特殊情况处理

多个独立改动

如果发现多个不相关的改动(例如既有新功能又有 bug 修复),建议用户分别提交:

我注意到此次变更包含两个独立的改动:
1. 新增用户认证功能
2. 修复编辑器保存 bug

建议分别提交以保持提交历史清晰。我可以帮你:
a) 先提交认证功能
b) 再提交 bug 修复

你希望如何处理?

无变更内容

如果 git status 显示没有变更,告知用户:

当前工作区没有未提交的变更。

如果你期望有变更,可能的原因:
- 文件尚未保存
- 变更已经在之前的提交中
- .gitignore 忽略了这些文件

冲突或未推送的提交

如果有未推送的提交或合并冲突,提醒用户先推送或解决冲突:

⚠️ 注意:
- 有 X 个提交尚未推送到远程仓库
- 建议在继续前先推送或解决冲突

注意事项

  1. 从不跳过 hook:不使用 --no-verify 等标志
  2. 不强制操作:不使用 --force 或 --amend(除非用户明确要求)
  3. 保护主分支:如果在 main/master 分支,提醒用户考虑在功能分支工作
  4. 尊重.gitignore:不建议提交被忽略的文件
  5. 保持原子性:每次提交应该是一个逻辑单元

最佳实践

  • 提交信息应该回答"这个提交做了什么,以及为什么要这么做"
  • 优先说明改动的目的/原因,而不只是描述改动本身
  • 保持提交信息的精确性:小改动要有具体的描述,避免过于泛泛

- 即使只修改了一个小细节,也要具体说明改了什么 - 例如:"更新用户登录 API 添加验证码校验" 比 "更新 API" 更好

  • 认真对待用户反馈:如果用户认为提交信息不够好,立即调整优化
  • 优先使用对话上下文理解真实意图
  • 当不确定变更意图时,询问用户

开始对话

当用户启动此 skill 时,请按以下方式响应:

你好!我是前端代码提交助手 📝

我将帮你:
1. 归纳 src 目录下所有改动的文件(排除禁止目录)
2. 分析改动内容
3. 生成规范的提交信息
4. 自动执行 add 和 commit 操作(在你确认后)

注意:
- 我不会执行 push 操作,只会自动完成本地提交
- 禁止的目录定义在 SKILL.md 头部的 metadata.forbidden_directories

让我先获取改动文件列表...

然后按照工作流程逐步执行。

平台分布

Codex

33.54%
按下载量换算58

Claude

30.38%
按下载量换算53

Cursor

17.07%
按下载量换算30

Gemini CLI

9.8%
按下载量换算17

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

需要联网

该 Skill 可能需要联网访问来源站点、仓库或外部 API;具体网络访问范围需要结合源码和 README 复核。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。目前只有一个公开来源,建议同时核对源仓库。

继续浏览同类 Skills