AI Skill Hub收藏值得用的 AI Skill

怎么搭配使用? ​

skill 不是孤立工具,而是 SDD(Spec-Driven Development) 工作流串联 —— 任何任务都先思维三步走 → 再叠加输出物 skill(边写边生效) → 最后收尾质检。下面按角色场景给出验证过的搭配路径,直接抄。

💡 核心原则:思维三步走是所有流程的前置(放最前);前端开发的 frontend-design + react-best-practices 是永远同步生效的双底座(不是先后阶段);web-design-guidelines 永远放最后做质检。

🧠 思维三步走(任何任务的前置) ​

brainstorming(发散) → grill-me(收敛) → OpenSpec(落规格)

任何决策、任何任务前的标准思考链 —— 跨角色通用,默认装上。最后一步把对话沉淀成仓库里的 spec 文件,任何 AI 接手都能从规格起步。

⚓ 本节是后续所有场景的前置环节。下面各场景章节顶部会以 > 🧠 先思维三步走 → ... 短语引用本节,不再重复展开。

Prompt 示例

用 brainstorming skill 帮我精炼这个想法:
"我想做一个能自动整理小红书爆文规律的工具"

拿到方案后追一句:

用 grill-me skill 把这个方案的每个决策都问到底,
看看还有哪些没拍板的地方

决策完整后,把规格落到仓库:

/opsx:propose xhs-trend-analyzer

💡 轻量任务可跳过 OpenSpec:小改动、bugfix、一次性脚本 直接 brainstorming → grill-me → 写代码就行。OpenSpec 适合"会被多个 agent 反复接手、且想保留 spec 历史"的 feature 级任务。

📋 产品经理:从想法到立项 → 上线 ​

🧠 先思维三步走 → 写 PRD → 画流程图 → 画原型 Demo → 做汇报 PPT → 上线后做运营图卡

brainstorming → write-a-prd → baoyu-diagram → 走前端开发 SDD 流程 → frontend-slides → baoyu-image-cards

PM 核心交付物一条线串完。第 4 步「画原型 Demo」直接走前端开发 SDD 流程 —— 同一套 skill,不同输出物。

Prompt 示例

用 write-a-prd skill 把刚才 brainstorming 的结果转成 PRD,
重点回答 problem / users / scope / success criteria

用 baoyu-diagram skill 把这份 PRD 的核心用户路径画成流程图,
给非技术 stakeholder 看

🎨 第 4 步「画原型 Demo」 → 走 前端开发 SDD 流程,把这份 PRD 当作 spec 起点。给 PM 看的原型也按工程要求做 —— react-best-practices 与 web-design-guidelines 一起跟上,Demo 后期常被直接拿去上线。

用 frontend-slides skill 做 10 页汇报 PPT,基于这份 PRD,
1 页 hook、2-7 页方案、8-10 页指标排期

上线后用 baoyu-image-cards skill 做 8 张小红书图卡,
内容是功能介绍,style=cute,palette=macaron

🎨 前端开发 SDD 流程 ​

从原型到上线代码 · 同一套 skill 组合既出 Demo 也搭真实代码 🧠 先思维三步走 → ⚙️ skill 组合叠加(边写边生效)→ 🔍 web-design-guidelines 静态质检 → 🌐 agent-browser 运行时验证

核心认知:前端开发不是"先出感觉,再写代码,再质检"的伪线性阶段,而是 skill 组合叠加 —— frontend-design + react-best-practices 是默认双底座、永远同步生效;impeccable / ui-ux-pro-max 按场景叠加(0-1 个);web-design-guidelines 静态质检;agent-browser 运行时验证(让 agent 真实打开浏览器看截图,补 SDD 闭环最后一公里)。

SDD 完整流程:

阶段 0: 🧠 思维三步走 (brainstorming → grill-me → OpenSpec)
        ↓
阶段 1: ⚙️ 开发实现 (skill 组合叠加,边写边生效)
   ┌─ frontend-design          (自动激活,无需 prompt)
   ├─ react-best-practices     (必备,写每个 React 组件就遵守)
   ├─ + impeccable    OR       (按场景叠加,二选一或都不用)
   │   ui-ux-pro-max
   ├─ + taste-skill            (可选,反"模板感",仅品牌/营销页)
   └─ + better-icons           (可选,需要图标时调用,200k+ 图标 + MCP)
        ↓
阶段 2: 🔍 静态质检 (web-design-guidelines · 按 file:line 审 a11y/UX)
        ↓
阶段 3: 🌐 运行时验证 (agent-browser · agent 真实打开浏览器看截图,过流程)

skill 组合表

💡 react-best-practices 不是后置质检 —— 它是规则集,与 frontend-design 同步生效,在编码过程中持续参考。"等写完再审"会让 cascading useEffect / 过重 import 等返工成本翻倍。

Prompt 示例

阶段 0 思维三步走(详见 思维三步走):

用 brainstorming + grill-me 把"做个 B2B SaaS dashboard"精炼到可拍板,
然后 /opsx:propose dashboard-mvp 落规格

阶段 1 开发实现(skill 组合叠加):

基于刚落的 spec 实现 dashboard:
- frontend-design 自动激活,无需写
- 同时 reference react-best-practices,严格遵守 useEffect 依赖、
  client-side import 大小、避免 cascading effect
- 叠加 ui-ux-pro-max(产品类型=B2B SaaS,modern + glass 风格)
- 直接给 React + Tailwind 代码

品牌 / 营销页场景:把 ui-ux-pro-max 换成 impeccable(brand 模式),可再叠加 taste-skill(MOTION_INTENSITY=high, VISUAL_DENSITY=low)反模板感。

阶段 2 静态质检:

用 web-design-guidelines skill 审查刚才的代码,
重点看可访问性、表单交互、动效细节,按 file:line 给反馈

阶段 3 运行时验证:

用 agent-browser skill 起 dev server,
打开 dashboard 截图,过一遍登录 → 切换 tab → 提交表单的真实流程,
有任何视觉异常 / 交互卡顿截图给我

💡 Windows 用户启动方式见 前端 → agent-browser(connect 9222 模式,绕过 daemon 自启 Chrome 失败)。

📣 内容创作者:把内容变可视化 ​

🧠 先思维三步走 → 选平台与形式 → 出图 / 出视频

baoyu-infographic(信息图) · baoyu-image-cards(社媒图卡) · HyperFrames / Remotion(程序化视频)

按平台与形式选,都不需要 PS / Figma / 剪辑软件。

Prompt 示例

用 baoyu-infographic skill 把这篇技术文章做成 1 张信息图,
layout=hierarchy,style=minimal,适合发公众号

用 baoyu-image-cards skill 把"一周 AI 工具盘点"做成 7 张图卡,
style=fresh,palette=warm

用 Remotion 搭一个视频模板:
输入 JSON 数组(title + bg_image),输出 9:16 短视频,
每条 5 秒、带淡入淡出

用 HyperFrames 做一段产品介绍视频,
用 HTML/CSS 编排 30 秒分镜,可被 agent 反复修改

🛠️ 运维:线上排查 + VPS 管理 ​

🧠 先思维三步走 → 选场景:监控排查 / 网络代理

elk(自然语言查 ES 日志) · setup-transfer-clash(一键部署 VPS 代理节点)

两个 skill 都来自作者自有仓库 JiahaoLin2018/agent-skills,按"问题域"选用 —— 排查线上问题用 elk,搭建/维护 VPS 节点用 setup-transfer-clash。

Prompt 示例

用 elk skill 查一下 my-service 项目最近 1 小时有没有 NullPointerException,
按 traceId 关联完整调用链

用 setup-transfer-clash skill 部署一台新 VPS 节点:
SSH 密码运行时输入,启用 BBR,订阅服务用随机端口

⚠️ setup-transfer-clash 仅供学习和研究使用,请遵守当地法律法规。

🔍 找现成的 skill · 🛠 自己造 skill ​

🔍 找现成的:find-skills ​

让 agent 自己搜寻并推荐 —— 兜底入口。

用 find-skills skill 帮我找一下:
有没有专门做"代码安全审查"的 skill?

🛠 自己造:skill-creator ​

找不到合适的就自己写。skill-creator 提供从零创建、打 description、跑 eval、benchmark variance 分析的完整工程化流程。

用 skill-creator 帮我从零造一个 skill:
功能 = "把 figma 设计稿转 React 组件",
按工程化流程(描述优化 → eval → benchmark)走一遍

还有别的搭配场景值得收录?欢迎在 仓库 Issues 提建议。